Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Look ma,NO IMAGES!   Lennart Schoors
Me. web designer at Massive Media http://massivemedia.eu. personal site at http://lensco.be. @lensco
Somewhere last year, all thecraze began...
http://desandro.com/articles/opera-logo-css
http://nicolasgallagher.com/pure-css-social-media-icons/
http://cordobo.com/1630-internet-explorer-pure-css-logo
http://graphicpeel.com/cssiosicons
http://lensco.be/2010/04/04/css-world-clocks
Nice gimmick to show off   your 1337 skillz !!1!But theres some real value       here as well...
Why use CSS to make visuals?
1. Performance. smaller overal filesize (but not always, mind you!)  . the iOS icons example:    56K (not g-zipped). fewer...
2. Maintainability. everything in one place. no need to open an editor and resave a  file just to tweak a color or shape
3. Resolution independence. full page zooming   . blurry images vs crisp HTML + CSS
Examples from bricss.net
How to: Shapes
RectanglesI assume you already know how to do this, right?
Circles/ellipses/rounded rects-webkit-border-radius   -moz-border-radius        border-radius
Example: Bricss logo
Example: Bricss logo
Trianglesborder-bottom: 20px solid yellow;border-left: 10px solid transparent;border-right: 10px solid transparent;
Triangles border-top: 20px solid yellow; border-right: 20px solid transparent;Beware of bad anti-aliasing!
Triangles: using gradients background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.5,transparent), color-stop(.5,...
How to: Generating
HTML elements. div, span, p, a, ... whatever suits best. try to avoid extra/empty/unnecessary elements
Generated content. :before & :after pseudo-selectorsdiv:after {  content: "";  position: absolute;  /* other styles */  }
Example: date ribbon       .date {       	   background: #fc0;       	   position: relative;       	   }       	   .date:b...
How to: Manipulating
Maskssquare mask: container element withoverflow: hidden
Transforms. translate/translateX/translateY. rotate       =              +    rotate(-45deg)
How to: Effects
CSS3 FTW. gradients. box-shadow. box-reflect. ...
http://matthamm.com/box-shadow-curl.html
http://nicolasgallagher.com/css-drop-shadows-without-images/
Browser support?
Your good friend Internet Explorer. . Various levels of support  triangles: IE6, border-radius: IE9, ... . If you only aim...
That’s all folks!Questions?Read on at http://lensco.be & http://bricss.net
Upcoming SlideShare
Loading in …5
×

Look ma! No images!

9,563 views

Published on

The why and how of using CSS to generate visuals.

Published in: Technology, Design

Look ma! No images!

  1. Look ma,NO IMAGES! Lennart Schoors
  2. Me. web designer at Massive Media http://massivemedia.eu. personal site at http://lensco.be. @lensco
  3. Somewhere last year, all thecraze began...
  4. http://desandro.com/articles/opera-logo-css
  5. http://nicolasgallagher.com/pure-css-social-media-icons/
  6. http://cordobo.com/1630-internet-explorer-pure-css-logo
  7. http://graphicpeel.com/cssiosicons
  8. http://lensco.be/2010/04/04/css-world-clocks
  9. Nice gimmick to show off your 1337 skillz !!1!But theres some real value here as well...
  10. Why use CSS to make visuals?
  11. 1. Performance. smaller overal filesize (but not always, mind you!) . the iOS icons example: 56K (not g-zipped). fewer HTTP requests
  12. 2. Maintainability. everything in one place. no need to open an editor and resave a file just to tweak a color or shape
  13. 3. Resolution independence. full page zooming . blurry images vs crisp HTML + CSS
  14. Examples from bricss.net
  15. How to: Shapes
  16. RectanglesI assume you already know how to do this, right?
  17. Circles/ellipses/rounded rects-webkit-border-radius -moz-border-radius border-radius
  18. Example: Bricss logo
  19. Example: Bricss logo
  20. Trianglesborder-bottom: 20px solid yellow;border-left: 10px solid transparent;border-right: 10px solid transparent;
  21. Triangles border-top: 20px solid yellow; border-right: 20px solid transparent;Beware of bad anti-aliasing!
  22. Triangles: using gradients background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.5,transparent), color-stop(.5, yellow)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.5,transparent), color-stop(.5, yellow)), -webkit-gradient(linear, 0 0, 100% 0, from(yellow), to(yellow)); background: -moz-linear-gradient(-45deg, transparent 50%, yellow 50%), -moz-linear-gradient(45deg, transparent 50%, yellow 50%), -moz-linear-gradient(yellow, yellow); background-position: 0 0, 0 100%, 10px 0; background-size: 10px 50%, 10px 50%, 100% 100%;Better anti-aliasing, but verbose & cumbersome!
  23. How to: Generating
  24. HTML elements. div, span, p, a, ... whatever suits best. try to avoid extra/empty/unnecessary elements
  25. Generated content. :before & :after pseudo-selectorsdiv:after { content: ""; position: absolute; /* other styles */ }
  26. Example: date ribbon .date { background: #fc0; position: relative; } .date:before, .date:after { content: " "; position: absolute; border-top: 5px solid #fc0; border-left: 15px solid transparent; bottom: -5px; right: 0; } .date:after { border-left: none; border-right: 15px solid transparent; right: auto; left: 0; }
  27. How to: Manipulating
  28. Maskssquare mask: container element withoverflow: hidden
  29. Transforms. translate/translateX/translateY. rotate = + rotate(-45deg)
  30. How to: Effects
  31. CSS3 FTW. gradients. box-shadow. box-reflect. ...
  32. http://matthamm.com/box-shadow-curl.html
  33. http://nicolasgallagher.com/css-drop-shadows-without-images/
  34. Browser support?
  35. Your good friend Internet Explorer. . Various levels of support triangles: IE6, border-radius: IE9, ... . If you only aim for IE9+ support, go nuts. . Google dropping support for IE7 this summer. . Do websites have to look the same in every browser? . My motto: If it works, it works.™
  36. That’s all folks!Questions?Read on at http://lensco.be & http://bricss.net

×