CSS3 in HTML5? HTML5 in CSS3!
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»
Rich wrote in to say...
So quick! I haven’t even opened a text editor, and you’ve already finished!
Mike Taylor wrote in to say...
You’ve left out the -o- prefix for Opera. ;)
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
Eric Meyer wrote in to say...
Sorry I left out the Opera prefixes. Fixed!
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.”
:)
nyamsprod wrote in to say...
You left out IE9 calls. If I remember correctly the last platform preview added css transform properties
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?
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
nyamsprod wrote in to say...
last time I checked IE uses the -ms prefix for the css transform properties
Eric Meyer wrote in to say...
That’ll teach me to trust marketing videos. Updated to add -ms- prefixes.
Chris M Coppenbarger wrote in to say...
Looks great in Chrome too.
laura wrote in to say...
omg W3C + DESIGN???? that is some crazy!
Josh B. wrote in to say...
Ha! Your tweets from earlier are beginning to make sense now… :)
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
kikito wrote in to say...
It is awesome.
Would it be very complex to add the gray-and-white radial rays in the background?
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.
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.
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.
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.
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.
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!
Jakson wrote in to say...
Awesome! I’d like to see how you did it. Can’t you make a little tuto??
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 [...]
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!
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?
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!
:)
Oswald wrote in to say...
Eric,
Some CSS3-based eye-candy code samples are here:
http://code.google.com/p/css3-graphics/
Enjoy!
Oswald