2. WHAT ARE THE BENEFITS?
• Faster page-load times
• Don’t have to sacrifice usability in older browsers
• Spice up layouts
• Makes content easier to read (when used well)
4. CSS3: TRAFFIC LIGHT
HTML
<div class="traffic-light">
<span class="stop"></span>
<span class="slow"></span>
<span class="go"></span>
</div>
Ideally use :before and :after in the CSS
instead of creating dummy html elements.
5. CSS3: TRAFFIC LIGHT
REAL WORLD EXAMPLE
Uses light color as status indicator.
Can be rendered with :after in the CSS.
10. SMARTER LISTS
CSS for “SPECIAL” STAR
li.special:after {
float: right;
content: "2605";
/* Unicode ‘Black Star’ */
}
11. WRAPPING IT UP
• CSS3 can make your websites pretty (just don’t go overboard)
• Faster to load (still pay attention to your render times)
• Faster to develop with
• Degrade gracefully, and older browsers will play nicely
• You can use it right now!
12. link to the demo code
THANKS
AND HAPPY HACKING!
@shoshiroberts for @ladieswhocode