2012 London Olympics Logo with CSS3

In this tutorial we'll create the 2012 London Olympics Logos with CSS3, All the four different colour's (color's).
London Olympics Logo with CSS3

The Following example will only work with the following browsers only.In opera the rotation properties may not work.

We use this example to show you the power of CSS3, .i.e. using the different properties of CSS3 like border-radius, rotate etc different shape can be made easily with those shapes we can make super shapes that is logos or even characters, check our article on Dexter with CSS3.

In this project we have not made the shadow effects for the shapes, If any of you did that please make a post in our Discussion

In this article for showing example we have used JPEG images ,to see the CSS one Check the Demo.

The Mark UP


<div id="shape1"></div>
<div id="shape2"></div>
<div id="shape3"></div>
<div id="shape4"></div>
<div id="shape5"></div>
<div id="shape6"></div>
<div id="shape7"></div>
<div id="shape8"></div>
<div id="shape9"></div>
<div id="shape10"></div>
<div id="shape11"></div>
<div id="rings">
    <div class="ring r1"></div>
    <div class="ring r2"></div>
    <div class="ring r3"></div>
    <div class="ring r4"></div>
    <div class="ring r5"></div>
</div>
<div id="text"><p>london</p></div>
<div id="tm"><p>TM</p></div>
                

The CSS

Below is the code for the RED logo, remaning one can be found in the downloaded file.

The name of the Font used in the 2012 London Olympics Logo is "London Olympics 2012". It can be downloaded from Fonts2u.com or get a copy London Olympics 2012 font from our server. The Details Licence for font can be found in the Downloaded Demo or in the Font file.

The CSS for Logo


/*For Logo*/
#shape1 {
   height: 0; 
   width: 140px;
   border-top: 80px solid red;
   border-left: 15px solid transparent;
   border-right: 0px solid transparent;
/* position */      
  position:absolute;
  top:33px;
  left:45px;
/* Rotate */
 -moz-transform: rotate(20deg);
 -webkit-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 -o-transform: rotate(20deg);
 transform: rotate(20deg);
}
#shape2 {
   width: 120px; 
   height: 80px;
   background: red;
/* position */     
   position:absolute;
   top:120px;
   left:70px;
 /* Rotate */
	-moz-transform: rotate(-70deg);
	-webkit-transform: rotate(-70deg);
	-ms-transform: rotate(-70deg);
	-o-transform: rotate(-70deg);
	transform: rotate(-70deg);
}
#shape3{
   height: 0; 
   width: 130px;
   border-bottom: 80px solid red;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
/* position */  
  position:absolute;
  top:163px;
  left:50px;
 /* Rotate */
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);	  
}
#shape4{
  height: 0; 
   width: 175px;
   border-top: 90px solid red;
   border-left: 10px solid transparent;
   border-right: 15px solid transparent;
/* Positon */
  position:absolute;
  top:108px;
  left:188px;
 /* Rotate */
	-moz-transform: rotate(41deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);	  
}
#shape5{
  height: 0; 
   width: 150px;
   border-bottom: 90px solid red;
   border-left: 10px solid transparent;
   border-right: 25px solid transparent;
/* Positon */
  position:absolute;
  top:70px;
  left:283px;
 /* Rotate */
	-moz-transform: rotate(43deg);
	-webkit-transform: rotate(43deg);
	-ms-transform: rotate(43deg);
	-o-transform: rotate(43deg);
	transform: rotate(43deg);	  
}
#shape6{ 
	width: 0; 
	height: 0; 
	border: 80px solid transparent; 
	border-bottom: 50px solid red; 
/* position */  	
	position: absolute; 
	top: 164px; 
	left:83px;
} 
#shape6:after { 
	content: ''; 
	position:absolute; 
	left: -80px; 
	top: 50px; 
	width: 0; 
	height: 0; 
	border: 80px solid transparent; 
	border-top: 50px solid red;
}
#shape7{
   height: 0; 
   width: 140px;
   border-top: 80px solid red;
   border-left: 50px solid transparent;
   border-right: 0px solid transparent;
/*Positon */
	position:absolute;
	top:333px;
	left:86px;
/* Rotate */
	-webkit-transform: rotate(-70deg);
	-moz-transform: rotate(-70deg);
	-ms-transform: rotate(-70deg);
	-o-transform: rotate(-70deg);
	transform: rotate(-70deg);
}
#shape8{
	width: 60px; 
   height: 60px; 
   background: red;
/*Positon */
	position:absolute;
	top:245;
	left:315px;
/* Rotate */
	-webkit-transform: rotate(-85deg);
	-moz-transform: rotate(-85deg);
	-ms-transform: rotate(-85deg);
	-o-transform: rotate(-85deg);
	transform: rotate(-85deg);
/* Rotate Origin */
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
#shape9 {
   width: 120px; 
   height: 85px;
   background: red;
/*Positon */
	position:absolute;
	top:240;
	left:330px;
/*rotation */
	-webkit-transform: rotate(65deg);
	-moz-transform: rotate(65deg);
	-ms-transform: rotate(65deg);
	-o-transform: rotate(65deg);
	transform: rotate(65deg);
}
#shape10 {
   width: 150px; 
   height: 70px;
   background: red;
/*Positon */
   position:absolute;
   top:298;
   left:266px;
/*rotation */
    -webkit-transform: rotate(-25deg);
   -moz-transform: rotate(-25deg);
   -ms-transform: rotate(-25deg);
   -o-transform: rotate(-25deg);
   transform: rotate(-25deg);   
}
#shape11 {
   height: 0; 
   width: 100px;
   border-top: 80px solid red;
   border-left: 0px solid transparent;
   border-right: 40px solid transparent;
/* Positon */
	position:absolute;
	top:348;
	left:260px;
 /* Rotate */
	-moz-transform: rotate(63deg);
	-webkit-transform: rotate(63deg);
	-ms-transform: rotate(43deg);
	-o-transform: rotate(43deg);
	transform: rotate(43deg);	  
}
#text{
	position:absolute;
	top:145px;
	left:100px;
}
#tm{
	position:absolute;
	top:185px;
	left:420px;
}
#text p{
	font-family:"New Johnston";
	font-size:32px;
	color:#FFFFFF;
}
#tm p{
	font-family:"New Johnston";
	font-size:16px;
	color:#000000;
}
         
2012 London Olympics Logo

The Olympics 2012 logo with out Olympics Rings show above is a screen shot from the Olympics 2012 logo made with CSS

The Olympic Ring

CSS for the Olympic rings


/* Rings Container*/
#rings{
	position:absolute;
	left:240px;
	top:105px;
}
.ring{
   width: 40px;
   height: 40px;
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   border:4px solid #FFF;
   position:absolute;
}
/* Position for rings */
.r1{top:0;left:0;}
.r2{top:0;left:50px;}
.r3{top:0;left:100px;}
.r4{top:20;left:25px;}
.r5{top:20;left:75px;}         
         
Olympics Rings

The Olympics Rings show above is a screen shot from the Olympics Rings made with CSS

Previous:
Next:
Anush

Anush

Anush is a freelance web designer and developer with a passion for interaction design. He founded Tech Stream in mid 2011 to spread the art of web design and programing Skills.

  • Social Links:
comments powered by Disqus