As 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!
Concept
Getting back to our work, I thought about the ingredients I’d need for this angular orange shield:
- CSS borders shapes
:beforeand:afterpseudo-elements- CSS3 properties that I used:
opacityandtransform - Geo font via Google font API
- Some empty divs to build the five number (later edit)
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:
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;
}
Browser support
Latest versions of:
- Mozilla
- Chrome
- Safari
- Opera
- IE9
Posted by: Dhiraj kumar
HTML5, CSS3, JQuery Tips & Tricks 
thanks for in the post .
This is pretty awesome! Would you mind if I modify it to create a logo for my portfolio website?