CSS3 Desinging : Cricket Player

INDIA

The above Picture was completely developed using pure CSS3 features and much more when we can combine such designs with animations of CSS3 the scope is beyond we can imagine. The development of the image above developed is pointing to the scope of CSS in future web design trends.

---

Code of the Snippet

Paste this inside header part or your CSS style sheet

<style type="text/css">
/*******************************/
div#cap1{
position:absolute;
left:50px;
top:10px;
width:50px;
height:40px;



border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-right-radius:0%;
border-bottom-left-radius:2%;
background-color:#6666FF;
border:2px solid #000000;
border-right-width:0px;
}

div#cap2{
position:absolute;
left:80px;
top:30px;
width:60px;
height:20px;
border-top-left-radius:0%;
border-top-right-radius:50%;
border-bottom-right-radius:50%;
border-bottom-left-radius:2%;
background-color:#6666FF;
border:2px solid #000000;
}

div#face_item{
position:absolute;
left:50px;
top:30px;
height:50px;
width:48px;
background-color:#FDF5E6;
border-top-left-radius:5%;
border-top-right-radius:0%;
border-bottom-right-radius:50%;
border-bottom-left-radius:50%;
border:1px solid #000000;
}

div#body1{
position:absolute;
left:25px;
top:70px;
height:120px;
width:100px;
background-color:#6666FF;
border-top-left-radius:30%;
border-top-right-radius:30%;
border-bottom-right-radius:10%;
border-bottom-left-radius:10%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;
}

div#hand1{
position:absolute;
left:65px;
top:105px;
height:65px;
width:30px;
background-color:#6666FF;
border-top-left-radius:30%;
border-top-right-radius:30%;
border-bottom-right-radius:30%;
border-bottom-left-radius:30%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;

-ms-transform: rotate(150deg); /* IE 9 */
-webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
transform: rotate(150deg);
}
div#hand2{
position:absolute;
left:105px;
top:140px;
height:75px;
width:30px;
background-color:#6666FF;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-right-radius:30%;
border-bottom-left-radius:30%;
border:2px solid #000000;
border-bottom-width:0px;

-ms-transform: rotate(120deg); /* IE 9 */
-webkit-transform: rotate(120deg); /* Chrome, Safari, Opera */
transform: rotate(120deg);
}



div#hand3{
position:absolute;
left:15px;
top:90px;
height:85px;
width:30px;
background-color:#6666FF;
border-top-left-radius:30%;
border-top-right-radius:30%;
border-bottom-right-radius:45%;
border-bottom-left-radius:45%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;

-ms-transform: rotate(150deg); /* IE 9 */
-webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
transform: rotate(150deg);
}
div#hand4{
position:absolute;
left:60px;
top:125px;
height:105px;
width:30px;
background-color:#6666FF;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-right-radius:30%;
border-bottom-left-radius:30%;
border:2px solid #000000;
border-bottom-width:0px;

-ms-transform: rotate(120deg); /* IE 9 */
-webkit-transform: rotate(120deg); /* Chrome, Safari, Opera */
transform: rotate(120deg);
}

div#leg1{
position:absolute;
left:25px;
top:200px;
height:170px;
width:40px;
background-color:#6666FF;
border-top-left-radius:5%;
border-top-right-radius:5%;
border-bottom-right-radius:25%;
border-bottom-left-radius:25%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;
}


div#leg2{
position:absolute;
left:-10px;
top:185px;
height:185px;
width:40px;
background-color:#6666FF;
border-top-left-radius:5%;
border-top-right-radius:5%;
border-bottom-right-radius:25%;
border-bottom-left-radius:25%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;
}



div#shoe2{
position:absolute;
left:-10px;
top:365px;
height:25px;
width:60px;
background-color:#FFFFFF;
border-top-left-radius:5%;
border-top-right-radius:50%;
border-bottom-right-radius:15%;
border-bottom-left-radius:15%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;
}



div#shoe1{
position:absolute;
left:30px;
top:365px;
height:25px;
width:60px;
background-color:#FFFFFF;
border-top-left-radius:5%;
border-top-right-radius:50%;
border-bottom-right-radius:15%;
border-bottom-left-radius:15%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;
}

div#bat_handle{
position:absolute;
left:115px;
top:140px;
height:90px;
width:10px;
background-color:#FAEBD7;
border-top-left-radius:10%;
border-top-right-radius:10%;
border-bottom-right-radius:10%;
border-bottom-left-radius:10%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;
-ms-transform: rotate(35deg); /* IE 9 */
-webkit-transform: rotate(35deg); /* Chrome, Safari, Opera */
transform: rotate(35deg);

}

div#bat_body{
position:absolute;
left:160px;
top:35px;
height:130px;
width:35px;
background-color:#FAEBD7;
border-top-left-radius:20%;
border-top-right-radius:20%;
border-bottom-right-radius:4%;
border-bottom-left-radius:4%;
border:1px solid #000000;
box-shadow: 0px 0px 3px 1px #010101;
-ms-transform: rotate(35deg); /* IE 9 */
-webkit-transform: rotate(35deg); /* Chrome, Safari, Opera */
transform: rotate(35deg);

}



div#part1{
position:absolute;
top:0px;
-ms-transform: rotate(15deg); /* IE 9 */
-webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
transform: rotate(15deg);
}
h4#india{
position:absolute;
left:30px;
top:85px;
font-size:110%;
color:#ffffff;
}
div#margin{
margin-bottom:450px;
margin-top:150px;
}
/************************************/
</style>

Paste the below code in the page where you want to create item

<div id="margin">
<div id="part2">
<div id="hand1">
</div>
<div id="hand2">
</div>
</div>
<div id="part4">
<div id="leg1">
</div>
<div id="shoe1">
</div>
<div id="leg2">
</div>
<div id="shoe2">
</div>
</div>
<div id="part1">
<div id="body1">
<h4 id="india">
INDIA</h4>
</div>
<div id="face">
<div id="face_item">
</div>
<div id="cap2">
</div>
<div id="cap1">
</div>
</div>
</div>
<div id="bat">
<div id="bat_handle">
</div>
<div id="bat_body">
</div>
</div>
<div id="part3">
<div id="hand3">
</div>
<div id="hand4">
</div>
</div>
</div>