No images were harmed in the making of this page. All elements below are built on pure CSS3 magic (and a bit of JS for the progress bars), no images have been used.
This page is visible only on Chrome, Safari, Android and iPhone/iPod touch.
Let's start with something simple: just one gradient, border-radius, text-shadow and box-shadow.
.button1 {
padding:4px 7px;
font-size:12px;
color:#444;
background-color:#eee;
background-image:-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0, #fff),
color-stop(0.05, #eee),
color-stop(1, #bbb));
text-shadow:0 1px 0 #f6f6f6;
-webkit-border-radius:2px;
border:1px solid #888;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.button2 {
height:22px;
font-size:10px;
background-color:#444;
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#555), to(#303030));
-webkit-border-radius:11px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.button2 a {
padding:0 18px;
line-height:20px;
height:20px;
color:#ccc;
border-width:1px;
border-style:solid;
border-color:rgba(255,255,255,0.15);
-webkit-border-radius:10px;
text-shadow:0 -1px 0 #000;
}
Gradients may have as many color-stops as you want. Here an example with 4 color stops and a semi-transparent border.
.button3 {
font-size:14px;
background-color:#c93f27;
background-image:-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0, #ec9f95),
color-stop(0.5, #c93f27),
color-stop(0.5, #af301f),
color-stop(1, #f87036));
-webkit-border-radius:3px;
border:1px solid #af3c2c;
-webkit-box-shadow:0 2px 4px rgba(248,112,54,0.7);
}
.button3 a {
padding:5px 10px;
color:#fff;
text-shadow:0 0 3px #ff8d5c;
-webkit-border-radius:2px;
border:2px solid rgba(255,255,255,0.25);
}
You can also mix linear with radial gradients. It's a pity the radial one has no anti-aliasing.
.button7 {
font-size:12px;
text-align:center;
background-image:
-webkit-gradient(radial, 50% -186, 0, 50% -186, 400,
color-stop(0, rgba(255,255,255,0.3)),
color-stop(0.5, rgba(255,255,255,0.3)),
color-stop(0.5, rgba(255,255,255,0))),
-webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#777));
-webkit-border-radius:4px;
border:1px solid #555;
-webkit-box-shadow:0 1px 0 #fff;
}
.button7 a {
width:76px;
height:22px;
line-height:22px;
color:#eee;
text-shadow:0 0 3px #222;
-webkit-border-radius:4px;
border:2px solid rgba(255,255,255,0.15);
}
Mixing two radial gradients we get a nice gem effect.
.button5 {
width:14px;
height:14px;
text-indent:-9999em;
background-image:
-webkit-gradient(radial, 7 2, 0, 7 2, 3,
from(rgba(255,255,255,0.85)),
to(rgba(255,255,255,0))),
-webkit-gradient(radial, 7 12, 0, 7 7, 14,
from(#c7f08b),
to(#006013));
-webkit-border-radius:7px;
border:1px solid #48762c;
-webkit-box-shadow:0 1px 0 #fff;
}
And now the fun part. We can also use a gradient as a mask. This opens an infinite range of possibilities. Have a look a the following scrollbars. They are mode of a couple of gradients and a gradient mask. As we have control over XY position of the mask we can create some fancy effects. Again: no images, just CSS.
.button8 {
width:200px;
height:15px;
border-width:0 1px 1px 1px;
border-style:solid;
border-color:#a6a6a6 #bfbfbf #a6a6a6 #bfbfbf;
background-image:
-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0, rgba(255,255,255,0)),
color-stop(0.15, rgba(255,255,255,0.6)),
color-stop(0.5, rgba(255,255,255,0))),
-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0, #a6a6a6),
color-stop(0.1, #b6b6b6),
color-stop(0.9, #f8f8f8),
color-stop(1, #aaa));
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.15);
overflow:hidden;
}
.button8 span {
width:90px;
height:15px;
background-image:
-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0, rgba(255,255,255,0)),
color-stop(0.15, rgba(255,255,255,0.55)),
color-stop(0.5, rgba(255,255,255,0))),
-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0, #204db5),
color-stop(0.1, #0251ae),
color-stop(0.9, #6fc1ff),
color-stop(1, #569ce1));
-webkit-mask-image:
-webkit-gradient(linear, 0 0, 100% 0,
color-stop(0.1, rgba(187,226,255,1)),
color-stop(0.45, rgba(187,226,255,0.74)),
color-stop(0.55, rgba(187,226,255,0.74)),
color-stop(0.9, rgba(187,226,255,1)));
-webkit-mask-repeat:repeat-x;
-webkit-mask-size:18px 15px;
-webkit-mask-position-x:0;
text-indent:-9999em;
}
An extremely complex array of radial gradients. (Doesn't work on Android).
.button10 {
padding:1px;
-webkit-border-radius:28px;
background:#522718;
-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4);
}
.button10 a {
width:56px;
height:56px;
text-indent:-9999em;
background-image:
-webkit-gradient(radial, 28 30, 0, 28 30, 32,
color-stop(0, rgba(255,255,255,0)),
color-stop(0.79, rgba(255,255,255,0)),
color-stop(0.97, rgba(255,255,255,0.9)),
color-stop(0.97, rgba(255,255,255,0))),
-webkit-gradient(radial, 28 32, 0, 28 36, 32,
from(rgba(255,255,255,0.5)),
to(rgba(255,255,255,0))),
-webkit-gradient(radial, 28 28, 0, -22 0, 28,
from(rgba(30,30,30,1)),
to(rgba(30,30,30,1))),
-webkit-gradient(radial, 28 28, 0, 78 0, 28,
from(rgba(30,30,30,1)),
to(rgba(30,30,30,1))),
-webkit-gradient(radial, 28 28, 0, 28 78, 28,
from(rgba(30,30,30,1)),
to(rgba(30,30,30,1))),
-webkit-gradient(radial, 50% 100%, 0, 50% 50%, 30,
color-stop(0.5, #ffdb5f), color-stop(1, #f37d26));
-webkit-border-radius:28px;
}