Skip to: site navigation/presentation
Skip to: Thoughts From Eric

CSS3 in HTML5? HTML5 in CSS3!

HTML5 logo

The W3C unveiled a new logo and branding strategy today.  (You might have heard.)  It brings all the deliciousness of a Soviet-era Transformers logo to the yummy conflation of several related technologies!  Did you get your WOFF in my HTML, or did I get my CSS all over your HTML?

As per usual, a lot of people have said a lot of things about this.  For my part, I figure, hey, given that CSS3 is now a branded part of your nutritious HTML5 breakfast, why not go with the flow?  So I did.  You’re welcome.

(Disclaimer: it’ll look best in recent WebKit, Gecko, or Opera browsers, but it’s at least comprehensible in them what doesn’t yet support CSS transforms.  May not be valid in all jurisdictions.  Not a flying toy.)

27 Responses»

    • #1
    • Comment
    • Tue 18 Jan 2011
    • 1554
    Rich wrote in to say...

    So quick! I haven’t even opened a text editor, and you’ve already finished!

    • #2
    • Comment
    • Tue 18 Jan 2011
    • 1554
    Mike Taylor wrote in to say...

    You’ve left out the -o- prefix for Opera. ;)

    • #3
    • Comment
    • Tue 18 Jan 2011
    • 1556
    Arty2 wrote in to say...

    Whaat, no love for Opera there?
    It’s like “Web 2.0” all over again, at least this sounds softer to my ears as an engulfing term.
    On a sitenote, I like how easy the transition from HTML5’s logo to HTML6 will be :P

    • #4
    • Comment
    • Tue 18 Jan 2011
    • 1559
    Eric Meyer wrote in to say...

    Sorry I left out the Opera prefixes. Fixed!

    • #5
    • Comment
    • Tue 18 Jan 2011
    • 1605
    Jeff Croft wrote in to say...

    I will respond to this using three distinct personas:

    1. As a pragmatist: “Why not just use SVG? Way easier, and it’s now part of HTML5, too!”
    2. As a standardista: “This is so awesome and just proves that CSS is the answer to all of the world’s problems!”
    3. As myself: “God I wish I had your free time.”


    • #6
    • Comment
    • Tue 18 Jan 2011
    • 1613
    nyamsprod wrote in to say...

    You left out IE9 calls. If I remember correctly the last platform preview added css transform properties

    • #7
    • Comment
    • Tue 18 Jan 2011
    • 1614
    Eric Meyer wrote in to say...

    I thought IE9 was doing unprefixed properties as part of their “Same Code” initiative. Did that turn out not to be the case?

    • #8
    • Comment
    • Tue 18 Jan 2011
    • 1615
    Shane wrote in to say...

    Looking good! How long did it take you to make? I have not yet been brave enough to try a CSS logo yet! Haha

    • #9
    • Comment
    • Tue 18 Jan 2011
    • 1622
    nyamsprod wrote in to say...

    last time I checked IE uses the -ms prefix for the css transform properties

    • #10
    • Comment
    • Tue 18 Jan 2011
    • 1628
    Eric Meyer wrote in to say...

    That’ll teach me to trust marketing videos. Updated to add -ms- prefixes.

    • #11
    • Comment
    • Tue 18 Jan 2011
    • 1634
    Chris M Coppenbarger wrote in to say...

    Looks great in Chrome too.

    • #12
    • Comment
    • Tue 18 Jan 2011
    • 1644
    laura wrote in to say...

    omg W3C + DESIGN???? that is some crazy!

    • #13
    • Comment
    • Tue 18 Jan 2011
    • 1733
    Josh B. wrote in to say...

    Ha! Your tweets from earlier are beginning to make sense now… :)

    • #14
    • Comment
    • Tue 18 Jan 2011
    • 1844
    Cogito wrote in to say...

    Haha, nice one, Eric. @ Arty2: By the time that happens the Internet will be plugged directly into our brain… or something… Anyways, it’ll look even cooler. :P

    • #15
    • Comment
    • Wed 19 Jan 2011
    • 0415
    kikito wrote in to say...

    It is awesome.

    Would it be very complex to add the gray-and-white radial rays in the background?

    • #16
    • Comment
    • Wed 19 Jan 2011
    • 0847
    JJ wrote in to say...

    Wow, I didn’t inspect it closely at first. I assumed it was SVG. That’s pretty amazing though. It’s a pretty good illustration of the html5 logo page’s definition of html5 – just needed a .woff to top it off.

    • #17
    • Comment
    • Wed 19 Jan 2011
    • 0916
    Eric Meyer wrote in to say...

    kikito, it would be fairly easy to do straight rays (having them taper would be very difficult) but the rays aren’t really part of the logo, so I decided to leave them off. I built this so that it all scales and could, in theory, be placed into a web page as a badge. I mean, I’d NEVER recommend someone actually do that, but the possibility exists.

    JJ, you’ve got a good point there. I really should use a few of the new HTML elements, a bit of SVG (maybe that could be the rays kikito desires!), and a bit of WOFF.

    • #18
    • Comment
    • Thu 20 Jan 2011
    • 1345
    Andy wrote in to say...

    Is that a Sheryl Crow reference?

    Great job! But of course, in IE 8-, it renders like an old Atari game.

    • #19
    • Comment
    • Thu 20 Jan 2011
    • 1705
    Eric Meyer wrote in to say...

    No, Andy, no Sheryl Crow reference. At least, none intentional. What was the reference you spotted?

    The Atari-style rendering in IE8- (and Camino 2- and other old-ish browsers) is actually quite intentional. I built the layout so that CSS-positioning-aware-but-CSS-transforms-unaware user agents would fall back to that appearance. It’s not only viewer-friendly, it’s one of a number of layered commentaries on the wider issue.

    • #20
    • Comment
    • Thu 20 Jan 2011
    • 1757
    Andy wrote in to say...

    “This ain’t no disco” is a lyric from her song “All I Wanna Do”. I realized after I posted it that it’s also from the Talking Heads song “Life During Wartime”. Being a child of the 90’s, her song was what I thought of first. What were you referencing?

    And your “layered commentary” on the old browsers is incredibly amusing. Thanks for the laugh.

    • #21
    • Comment
    • Thu 20 Jan 2011
    • 2057
    Eric Meyer wrote in to say...

    I was referring to the Talking Heads. I suspect she probably was as well. Glad to have brought the lulz!

    • #22
    • Comment
    • Fri 21 Jan 2011
    • 1200
    Jakson wrote in to say...

    Awesome! I’d like to see how you did it. Can’t you make a little tuto??

    • #23
    • Pingback
    • Fri 21 Jan 2011
    • 1210
    Received from Web round up #13: What people are saying about the new HTML5 logo | Mayfield Digital Blog

    […] together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”Eric Meyer:It brings all the deliciousness of a Soviet-era Transformers logo to the yummy conflation of […]

    • #24
    • Comment
    • Fri 21 Jan 2011
    • 1310
    Joe Marini wrote in to say...

    Just tried it on our IE9 PP7 build, and it works great. Also tried it on our upcoming Windows Phone update. Works great there too!

    • #25
    • Comment
    • Mon 24 Jan 2011
    • 0416
    James wrote in to say...

    I have to ask, is marketing HTML 5 as a set of languages as apposed to the 5th version of the HTML standard a good thing as this seems to be doing?

    Will this, and the WHATWG removing the version number for HTML not make it more difficult/confusing for hobbyists / part-time / infrequent developers to design for a given standard and expect browser support?

    • #26
    • Comment
    • Tue 25 Jan 2011
    • 2111
    Michael Tuck wrote in to say...

    Yes, it’s HTML 5! The sensation that’s sweeping the nation!
    Warning: Pregnant women, the elderly, and children under 10 should avoid prolonged exposure to HTML 5.
    Caution: HTML 5 may suddenly accelerate to dangerous speeds.
    HTML 5 contains a liquid core, which, if exposed due to rupture, should not be touched, inhaled, or looked at.
    Do not use HTML 5 on concrete.
    Discontinue use of HTML 5 if any of the following occurs:
    * itching
    * vertigo
    * dizziness
    * tingling in extremities
    * loss of balance or coordination
    * slurred speech
    * temporary blindness
    * profuse sweating
    * or heart palpitations.
    If HTML 5 begins to smoke, get away immediately. Seek shelter and cover head.
    HTML 5 may stick to certain types of skin.
    When not in use, HTML 5 should be returned to its special container and kept under refrigeration. Failure to do so relieves the makers of HTML 5 of any and all liability.
    Ingredients of HTML 5 include an unknown glowing green substance which fell to Earth, presumably from outer space.
    HTML 5 has been shipped to our troops in Saudi Arabia and is being dropped by our warplanes on Iraq.
    Do not taunt HTML 5.
    HTML 5 comes with a lifetime warranty.
    HTML 5! Accept no substitutes!


    • #27
    • Comment
    • Tue 15 Feb 2011
    • 0010
    Oswald wrote in to say...


    Some CSS3-based eye-candy code samples are here:



Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...

January 2011
December February