Just Because It’s Ridiculous Doesn’t Mean It’s Stoopid

John Bristowe | @JohnBristowe

gradientsbox-shadow

.gradient-bg { background-color: #1a82f7; background-image: url(images/fallback-gradient.png); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,

from(#2F2727), to(#1a82f7)); background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); background-image: -ms-linear-gradient(top, #2F2727, #1a82f7); background-image: -o-linear-gradient(top, #2F2727, #1a82f7);}

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,

startColorstr=#1471da, endColorstr=#1C85FB);-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

#lol { -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888;}

1. box-shadow is fun and simple

2. gradients are fun but tricky

3. Mo browsers, mo problems

April 20, 2011

Doug Avery

“39 Ridiculous Things To Do With

CSS3 Box Shadows”

Conversions are simple

box-shadow in IE9+

Gradients in IE10+

-webkit-transition-ms-transition

-webkit-border-radius

border-radius

-webkit-gradient-ms-radial-gradient

1. box-shadow is fun and simple2. gradients are fun but tricky3. Mo browsers, mo problems

1. box-shadow is fun and simple2. gradients are fun but tricky3. Mo browsers, mo problems

westciv.com/tools/gradients

gradients.glrzad.comcolorzilla.com/gradient-

editor

John Bristowe@JohnBristowe