Upload
john-bristowe
View
1.298
Download
1
Embed Size (px)
DESCRIPTION
A quick, 5-minute presentation on box-shadow and gradients for What Do You Know Sydney.
Citation preview
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