Real-World CSS

If you’re reading this, the chances are you’ve seen some of the amazing things that have been done in CSS3. Unfortunately, most of them aren’t practical for you, or your clients.

No longer, I say!

Below is a carefully-curated list of real-world examples and snippets of CSS3 that can be safely used to enhance any piece of work you create.

To use any of the following snippets, you’ll need to include this CSS file.

  1. Recreating the <blink> tag

    This was, by far, the best tag in HTML. Unfortunately, it got dropped due to its lack of semantics. Well, it’s back.

    Browser support

    IE10+, Firefox 5+, Chrome, Safari 4+

    This is some blinking text.

    This is some <span class="blink">blinking</span> text.

  2. Recreating the <marquee> tag

    You know when I said that <blink> was the best tag? Well, I lied. Presenting: a valid CSS3 marquee, just like 1999 ordered.

    Browser support

    IE10+, Firefox 5+, Chrome, Safari 4+
    You spin me right round, baby. Like a record, baby. You spin me right round, baby. Like a record, baby. 
    <div class="marquee" style="width: 380px;"><p><span>You spin me right round, baby. Like a record, baby.</span><span>You spin me right round, baby. Like a record, baby.</span></p></div>

  3. Peekaboo!

    Is your client not listening to any of your opinions, is throwing a tantrum when it comes to the invoice, or is generally acting like a toddler? They might be a toddler. If so, this will help.

    Browser support

    IE7+, Firefox 3+, Opera, Chrome, Safari 3+

    I see you!

    <p class="peekaboo">I see you!</p>

  4. Wibble-Wobble

    Got a fidgety client, who makes lots of stinging remarks? They’ll bee happy when their page wobbles, then.

    Browser support

    IE9+, Firefox 4+, Chrome, Safari 4+
    The 2nd man to walk on the moon was Buzz Aldrin. 
    The 2nd man to walk on the moon was <span class="wobble">Buzz</span> Aldrin.

  5. The Third Degree

    It won’t take too much detective work to find this handy little snippet.

    Browser support

    IE9+, Firefox 4+, Opera, Chrome, Safari 4+
    Something’s not quite level here. 
    <span class="third-degree">Something&rsquo;s not quite level here.</span>

  6. WordArt

    Finally, a standards-compliant way to unleash the best type in the world!

    Browser support

    Chrome, Safari 5+

    WordArt

    <h1 class="wordart" title="WordArt!">WordArt!</h1>

  7. Nausea

    Remember spinning on roundabouts as a kid? I hated ‘em. After seeing this, hopefully you will too!

    Browser support

    IE9+, Firefox 4+, Chrome, Safari 4+
    Woah-oah-oah! 
    <span class="nausea">Woah-oah-oah!</span>

  8. The Perfect Typography

    Why bother choosing a font, when you know what you and your client wants?

    Browser support

    IE5+, Firefox, Opera, Chrome, Safari

    It’s perfect!

    <p class="perfect">It's perfect!</p>
Fin