The document discusses using CSS3 to create visual effects without images for faster page loads and compatibility with older browsers. It provides examples of creating a animated traffic light and special list items using only CSS. CSS3 can be used to beautify websites while maintaining performance, and degrades gracefully when not supported. Code examples and links are provided.

1. EYE CANDY WITHOUT IMAGES:
FUN WITH CSS3
@shoshiroberts

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)

3. CSS3: TRAFFIC LIGHT
REAL WORLD USES
• Status indicators
• Buttons
• Backgrounds
• Page adornment

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.

6. CSS3: TRAFFIC LIGHT
CSS
div.traffic-light span {
display: block;
margin: 8px 0 0;
width: 80px;
height: 80px;
content:'';
background-color: #666; /* temporary, will be overwritten */
border-top: 1px solid rgba(255,255,255,0.8);
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.8);
box-shadow: 0 0 4px rgba(0,0,0,0.8);
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from(rgba(255,255,255,0)),
to(rgba(255,255,255,0.38)));
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.38) 0%,
rgba(255,255,255,0) 100%);
background-image: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,0.38) 0%,
rgba(255,255,255,0) 100%);
background-image: radial-gradient(top, ellipse cover, rgba(255,255,255,0.38) 0%,
rgba(255,255,255,0) 100%);
}

7. CSS3: TRAFFIC LIGHT
CSS for LIGHT COLORS
div.traffic-light span.stop {
background-color: #D10A11;
}
div.traffic-light span.slow {
background-color: #F6D200;
}
div.traffic-light span.go {
background-color: #43C532;
}

8. SMARTER LISTS
HTML
<h1>Creatures</h1>
<ul>
<li class="special">Unicorn</li>
<li>Monster</li>
<li>Sparkles</li>
<li class="special">Godzilla</li>
<li>Nyan Cat</li>
</ul>
<p>&#9733; indicates near extinction and
sheer awesomeness</p>

9. SMARTER LISTS
CSS for ZEBRA STRIPES
ul {
width: 100%;
padding: 0;
list-style-type: none;
}
li {
padding: 5px 10px;
background: #C0C0C0;
font-size: 1.2em;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
li:nth-child(2n) {
background: #DDD;
}

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