Logo CSS3

[Master_raven]

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:

body{
            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);                        
        }
 

Código HTML:

<div id="logo_container">
        <div class="pes_l"></div>
        <div class="pes_2"></div>
        <div class="ojo1"><div class="pupila_1"></div></div>
        <div class="ojo2"><div class="pupila_2"></div></div>
        <div class="pico_l"></div>
        <div class="pico_2"></div>
</div>
 

algo que no logre y me gustaria seria arquear las sejas jajaja...

Salu2.

[Master_raven]

Algunos box-shadow por ahí y se mejora un montón jajajaja

[pitufoweb]

Te quedo muy bien


Ahora ando un poco ocupado, pero tratare de agregarle algunas cosillas.









Saludos