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

1,306 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,306
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Just Because It’sRidiculous Doesn’tMean It’s Stoopid John Bristowe | @JohnBristowe
  2. 2. gradientsbox-shadow
  3. 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);}
  4. 4. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
  5. 5. #lol { -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888;}
  6. 6. 1. box-shadow is fun and simple
  7. 7. 2. gradients are fun but tricky
  8. 8. 3. Mo browsers, mo problems
  9. 9. April 20, 2011
  10. 10. Doug Avery
  11. 11. “39 Ridiculous ThingsTo Do With CSS3 Box Shadows”
  12. 12. Conversions are simple
  13. 13. box-shadow in IE9+
  14. 14. Gradients in IE10+
  15. 15. -webkit-transition -ms-transition
  16. 16. -webkit-border-radius border-radius
  17. 17. -webkit-gradient-ms-radial-gradient
  18. 18. 1. box-shadow is fun and simple2. gradients are fun but tricky3. Mo browsers, mo problems
  19. 19. 1. box-shadow is fun and simple2. gradients are fun but tricky3. Mo browsers, mo problems
  20. 20. westciv.com/tools/gradients gradients.glrzad.comcolorzilla.com/gradient-editor
  21. 21. John Bristowe@JohnBristowe

×