A quick, 5-minute presentation on box-shadow and gradients for What Do You Know Sydney.

1. Just Because It’s
Ridiculous Doesn’t
Mean It’s Stoopid
John Bristowe | @JohnBristowe

2. gradients
box-shadow

3. .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);
}

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

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

8. 1. box-shadow is fun
and simple

9. 2. gradients are fun
but tricky

10. 3. Mo browsers, mo
problems

11. April 20, 2011

12. Doug Avery

13. “39 Ridiculous Things
To Do With CSS3 Box
Shadows”

15. Conversions are
simple

16. box-shadow in IE9+

17. Gradients in IE10+

18. -webkit-transition
-ms-transition

19. -webkit-border-radius
border-radius

20. -webkit-gradient
-ms-radial-gradient

21. 1. box-shadow is fun and simple
2. gradients are fun but tricky
3. Mo browsers, mo problems

22. 1. box-shadow is fun and simple
2. gradients are fun but tricky
3. Mo browsers, mo problems

23. westciv.com/tools/gradients
gradients.glrzad.com
colorzilla.com/gradient-editor

25. John Bristowe
@JohnBristowe