Look ma! No images!
•
15 likes•4,959 views
1. The document discusses using CSS to create visual elements like shapes, logos, and icons instead of images for performance, maintainability, and resolution independence reasons. 2. It provides examples of how to create basic shapes like rectangles, circles, and triangles using CSS properties like border-radius, gradients, and positioning. 3. The document also covers techniques for generating HTML elements, using pseudo-elements, and manipulating elements with transforms to create effects like masks and shadows.
Report
Share
Related slideshows
More Related Content
What's hot
What's hot (20)
Similar to Look ma! No images!
Similar to Look ma! No images! (20)
More from Lennart Schoors
Recently uploaded
Recently uploaded (20)
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 the craze began...
- 9. Nice gimmick to show off your 1337 skillz !!1! But there's 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
- 15. How to: Shapes
- 16. Rectangles I assume you already know how to do this, right?
- 17. Circles/ellipses/rounded rects -webkit-border-radius -moz-border-radius border-radius
- 20. Triangles border-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!
- 24. HTML elements . div, span, p, a, ... whatever suits best . try to avoid extra/empty/unnecessary elements
- 25. Generated content . :before & :after pseudo-selectors div: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; }
- 28. Masks square mask: container element with overflow: hidden
- 29. Transforms . translate/translateX/translateY . rotate = + rotate(-45deg)
- 30. How to: Effects
- 31. CSS3 FTW . gradients . box-shadow . box-reflect . ...
- 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