I would like the bottom wave effect on top too! Can anyone show me how it's done.
The effect should look the same on the top of where it is placed on the top as well as the bottom.
I am actually trying to do is break a image top and bottom with waves, so that partial top and bottom of image disappears in waves.
#import url(https://fonts.googleapis.com/css?family=Montserrat);
//variables
$background: #FFF;
body {
background-color: $background;
color: #ffF;
font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 2em;
margin: 0;
padding: 0;
}
.wave{
text-align: center;
background: linear-gradient(to bottom, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
.content {
color: #333;
font-size: 0.8em;
padding: 1em;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Rounded Borders</title>
</head>
<body>
<div class="wave">I'm wavy</div>
<div class="content">
With two special pseudo elements (before and after) and the power of repeating css3 radial gradients this ruffle like waves are done much easier than before without an image file.
</div>
</body>
</html>
You can do one part using the pseudo elements and the other using multiple background:
.wave{
text-align: center;
background:
radial-gradient(circle at 10px 15px, white 12px, transparent 13px) left 0 bottom -5px/40px 20px repeat-x,
radial-gradient(circle at 10px -5px, transparent 12px, white 13px) left 0 bottom -10px/20px 20px repeat-x,
linear-gradient(to bottom, sandybrown, chocolate);
padding:40px 0;
position: relative;
}
.wave::before,
.wave::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
background-repeat: repeat-x;
transform:scaleY(-1);
}
.wave::before{
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
<div class="wave">I'm wavy</div>
I'm designing a site for a school project, and I'm trying to design a particular style for the buttons and navigation, but I'm not sure how to go about this.
I considered doing a border effect, but I stopped short as I realized that it doesn't just involve changing individual side's colors but cutting two sides in half and coloring those pieces differently. A gradient on a div behind it might work, but not only would that get complicated, but it would look blurry while I'm going for sharpness like an edge on a 3D shape. Is this doable, or would I have to use images?
EDIT: Wow, looks like there's a lot of methods out there. Code Golf, anyone?
A solution without css gradient if you want to support IE8 too: http://jsfiddle.net/2am780pq/
HTML:
<a class="button">Cool</a>
CSS:
.button {
display: inline-block;
position: relative;
background-color: #4755e7;
padding: 10px 20px;
color: #fff;
}
.button:before {
content: '';
position: absolute;
top: 50%;
bottom: -5px;
left: -5px;
right: -5px;
margin: auto;
background-color: #4451dc;
z-index: -1;
}
.button:after {
content: '';
position: absolute;
top: -5px;
bottom: 50%;
left: -5px;
right: -5px;
margin: auto;
background-color: #5d67e9;
z-index: -1;
}
without gradient nor pseudo-elemts, box-shadow could do the job too:
http://codepen.io/anon/pen/NPaZBd
a{
display: inline-block;
color: #FFF;
padding:5px 1em;
line-height:2em;
background:#4755E7;
margin:1em;
box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9,
0.8em -0.8em 0 -0.5em #5d67e9,
-0.8em 0.8em 0 -0.5em #4451dc,
0.8em 0.8em 0 -0.5em #4451dc;
}
/* add an inside blurry border too ? */
a:nth-child(even) {
box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9,
0.8em -0.8em 0 -0.5em #5d67e9,
-0.8em 0.8em 0 -0.5em #4451dc,
0.8em 0.8em 0 -0.5em #4451dc,
inset 0 0 1px
}
link
link link
link bigger link
link even bigger works still
Yes, with gradient backgrounds and nested elements. This is NOT cross-browser compatible in browsers that do not support CSS3.
Live example: JSFiddle
The HTML:
<span>Click Me</span>
The CSS:
.button {
display: inline-block;
padding: 4px;
background: rgba(115,127,255,1);
background: -moz-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(115,127,255,1)), color-stop(50%, rgba(68,81,220,1)), color-stop(51%, rgba(68,81,220,1)), color-stop(100%, rgba(68,81,220,1)));
background: -webkit-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -o-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: -ms-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
background: linear-gradient(to bottom, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%);
}
.button span {
display: inline-block;
background: #4755E7;
color: #fff;
padding: 0.5em 0.75em;
}
Here one element solution, simplier markup :D
<b>Im sexy and i know it!</b>
http://jsfiddle.net/ebdq20vm/1/
b {
padding: 20px;
display: inline-block;
color: #FFF;
background: #5d67e9;
background: -moz-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5d67e9), color-stop(51%, #4451dc));
background: -webkit-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -o-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: -ms-linear-gradient(top, #5d67e9 50%, #4451dc 51%);
background: linear-gradient(to bottom, #5d67e9 50%, #4451dc 51%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d67e9', endColorstr='#4451dc', GradientType=0);
position: relative;
z-index: 5;
}
b:before {
content:'';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background-color: #4755E7;
display: block;
z-index: -1;
}
Is there a way to set the size of the image independent from the general size of the background with css?
With following code I set the size of the of the background, so the gradient and the image have the width of 30px.
background(url("../images/icons/double_arrow_37px.svg"), linear-gradient(to top bottom, rgb(171, 129, 85), rgb(148, 112, 74)));
background-size: 30px 37px;
What I need is to set the width of the image to 30px and the gradient to a width of 100% of the button.
I already know the workaround to create a extra image with the correct dimensions, but maybe there is a smarter way with css?
Full Example:
body {
background-color: #000;
}
.button-custom {
color: #fff;
font-family: $font-centennial;
background-image: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg");
background-size: 30px 37px;
background-position: center left;
background-repeat: no-repeat;
margin-top: 70px;
padding: 15px 45px;
border-radius: 0;
border: 0;
text-transform: uppercase;
overflow: hidden;
}
.button-custom.bronze {
background-color: #ab8155;
}
.button-custom.bronze:hover {
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -moz-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -webkit-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), linear-gradient(to top bottom, #ab8155, #94704a);
background-position: center left;
background-size: 30px 37px;
background-position: center left;
background-repeat: no-repeat;
color: #fff;
}
Contact
In CSS3, you can use multiple images background. linear-background is interpreted as an image not a color. Known that, you can write something like that :
body {
height: 600px; /* not relevant for your problem */
width: 600px;
}
div {
height: 500px; /* not relevant for your problem */
width: 500px; /* not relevant for your problem */
border: 3px dashed green; /* not relevant for your problem */
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -moz-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, blue));
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -o-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -ms-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), linear-gradient(to bottom, red 0%, blue 100%);
background-position: 50% 50%, 50% 50%;
background-repeat: no-repeat, no-repeat;
background-size: 150px, 300px;
}
<div>Yo!</div>
I have a responsive design with 4 fluid blocks.
I want the submit button to be fixed at bottom center.
The problem is, the button is shifted to the right (but not perfectly right-aligned)
Here is my css:
#product-list{
width: 100%;
padding: 0 40px;
margin: 30px 0 0 0;
position:relative;
}
article.products{
float: left;
position:relative;
width: 24%;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 0;
text-align: center;
border: 1px solid #C0C0C0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 10px;
background: #fbfbfb;
background-image: -ms-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(.90, #FFFFFF), color-stop(1, #EFEFEF));
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 90%, #EFEFEF 100%);
background-image: radial-gradient(ellipse farthest-corner at center, #FFFFFF 90%, #EFEFEF 100%);
}
article.products input[type="submit"] {
position: absolute;
bottom: 5px;
left: 50%;
}
Here is the html (deleted unnecessary code; it is a dynamic loop for the boxes):
<div id="product-list">
<section class="main">
<article class="products">
<input name="Submit" type="Submit">
</article>
</section>
</div>
You have to place the input in a parent div
<div class="parent_div">
<input name="Submit" type="Submit">
</div>
And use this CSS to arrange it
.parent_div {
position: absolute;
bottom: 5px;
width: 100%;
}
.parent_div input {
margin: 0 auto;
}
So yeah here is your code:
article.products input[type="submit"] {
margin-left: 50%;
margin-right: 50%;
marging-bottom: 5px;
}
Or you could put a padding-bottom: 5px to the container class. Your choice.
Is it possible to create this shape in CSS3? How?
I am stuck: http://dabblet.com/gist/2962169
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
transform: skew(-20deg);
}
<h1>TEST</h1>
You mean somthing like this
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
width:500px;
height:40px;
border-right: 40px solid transparent;
}
h1:after{
position:absolute;
width: 80px;
border-top: 40px solid #434b82;
margin-left:500px;
border-right: 20px solid transparent;
content:"";
}
<h1></h1>
We can use linear-gradient() to draw this shape on rectangular element.
This trick uses the idea of dividing whole shape in two parts and then draws each part on the background independently.
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
}
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
border-radius: 30px 0 0 30px;
line-height: 50px;
padding: 0 25px;
height: 50px;
width: 200px;
color: #fff;
}
<div>
Some Text Here...
</div>