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

HTML5 logo

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
  • :before and :after pseudo-elements
  • CSS3 properties that I used: opacity and transform
  • 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:

HTML5 logo with CSS3

I know it’s not perfect, especially the 5 number, but I hope you will still like it! Check the below demonstration page:

View initial demo

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:

Final HTML5 logo with CSS3 transform

View final demo

Browser support

Latest versions of:

  • Mozilla
  • Chrome
  • Safari
  • Opera
  • IE9