Sombras con CSS 3(box-shadow)

Si ya vimos algo de Text-shadow con CSS ahora vamos a utilizar box-shadow con CSS 3 que es muy similar.

El atributo box-shadow requiere varios valores para especificar las características de la sombra, como difuminado, separación de la sombra y la propia caja o color. La sintaxis es como esta:

[box-shadow: 5px -9px 3px #000;]

Por orden de aparición, los valores que se indican en box-shadow son:

Desplazamiento horizontal de la sombra: La sombra de un elemento suele estar un poco desplazada con respecto al elemento que la produce y su posición será en función del ángulo con el que llegue la luz. En el caso de este ejemplo el primero de los valores, 5px, quiere decir que la sombra aparecerá 5 píxeles a la derecha. Si la sombra quisiéramos que apareciera un poco hacia la izquierda del elemento original que la produce, pondríamos un valor negativo a este atributo. Cuanto más desplazamiento tenga una sombra, el elemento que la produce parecerá que está más separado del lienzo de la página.

Desplazamiento vertical de la sombra: El segundo valor que colocamos en el atributo box-shadow es el desplazamiento vertical de la sombra con respecto a la posición del elemento que la produce. Este valor es similar al desplazamiento horizontal. Valores positivos indican que la sombra aparecerá hacia abajo del elemento y valores negativos harán que la sombra aparezca desplazada un poco hacia arriba. En el caso del anterior ejemplo, con -9px estamos indicando que la sombra aparecerá desplazada 9 píxeles hacia arriba del elemento.

Difuminado: El tercer valor indica cuánto queremos que esté difuminado el borde de la sombra. Si el difuminado fuera cero, querría decir que la sombra no tiene ningún difuminado y aparece totalmente definida. Si el valor es mayor que cero, como en nuestro ejemplo 3px, quiere decir que la sombra tendrá un difuminado de esa anchura, 3 píxeles en el ejemplo.

Color de la sombra: El último atributo que se indica en el atributo box-shadow es el color de la sombra. Generalmente las sombras en el mundo real tienen un color negro o grisaceo, pero con CSS3 podremos indicar cualquier gama de color para hacer la sombra, lo que nos dará bastante más versatilidad a los diseños gracias a la posible utilización de sombras en distintos colores, que puedan combinar mejor con nuestra paleta. En el ejemplo anterior habíamos indicado una sombra con color negro.

Ejemplos

Ahora veamos varios ejemplos de sombras creadas directamente con CSS 3 y el atributo box-shadow.

[ #capasombra{ background-color: #47b013; width: 300px; padding: 10px; color: #fff; box-shadow: 5px 5px 0 #333; -webkit-box-shadow: 5px 5px 0 #333; -moz-box-shadow: 5px 5px 0 #333; }]

Se visualizará de la siguiente manera:
Ejemplo de capa con sombra creada con CSS 3.

[#sombraredondeada{ background-color: #47b013; color: #fff; width: 400px; padding: 10px; -moz-border-radius: 7px; -webkit-border-radius: 7px; box-shadow: 15px -10px 3px #000; -webkit-box-shadow: 15px -10px 3px #000; -moz-box-shadow: 15px -10px 3px #000; }]

Se visualizará de la siguiente manera:

Este ejemplo tiene las esquinas redondeadas y la sombra se adapta a la forma de la capa, por lo que tendrá esquinas redondeadas.

Ten en cuenta que debes probar estos ejemplos con Opera, Firefox, Safari o Chrome, que son los que actualmente soportan este atributo.

¿Qué te pareció?

Loading...
Nombre

Adblock Adobe Flash AJAX Algoritmos Anuncios API Blogger Blogging Buscadores chrome web store Código Fuente CSS CSS 3 CV Dart Depurar Desarrollo Web Diseño Diseño Grafico Diseño Web Documentación Efectos Facebook Firefox Foros Fotografias Frances Bean Cobain Gadgets General Geolocalizar Google Google Analytics Google Chrome Google Imágenes Google Music Google Reader Google+ Herramientas Hotmail HTML HTML5 Imágenes Información Informática Instagram Internet Internet Explorer Internet Explorer 10 Javascript jQuery Kurt Cobain Librerías Marketing Microsoft Monetización Web Mozilla Firefox 8 MySQL Navegadores Noticias Optimización Web PageSpeed Insights PayPal Personal Photoshop PHP Plantillas Programación Programas Programas Web Proyectos Redes Sociales ScreensHots Scripts Seguridad SEO Servicios Web Sesiones Snippets SoniTube Spam Steve Jobs Templates Themes Thumbalizr Tips Trucos Tutoriales Twitter Utilidades Vectores Virus Web Widgets Windows 7 Windows 8 Windows Mobile Windows XP WordPress XSS Youtube
false
ltr
item
OnSoni: Sombras con CSS 3(box-shadow)
Sombras con CSS 3(box-shadow)
OnSoni
http://www.onsoni.com/2012/03/sombras-con-css-3box-shadow.html
http://www.onsoni.com/
http://www.onsoni.com/
http://www.onsoni.com/2012/03/sombras-con-css-3box-shadow.html
true
8818836675902573334
UTF-8
Not found any posts Not found any related posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU Etiqueta ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Contents Ver también Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copiar todo el codigo Seleccionar todo el Código Todo el código se ha copiado en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy