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.
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: