Sombras con CSS3

Sombras con CSS3

Fecha: 12-Mar-2012 | Autor: .
Guardado en: Diseño Web, HTML y CSS

Hoy veremos como darle sombras a textos o elementos html, sin necesidad de utilizar imágenes, directo desde el CSS. Por supuesto esto sólo será soportado en navegadores compatibles con CSS3, que hoy en día son casi todas las versiones más recientes de los distintos navegadores…

Bueno, para manejar sombras desde CSS, tenemos 2 propiedades: text-shadow y box-shadow y ambas dos funcionan de la siguiente manera:

box-shadow:Xpx Ypx Zpx color;

Donde, Xpx es la distancia en el eje X (horizontal), Ypx es la distancia en el eje Y (vertical); o sea, lo alejada que está la sombra. Luego Zpx es la distancia del difuminado y por último color, es el color en #HEX o rgb() que queremos darle a la sombra ;)

Con text-shadow es igual, por ejemplo:

text-shadow:3px 3px 4px #CCC;

Lo cuál generará algo como lo siguiente:

 


¿Por qué este anuncio?

Probando el text-shadow!!!

(si no ves el ejemplo, porque tu navegador no lo soporta, mira aquí el JPG)

 

Gracias a un apunte de @Kseso, vale aclarar que a los parámetros detallados arriba, que son los mínimos para que el efecto funcione, se le agregan otros dos: distancia de propagación e inset/outset (para definir si la sombra es interior o exterior), pueden ver un post que aclara todo esto aquí: Box-shadow Css: La sombra a fondo.


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

13 comentarios, participa!

  1. Alberto

    03. Abr, 2012

    Muy bueno, aunque claro que tampoco hay que exagerar con ese efecto (según mi punto de vista ^^) aunque depende también de a qué se le va a aplicar :P
    Un truco bonito que se puede hacer también con esto es dejar el primer valor de pixeles en 0 y se obtiene como un efecto de relieve en el texto, y queda mejor si se lo combina con un buen color de fondo :)
    Seguro lo saben varios pero bueno para el que no, ahí está xD

    Saludos Marcelo :)

  2. Jorge

    07. Nov, 2012

    Muy itneresante artículo, estas herramientas css son muy útiles, personalmente me parecen muy interesantes lo degradados

  3. Ariel

    09. Dic, 2012

    es algo que esta bueno tener en claro para cualquier implementacion en algun diseño de páginas web, gracias por esta informacion.

  4. me encanta jugar con las sombras en css3, es lo más.
    Saludos y muy buen blog

  5. Gracias excelente articulo de diseño web, buen aporte. Mucho mas cuando la tecnologia avanza y es indispensable comenzar a dominar CSS3 y HTML5.

    Saludos a toda la comunida de diseño paginas web y diseñadores creativos en el blog.

  6. kvmarketing diseño web

    15. Sep, 2013

    Muy practico, adhiero al comentario de alberto, muchas gracias

  7. Cristopher - Paginas Web

    30. Ene, 2014

    Buen tema es de mucha utilidad dar un efecto de sombra alas fotos o recuadro querer destacar o si no simplemente por crear un diseño mas elaborado, saludos.

  8. Webs Olivier

    26. Feb, 2014

    Muy interesante y fácil de realizar!

  9. Ana

    26. Mar, 2014

    Buen aporte, siempre es divertido utilizar sombras en el diseño web.

    Un saludo.

  10. Cynthia Molina

    12. Jun, 2014

    Normalmente lo tenía que hacer con una imagen, muy buen aporte, pero va perfecto para optimizar el peso de una página web

  11. Gracias por el aporte, no me acordaba de como se hacía y lo estaba buscando para añadirlo en un texto de una de las páginas web que estoy diseñando.

  12. Dygicom

    19. Ene, 2015

    Interesante artículo, estas herramientas css son muy útiles, en algunas componentes va bien aplicar los degradados.

  13. Flavio Joomla - Master

    03. Feb, 2015

    Concreto, directo y efectivo. Buena explicación, gracias.

Deja tu opinión