2012 London Olympics Logo with CSS3

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

    

    

    

    

    


london
TM
                

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;
}
         

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;}         
         

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