Sombras con css3

#fondo{
width:450px;
}
#sombras2 {
color:blue;
text-shadow: 0 4px 0 #ccc,
0 5px 0 #c9c9c9,
0 6px 0 #bbb,
0 7px 0 #b9b9b9,
0 10px 0 #aaa,
0 20px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 5px 3px rgba(0,0,0,.3),
0 6px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
-moz-text-shadow: 0 4px 0 #ccc,
0 5px 0 #c9c9c9,
0 6px 0 #bbb,
0 7px 0 #b9b9b9,
0 10px 0 #aaa,
0 20px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 5px 3px rgba(0,0,0,.3),
0 6px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
-ms-text-shadow: 0 4px 0 #ccc,
0 5px 0 #c9c9c9,
0 6px 0 #bbb,
0 7px 0 #b9b9b9,
0 10px 0 #aaa,
0 20px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 5px 3px rgba(0,0,0,.3),
0 6px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
-o-text-shadow: 0 4px 0 #ccc,
0 5px 0 #c9c9c9,
0 6px 0 #bbb,
0 7px 0 #b9b9b9,
0 10px 0 #aaa,
0 20px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 5px 3px rgba(0,0,0,.3),
0 6px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
-webkit-text-shadow: 0 4px 0 #ccc,
0 5px 0 #c9c9c9,
0 6px 0 #bbb,
0 7px 0 #b9b9b9,
0 10px 0 #aaa,
0 20px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 5px 3px rgba(0,0,0,.3),
0 6px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

#sombra{
color:#999;
text-shadow:5px 0px 10px #f90; /* horla */
-moz-shadow:5px 0px 10px #f90;
-ms-shadow:5px 0px 10px #f90;
-o-shadow:5px 0px 10px #f90F;
-webkit-shadow:5px 0px 10px #f90;
}
#div-consombras{
padding:10px;
width:150px;
border-radius:5px;
text-align:center;
border:solid 1px #DEDEDE;
box-shadow:0 0 10px #F90;
-moz-box-shadow:0 0 10px #F90;
-ms-box-shadow:0 0 10px #F90;
-o-box-shadow:0 0 10px #F90;
-webkit-box-shadow:0 0 10px #F90;
}
#codigo{
background:#999;
color:#fff;
border-radius:5px;
border:solid 1px #DEDEDE;
padding:10px;
}

Sombras con css3

Hola amigos, en esta nueva entrada vamos a ver cómo crear sombras con css3 que aunque ya hemos utilizados algun tipo de sombras en tutoriales anteriores como Menú dinamico con CSS3 y HTML5, Menú con HTML5 y CSS3 y en algunos otros más creados con css3 para darle un aspecto más dinamico a nuestros div, y si mal no recuerdo tambien hicimos unos textos y le aplicamos sombras con css3.

Para las sombras con css3 tenemos que detenernos un poco sombre las nuevas propiedades y una infinidad de efectos que podemos hacer con esta nueva actualización de css3.

Es cierto que las sombras en versiones anteriores a css3 no se podían hacer a menos que no fuera con imágenes y haciendo alguna que otra artimaña para lograr este efecto o implementarlo en nuestra página web.

Sombras con CSS3 algunas propiedades

Ahora CSS3 nos la pone fácil jejeje porque digo esto porque con la propiedad shadow podemos crear sombras tanto en las cajas como en los textos del contenido de nuestros sitios web.

Text-shadow:

Box-shadow:

El único problema de estas propiedades es que los motores de búsqueda como IE no la soportan hasta su versión 10.0 y los navegadores como firefox,Chrome,Opera, Safari ya la integran pero con algunos requisitos y estos requisitos son poner un atributo antes de la línea de código.

Crear sombras con css3 para los principales navegadores

Ejemplo:

Si estamos trabajando con CSS3 y queremos que nuestro codigo sea compatibles con los principales navegadores tenemos que seguir las siguientes reglas.

