CSS3 in HTML5? HTML5 in CSS3!

Published 13 years, 11 months past
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.)

Comments (27)

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

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

  3. 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. Sorry I left out the Opera prefixes. Fixed!

  5. 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. You left out IE9 calls. If I remember correctly the last platform preview added css transform properties

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

  8. 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. last time I checked IE uses the -ms prefix for the css transform properties

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

  11. Looks great in Chrome too.

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

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

  14. 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. It is awesome.

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

  16. 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. 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. Is that a Sheryl Crow reference?

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

  19. 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. “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. I was referring to the Talking Heads. I suspect she probably was as well. Glad to have brought the lulz!

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

  23. Pingback ::

    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. 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. 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. 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. Eric,

    Some CSS3-based eye-candy code samples are here:
    http://code.google.com/p/css3-graphics/

    Enjoy!

    Oswald

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview