Sigueme por RSS! RSS

Algunos efectos con CSS3


Texto con sombra:
#texto_sombreado {
   color: #c1930b;
   font-size:20pt;
   text-shadow: 4px 4px 1px #010101;
}

Texto con sombra, propiedad text-shadow


Bordes redondeados:
#bordes_redondeados {  
   border:solid 3px #c1930b;
   color: #000;  
   line-height: 20px;  
   width: 50%;
   margin: 0 auto;  
   padding: 10px;
   text-align:center;
   -webkit-border-radius: 20px;  
   -moz-border-radius: 20px; 
}

Elemento con bordes redondeados

#bordes_redondeados {  
   border:inset 7px #c1930b;
   -moz-border-radius-topleft: 75px;
   -moz-border-radius-topright:42px;
   -moz-border-radius-bottomleft:0px;
   -moz-border-radius-bottomright:75px;
   -webkit-border-top-left-radius:75px;
   -webkit-border-top-right-radius:42px;
   -webkit-border-bottom-left-radius:0px;
   -webkit-border-bottom-right-radius:75px;
   border-top-left-radius:75px;
   border-top-right-radius:42px;
   border-bottom-left-radius:0px;
   border-bottom-right-radius:75px; 
   padding: 10px;
   text-align:center;
}

Otro elemento con bordes redondeados


Elementos con sombras:

#elemento_con_sombra_dentro { 
   border:solid 1px #c1930b;
   padding: 10px;
   text-align:center;
   width: 50%;
   margin: 0 auto;
   -moz-box-shadow:inset 5px 3px 7px #000000;
   -webkit-box-shadow:inset 5px 3px 7px #000000;
   box-shadow:inset 5px 3px 7px #000000;
}

Elemento con sombra dentro, "inset"

#elemento_con_sombra_fuera { 
   border:solid 1px #c1930b;
   padding: 10px;
   text-align:center;
   width: 50%;
   margin: 0 auto;
   -moz-box-shadow: 5px 3px 7px #000000;
   -webkit-box-shadow: 5px 3px 7px #000000;
   box-shadow: 5px 3px 7px #000000;
}

Elemento con sombra fuera



Gradient:
#Gradient { 
   width: 50%;
   height:80px;
   margin: 0 auto;
   background:-moz-linear-gradient(22% 89% 87deg, #002BFF, #49FF5A 92%)
}


Puedes encontrar más sobre el tema en css3files.

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.