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!
Getting back to our business, I thought about the ingredients I’d need for this angular orange shield:
- CSS borders shapes
- CSS3 properties that I used:
- 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,
transform properties were very useful for this.
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.
For a perfect result, I guess I could have used CSS3 skew transformation and a lot of empty divs to create the “5” number …
I know it’s not perfect, especially the 5 number, but I hope you will still like it! Check the below demonstration page:
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:
Latest versions of: