En el
CSS3 hay dos propiedades que generan sombras: text-shadow y box-shadow. Practicamente el mismo perro con distinto collar. Analicemos primero el texto sombreado ( text-shadow ).
text-shadow: desplazamiento horizontal desplazamiento vertical desenfoque color;
Desplazamiento horizontal (h-shadow)
En el siguiente ejemplo la sombra tiene un desplazamiento vertical muy pequeño. De esta manera, el desplazamiento horizontal ( positivo: 10px; negativo: -10px ) es muy evidente.
#text1{text-align:center;text-shadow:10px 1px 1px #ccc; line-height:1.5em;}
#text1 .negativo{text-shadow:-10px 1px 1px #ccc;}
positivo
negativo
Para el desplazamiento vertical podemos utilizar tanto valores positivos como negativos.
Los valores positivos desplazarán la sombra hacia la derecha, mientras que los valores negativos desplazaran la sombra hacia la izquierda.
Los valores positivos desplazarán la sombra hacia la derecha, mientras que los valores negativos desplazaran la sombra hacia la izquierda.
Desplazamiento vertical (h-shadow)
En el siguiente ejemplo la sombra tiene un desplazamiento horizontal muy pequeño. De esta manera, el desplazamiento vertical ( positivo: 10px; negativo: -10px ) es muy evidente.
#text2{text-align:center;text-shadow:1px 10px 1px #f00; line-height:2em;}
#text2 .negativo{text-shadow:1px -10px 1px #f00;}
positivo
negativo
Para el desplazamiento horizontal podemos utilizar tanto valores positivos como negativos.
Los valores positivos desplazarán la sombra hacia abajo, mientras que los valores negativos desplazaran la sombra hacia arriba.
Los valores positivos desplazarán la sombra hacia abajo, mientras que los valores negativos desplazaran la sombra hacia arriba.
Desenfoque (blur)
Probemos ahorra el desenfoque ( 5px )... que hace exactamente esto: difumina la sombra. Esta vez la sombra está desplazada tanto horizontalmente como verticalmente 10px.
#text3{text-align:center;text-shadow:10px 10px 5px #f00;}text
Color
En lo que concierne el color, podemos utilizar colores hex, rgb, hsl o los nombres de los colores en ingles.
Es interesante saber que también podemos poner el color delante.
Es interesante saber que también podemos poner el color delante.
#text4{text-align:center;text-shadow: rgb(255,0,0) 10px 10px 5px;}text
Dos o más sombras ¡Ooh La La!
Y si queremos, podemos, aunque no se si debemos ( es cuestión de gustos ) aplicar varias sombras - debidamente separadas por una coma ( , ).
#text5{text-align:center;text-shadow: #f00 10px 10px 5px , -10px -10px 5px #00f;}text
Vea un ejemplo de texto tridimensional
aplicando varias sombras con
aplicando varias sombras con text-shadow. Utilice "Ver código fuente" del menú de su navegador para encontrar y estudiar el código.
0 Comentarios