HTML5 logo using CSS3

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

Share this on: TwitterGoogle+Facebook