Efecto de sombra con CSS

Veremos varios métodos para realizar un efecto de sombreado utilizando hojas de estilo en cascada.

He encontrado 3 métodos distintos para hacer un efecto de sombra. Son los siguientes, que veremos comentados en este artículo:

 

Método background-color
Método canal alpha
Método estirar imagen
Método Background color

Este método es bastante simple. Se basa en definir tres cajas trasladadas, con diversos colores de fondo. Los elementos con las clases "blur" y "shadow" se definirán con tonos grisáceos para crear el efecto de sombreado.

Código HTML:

<div class="blur">
<div class="shadow">
<div class="content">bla bla</div>
</div>
</div>

Código CSS:

.blur{
background-color: #ccc; /*shadow color*/
color: inherit;
margin-left: 4px;
margin-top: 4px;
}

.shadow,
.content{
position: relative;
bottom: 2px;
right: 2px;
}

.shadow{
background-color: #666; /*shadow color*/
color: inherit;
}

.content{
background-color: #fff; /*background color of content*/
color: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}

La única desventaja de este método es que usa colores definidos para las sombras y ello puede dar lugar a que no se pueda mezclar este efecto con otros elementos. Con un fondo blanco, las sombras en grises quedan bien, pero pongamos el caso de que el fondo de la página fuera de color rojo. Entonces el efecto de sombreado debería realizarse con tonos rojos oscuros.

Podemos ver el ejemplo en funcionamiento en una página aparte.

Método canal alpha

Este método es muy parecido al anterior, pero soluciona el problema de mezclarse con otros elementos. Es indiferente cual sea el fondo de la página donde se va a mostrar el elemento sombreado, incluso si el sombreado se realiza en la misma página sobre distintos fondos. Utiliza imágenes de fondo en formato PNG "alpha transparentes", en lugar de colores definidos en la hoja de estilo.

El código HTML necesario es el mismo que para el ejemplo anterior, simplemente debes modificar el código CSS, en concreto para las clases "blur" y "shadow". Mostramos el código CSS para este ejemplo.

<style type=text/css>
.blur{
background: transparent url(shadow1.png);
/*ruta para el 80%-transparente 1x1 pixel coloreado de negro */
color: inherit;
margin-left: 4px;
margin-top: 4px;
}

.shadow{
background: transparent url(shadow2.png);
/*ruta para el 60%-transparent 1x1pixel coloreado de negro */
color: inherit;
}

.shadow,
.content{
position: relative;
bottom: 2px;
right: 2px;
}

.content{
background-color: #fff; /*background color of content*/
color: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}
</style>

Para probar la ventaja de este tipo de fondo, podemos cambiar el color de fondo de la página web y veremos como la sombra también cambia de color.

Las dos imágenes, de 1x1 pixel medio transparentes que se necesitan para componer este ejemplo están aquí:

Pulsar para descargar imagenes-transparentes.zip

Podemos ver el ejemplo en funcionamiento en una página aparte .

Usuarios que han visto este tema también han visto...

- Estilizando formularios
- Neutralizar los estilos CSS iniciales
- Estilos CSS distintos con PHP y cookies
- Primeros pasos con CSS
- Página HMTL centrada horizontal y verticalmente con CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento