Bueno después de estar jugando un ratito con CSS3 logre crear un pequeño dibujo (para no saber mucho de diseño creo que se me mira bien), lo coloco acá por si alguien le sirve y también por si alguien me ayuda a mejorar el código.
El resultado es este.
Código CSS:
Ver originalbody{
width: 100%;
margin: 0;
padding: 0;
}
#logo_container{
width: 300px;
height: 200px;
margin: 0 auto;
position:absolute;
margin-top: 100px;
}
#logo_container .pes_l {
background:#F90;
height:60px;
left:102px;
position:absolute;
top:-10px;
transform:rotate(315deg);
width:10px;
-o-transform:rotate(315deg);
-moz-transform:rotate(315deg);
-ms-transform:rotate(315deg);
-webkit-transform:rotate(315deg);
}
#logo_container .pes_2 {
background:#F90;
height:37px;
left:130px;
position:absolute;
top:10px;
transform:rotate(45deg);
width:10px;
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
#logo_container .ojo1 {
background:#ffffff;
border-radius:50px;
border:#F90 10px solid;
height:80px;
left:20px;
position:absolute;
top:20px;
width:80px;
}
#logo_container .ojo2 {
background:#ffffff;
border-radius:35px;
border:#F90 10px solid;
height:50px;
left:110px;
position:absolute;
top:45px;
width:50px;
}
#logo_container .pupila_1 {
background:#000000;
border-radius:15px;
height:30px;
left:30%;
margin:auto;
position:absolute;
top:50%;
width:30px;
}
#logo_container .pupila_2 {
background:#000000;
border-radius:10px;
height:20px;
left:30%;
margin:auto;
position:absolute;
top:50%;
width:20px;
}
#logo_container .pico_l {
background:#F90;
height:37px;
left:98px;
position:absolute;
top:100px;
transform:rotate(315deg);
width:10px;
-o-transform:rotate(315deg);
-moz-transform:rotate(315deg);
-ms-transform:rotate(315deg);
-webkit-transform:rotate(315deg);
}
#logo_container .pico_2 {
background:#F90;
height:37px;
left:118px;
position:absolute;
top:100px;
transform:rotate(45deg);
width:10px;
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
algo que no logre y me gustaria seria arquear las sejas jajaja...
Salu2.