Tema: Logo CSS3
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/01/2012, 10:04
Avatar de Master_raven
Master_raven
 
Fecha de Ingreso: junio-2008
Ubicación: Guatemala City, Guatemala, Guatemala
Mensajes: 95
Antigüedad: 16 años, 6 meses
Puntos: 3
Logo CSS3

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 original
  1. body{
  2.             width: 100%;
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.        
  7.         #logo_container{
  8.             width: 300px;
  9.             height: 200px;
  10.             margin: 0 auto;
  11.             position:absolute;
  12.             margin-top: 100px;
  13.         }
  14.  
  15.         #logo_container .pes_l {
  16.             background:#F90;
  17.             height:60px;
  18.             left:102px;
  19.             position:absolute;
  20.             top:-10px;
  21.             transform:rotate(315deg);
  22.             width:10px;
  23.  
  24.             -o-transform:rotate(315deg);
  25.             -moz-transform:rotate(315deg);
  26.             -ms-transform:rotate(315deg);
  27.             -webkit-transform:rotate(315deg);                      
  28.         }
  29.  
  30.         #logo_container .pes_2 {
  31.             background:#F90;
  32.             height:37px;
  33.             left:130px;
  34.             position:absolute;
  35.             top:10px;
  36.             transform:rotate(45deg);
  37.             width:10px;
  38.  
  39.             -o-transform:rotate(45deg);
  40.             -moz-transform:rotate(45deg);
  41.             -ms-transform:rotate(45deg);
  42.             -webkit-transform:rotate(45deg);                       
  43.         }
  44.                
  45.         #logo_container .ojo1 {
  46.             background:#ffffff;
  47.             border-radius:50px;
  48.             border:#F90 10px solid;
  49.             height:80px;
  50.             left:20px;
  51.             position:absolute;
  52.             top:20px;
  53.             width:80px;
  54.         }
  55.        
  56.         #logo_container .ojo2 {
  57.             background:#ffffff;
  58.             border-radius:35px;
  59.             border:#F90 10px solid;
  60.             height:50px;
  61.             left:110px;
  62.             position:absolute;
  63.             top:45px;
  64.             width:50px;
  65.         }
  66.        
  67.         #logo_container .pupila_1 {
  68.             background:#000000;
  69.             border-radius:15px;
  70.             height:30px;
  71.             left:30%;
  72.             margin:auto;
  73.             position:absolute;
  74.             top:50%;
  75.             width:30px;        
  76.         }
  77.  
  78.         #logo_container .pupila_2 {
  79.             background:#000000;
  80.             border-radius:10px;
  81.             height:20px;
  82.             left:30%;
  83.             margin:auto;
  84.             position:absolute;
  85.             top:50%;
  86.             width:20px;        
  87.         }
  88.        
  89.         #logo_container .pico_l {
  90.             background:#F90;
  91.             height:37px;
  92.             left:98px;
  93.             position:absolute;
  94.             top:100px;
  95.             transform:rotate(315deg);
  96.             width:10px;
  97.  
  98.             -o-transform:rotate(315deg);
  99.             -moz-transform:rotate(315deg);
  100.             -ms-transform:rotate(315deg);
  101.             -webkit-transform:rotate(315deg);                      
  102.         }
  103.  
  104.         #logo_container .pico_2 {
  105.             background:#F90;
  106.             height:37px;
  107.             left:118px;
  108.             position:absolute;
  109.             top:100px;
  110.             transform:rotate(45deg);
  111.             width:10px;
  112.  
  113.             -o-transform:rotate(45deg);
  114.             -moz-transform:rotate(45deg);
  115.             -ms-transform:rotate(45deg);
  116.             -webkit-transform:rotate(45deg);                       
  117.         }

Código HTML:
Ver original
  1. <div id="logo_container">
  2.         <div class="pes_l"></div>
  3.         <div class="pes_2"></div>
  4.         <div class="ojo1"><div class="pupila_1"></div></div>
  5.         <div class="ojo2"><div class="pupila_2"></div></div>
  6.         <div class="pico_l"></div>
  7.         <div class="pico_2"></div>
  8. </div>

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

Salu2.
__________________
<?APRENDIENDO