Your SlideShare is downloading. ×
Look ma! No images!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Look ma! No images!

6,403
views

Published on

The why and how of using CSS to generate visuals.

The why and how of using CSS to generate visuals.

Published in: Technology, Design

5 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,403
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
147
Comments
5
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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