-moz- /* firefox para su versión 5 en adelante */
-ms- /* para IE en su versión 9 en adelante */
-o- /* opera */

-webkit- /* tanto para chrome como para safari */

Con esto claro entonces podemos empezar a programar código css3 para cualquiera de estos navegadores. Entonces volviendo al tema de sombras con css3 lo que tenemos que hacer es colocar estos atributos delante de la propiedad text-shadow y la propiedad box-shadow bueno veamos un ejemplo.

-moz-text-shadow:

-ms-text-shadow:
-o-text-shadow:

-webkit-text-shadow:

Si te fijas de esta forma tenemos que hacer un codigo mas largo pero con esto nos estamos asegurando que se puedan ver igual en cualquiera de estos navegadores. Asi mismo se utiliza con el box-shadow.

-moz-box-shadow:

-ms-box-shadow:
-o-box-shadow:
-webkit-box-shadow:

Con esto solo estamos seguro que las sombras que queremos se va a ver bien en estos navegadores así como las sombras en las cajas o div.

Que podemos hacer con sombras con css3

Bueno la verdad que podemos hacer muchas cosas, ahora si podemos decir adios flash para nuestro sitios web porque ya podemos obtener los efectos deseados con css3.

Ahora vamos a crear un ejemplo con un texto, veamos el texto siguiente y luego analiza el código.

Nuestro primer texto con sombras en css3

SOMBRAS CON CSS3

El codigo que produce este texto es el siguiente.

h1{
color:#999;
text-shadow:5px 0px 10px #f90;
-moz-shadow:5px 0px 10px #f90;
-ms-shadow:5px 0px 10px #f90;
-o-shadow:5px 0px 10px #f90F;
-webkit-shadow:5px 0px 10px #f90;
}

Si te fijas es lo que explicamos anterior mente solo que aquí hemos creado un <h1> y con css3 le hemos aplicado los atributos text-shadow para darle sombra a nuestro texto.

De esta misma forma podemos crear textos 3D abandonando la vieja costumbre de flash o con las imágenes veamos el mismo ejemplo del texto anterior que hicimos con sombras pero ahora en 3D.

Texto 3D utilizando sombras en css3

SOMBRAS CON CSS3

El codigo es el siguiente.

h1 {
color:blue;
text-shadow: 0 4px 0 #ccc,
0 5px 0 #c9c9c9,
0 6px 0 #bbb,
0 7px 0 #b9b9b9,
0 10px 0 #aaa,
0 20px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 5px 3px rgba(0,0,0,.3),
0 6px 5px rgba(0,0,0,.2),
0 7px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

Analiza el código cambia los colores las propiedades y manipúlalo a tu antojo que así es que se aprende.

Así también se hace con los div solo se le aplica un box-shadow: con sus propiedades correspondiente y tenemos una caja de texto con sombras como aparece más abajo.

sombras con css3

El código css3 para ese div es el siguiente.

#div-consombras{
padding:10px;
width:150px;
border-radius:5px;
text-align:center;
border:solid 1px #DEDEDE;
box-shadow:0 0 10px #F90;
-moz-box-shadow:0 0 10px #F90;
-ms-box-shadow:0 0 10px #F90;
-o-box-shadow:0 0 10px #F90;
-webkit-box-shadow:0 0 10px #F90;
}

Y el codigo HTML para los 3 casos antes mensionados es el siguiente.

<h1 id=”sombra”>
SOMBRAS CON CSS3
</h1>
<h1 >
SOMBRAS CON CSS3
</h1>
<div id=”div-consombras”>
<b>sombras con css3</b>
</div>

Bueno hasta aquí llegamos con este pequeño tutorial sombre como crear sombras con css3 esperamos y te pueda servir de ayuda y no olvides ayuda, comparte y aprende….

Hasta la próxima entrada .. XD

Deja un comentario

Tu dirección de correo electrónico no será publicada.