css3-html5-logoAs you probably found out, some time ago, 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!

HTML5-logo

Concept

Getting back to our work, I thought about the ingredients I’d need for this angular orange shield:

CSS borders shapes

I used borders in order to create 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.

For a perfect result, I guess I could have used CSS3 skew transformation and a lot of empty divs to create the “5” number …

HTML5

<div id="wrapper">
<span>5</span>
<div class="inner"></div>
<div class="inner left"></div>
<div class="inner left cover"></div>    
</div>

CSS3

#wrapper {
position: relative;
width: 340px;
margin: 10px auto 30px auto;
}
#wrapper span {
font: normal 475px/305px 'Geo', serif;
width: 340px;
text-align: center;
position: absolute;
top: 0;
z-index: 9999;
color: white;
}    
#wrapper:before {
content: '';
display: block;
/*340 total width */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 345px solid #e34c26;
width: 280px;
}
#wrapper:after {
content: '';
display: block;
/*280 total width */        
border-left: 140px solid transparent;
border-right: 140px solid transparent;
border-top: 40px solid #e34c26;
width: 0;
margin-left: 30px;
}
/**/
.inner {
position: absolute;
top: 0;
-moz-transform: scale(0.85);
-webkit-transform: scale(0.85);
-o-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);	
}
.inner:before {
content: '';
display: block;
/*340 total width */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 345px solid #f06529;
width: 280px;
}
.inner:after {
content: '';
display: block;
/*280 total width */        
border-left: 140px solid transparent;
border-right: 140px solid transparent;
border-top: 40px solid #f06529;
width: 0;
margin-left: 30px;
position: relative;
top: -1px; /* Fix spacing */
}
/**/
.inner.left {
width: 170px; /* half from the 340px total width */
overflow: hidden;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);		
transform: scale(1);		
}
.inner.left:before {
border-top-color: #e34c26;
}
.inner.left:after {
border-top-color: #e34c26;
}
/**/
.inner.left.cover {
z-index: 10000;
opacity: 0.1;
}

Custom Font From Google Font API

<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'>

My initial result:

HTML5-logo

I know it’s not perfect, especially the 5 number, but I hope you will still like it!

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

HTML5

<div id="wrapper">        
<div id="five">
<div class="top"></div>
<div class="left-top"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left-bottom"></div>      
</div>
<div class="inner"></div>
<div class="inner left"></div>
<div class="inner left cover"></div>    
</div>

CSS

h1 {
font: bold 90px 'arial black';
margin: 20px 0 0 0;
text-align: center;
}
p {
text-align: center;
}
/**/
#wrapper {
position: relative;
width: 340px;
margin: 10px auto 30px auto;
}
/**/
#five {
position: absolute; 
z-index: 1;
top: 0;
}
#five div,  #five div:after {
position: absolute;
background: #fff;
}    
#five .left-top {
width: 40px;
height: 130px;
top: 72px;
left: 70px;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
-ms-transform: skew(5deg);
transform: skew(5deg);		
}
#five .top {
width: 90px;
height: 40px;        
top: 72px;
left: 80px;
}
#five .top:after {
content: '';        
left: 85px;
top: 0;
height: 40px;        
width: 110px;
-moz-transform: skew(-5deg);
-webkit-transform: skew(-5deg);
-o-transform: skew(-5deg);
-ms-transform: skew(-5deg);		
transform: skew(-5deg);
}
#five .middle {
width: 96px;
height: 40px;
top: 162px;
left: 75px;
}
#five .middle:after {    
content: '';        
top: 0;
left: 96px;
width: 80px;
height: 40px;        
}
#five .right {
left: 225px;
top: 162px;
height: 125px;        
width: 40px;
-moz-transform: skew(-5deg);
-webkit-transform: skew(-5deg);
-o-transform: skew(-5deg);
-ms-transform: skew(-5deg);	
transform: skew(-5deg);			
}
#five .bottom {	
width: 90px;
height: 40px;
top: 260px;
left: 87px;
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
-o-transform: rotate(14deg);  
-ms-transform: rotate(14deg);		
transform: rotate(14deg);		
}
#five .bottom:after {
content: '';        
left: 73px;
top: -19px;
height: 40px;        
width: 94px;       
-webkit-transform: rotate(-28deg);
-moz-transform: rotate(-28deg);
-o-transform: rotate(-28deg);
-ms-transform: rotate(-28deg);	
transform: rotate(-28deg);		
}
#five .left-bottom {	
width: 40px;
height: 65px;
top: 222px;
left: 80px;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);    
-ms-transform: skew(5deg);	
transform: skew(5deg);
}
/**/   
#wrapper:before {
content: '';
display: block;
/*340 total width */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 345px solid #e34c26;
width: 280px;
}
#wrapper:after {
content: '';
display: block;
/*280 total width */        
border-left: 140px solid transparent;
border-right: 140px solid transparent;
border-top: 40px solid #e34c26;
width: 0;
margin-left: 30px;
}
/**/
.inner {
position: absolute;
top: 0;
-moz-transform: scale(0.85);
-webkit-transform: scale(0.85);
-o-transform: scale(0.85);
-ms-transform: scale(0.85);	
transform: scale(0.85);		
}
.inner:before {
content: '';
display: block;
/*340 total width */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 345px solid #f06529;
width: 280px;
}
.inner:after {
content: '';
display: block;
/*280 total width */        
border-left: 140px solid transparent;
border-right: 140px solid transparent;
border-top: 40px solid #f06529;
width: 0;
margin-left: 30px;
position: relative;
top: -1px; /* Fix spacing */
}
/**/
.inner.left {
width: 170px; /* half from the 340px total width */
overflow: hidden;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.inner.left:before {
border-top-color: #e34c26;
}
.inner.left:after {
border-top-color: #e34c26;
}
/**/
.inner.left.cover {
z-index: 10000;
opacity: 0.1;
}

HTML5-logo

Browser support

Latest versions of:

  • Mozilla
  • Chrome
  • Safari
  • Opera
  • IE9

view demo

 

Posted by: Dhiraj kumar

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLMobile Web TechnologyPhotoshopTutorials@font-face CSS,advance web technology,angle brackets,configurable settings,core code,CSS,CSS 3,CSS 4,CSS code,CSS framework,css namespaces,CSS properties,css rules,CSS trick,css3,css3 box shadow,CSS3 gradients,div class,div id,doctype html,elements,enterprise-it,free open source,gaming,graphical user interface,grid,grid system,html and xhtml,html basics,html markup,HTML structure,html tags,html5,interactive web applications,mobile,orange shield,page elements,paragraph text,plugin,programming,project workflow,science,software,software-development,style,technology,transparent background image,visual transition,world wide web consortiumAs you probably found out, some time ago, 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.