As you probably found out, yesterday, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers.
So, I suppose that’s a good thing, that HTML5 got some branding, sounds very interesting!
While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me).
What about the logo? It’s A Bird… It’s A Plane…
No, it’s the new HTML5 logo and in this article I’ll design it using only CSS!
Concept
Getting back to our business, I thought about the ingredients I’d need for this angular orange shield:
- CSS borders shapes
:beforeand:afterpseudo-elements- CSS3 properties that I used:
opacityandtransform - Geo font via Google font API
- Some empty divs to build the five number(later edit)
CSS borders shapes
As seen before, in one of my previous articles, you can achieve angled shapes using CSS borders. In this case, I used borders in order to recreate the shield icon.
:before and :after pseudo-elements
Using this type of selectors it’s helpful when you want to achieve a minimal HTML markup.
CSS3 opacity and transform
Even if the article’s name says : “HTML5 Logo made with CSS3″, this isn’t mainly about CSS3, but, opacity and transform properties were very useful for this.
Custom font
The method I’ll use to display the 5 number is to include the Geo font via Google Font API.
I know it’s not identical, but, at the time I wrote this article, I found it quite similar. Instead, I’d appreciate if you could suggest me a better font to use for the number.
Later edit:
For a perfect result, I guess I could have used CSS3 skew transformation and a lot of empty divs to create the “5″ number …
My initial result:
I know it’s not perfect, especially the 5 number, but I hope you will still like it! Check the below demonstration page:
Updated result
I finally made it, I updated the initial HTML5 logo. Instead the custom font, empty divs were used in order to replicate the logo.
Now you have it! Minimal HTML markup, CSS3 transforms and pseudo-elements:
Browser support
Latest versions of:
- Mozilla
- Chrome
- Safari
- Opera
- IE9
Love it! Good job.
Thanks Anton, glad you like it!
cute XD
fantastic! i love it!!
that’s great i too wanna learn how to blend css3 and html5 for web designing soon……….
@siubie, @netblonde, @laxmi kanth raaj thanks for your comments!
Very nice result :) , btw are you romanian?
Thanks for your comment! The answer to your question is “yes”. :)
I just wish internet explorer never existed. It would make thing a lot easier for cutting-edge web designers.
We would have missed all the fun! :)
This is quite interesting.. I loved the concept.
Thanks for your comment!
Bit of banding appears in Opera but otherwise looks awesome. Well done.
Thanks Tim!
Indeed, on Opera, the final result looks slightly different – as the Opera browser engine (Presto) is different.
Very cool!
But on iPad 4.3 the edges is very jagged, any way around that? Looks like antialiasing is missing.
Thanks!
/J
Joacim, the “antialiasing” thing it’s all about how the current iOS handle the CSS transforms.
Thanks for your comment!
Good job.:)
Excellent job !
Thanks for sharing the cool idea with us!