Saltar la navegación

Sombras

Ya hemos mencionado que pueden crearse con CSS 3, pero conozcamos otra solución:

HTML

<div class="caja">
    <div class="sombra">
        <div class="contenido">...</div>
    </div>
</div>

CSS

.caja{
    background: #ccc;
    margin-left: 4px;
    margin-top: 4px;
}

.sombra, .contenido{
    position: relative;
    bottom: 2px;
    right: 2px;
}

.sombra{
    background: #666;
    color: inherit;
}

.contenido {
    background: #fff;
    border: 1px solid #000;
    padding: 5px;
}

También podríamos jugar con imágenes de fondo...

Hoy en día se suele usar CSS3 para conseguir estos efectos. El código anterior nos sirve, entre otras cosas, para ver que a menudo hay diferentes maneras de conseguir lo que buscamos.