JCDESIGNER
Diseño gráfico, web y multimedia
Parte de las innovaciones que trae CSS3 son los efectos de sombra, esto nos ahorrará mucho trabajo del que se hacía con photoshop al tener que estar cortando imágenes con el efecto de sombra ya aplicado, de ahora en adelante solo bastará con escribir unas lineas de css y ya podremos hacer el mismo efecto, pero al igual que muchas cosas nuevas que aparecen este solo es compatible con los últimos navegadores.
Las dos variantes de drop shadow son una dedicada a texto que es text-shadow, y para los divs y párrafos utilizaremos box-shadow, ambos con uso similar pero con sus diferencias.
Text-shadow
Esta propiedad de css3 es utilizada del la siguiente manera:
.texto-sombra{
font:bold 24px Arial, Helvetica, sans-serif;
color:#FF9900;
text-shadow: 2px 2px 2px #000;
}
Resultado del css
La propiedad text-shadow como su nombre lo dice solamente afecta al texto, no puede afectar a cajas o divs, los dos primeros atributos son para el deplazamiento vertical y horizontal, el tercero es el radio del desenfoque y el último el color de la sombra.
Ejemplo con texto seleccionable:
Text shadow
El siguiente es box-shadow que afecta a las cajas sea párrafos y divs:
Box-shadow
La utilizamos de la siguiente forma:
font:bold 36px Arial, Helvetica, sans-serif; color:#fff; background:#FF9900; padding:20px; width:250px; -moz-box-shadow: 3px 3px 3px #666; -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666;
Aplicandolo en directamente en el html editable el resultado sería el siguiente:
box shadow
La utilización al igual que en el en anterior, las dos variantes del principio son para desplazamiento vertical y horizontal, el tercero es para el radio de la sombra y el último es para el color de la sombra. La propiedad -moz es para Firefox, -webkit es para Safari y Chrome, y la final es para los navegadores que ya admiten la propiedad.
Este ejemplo también puede mezclarse con la otra propiedad nueva que es border-radius:
box shadow
