Efectos de sombras con CSS sin usar imágenes

808

Los efectos de sombras en el diseño web son un recurso muy utilizado y que últimamente se puso de moda ya que los usan en box, sliders, barras de navegación y más.

Generalmente estos efectos de sobra son creados previamente en Photoshop y luego exportados para ser usados en la web. Estas imágenes no son muy pesadas pero hay formas de optimizarlas aun más. Para poder hacer esto, les traigo un tutorial que vi en el sitio nicolasgallagher.com que nos muestra cómo crear efectos de sombras con CSS.

sombras-en-div-css

Los códigos a utilizar son muy sencillos, basta con agregar a nuestro css el siguiente código:

 
.drop-shadow {
   position:relative;
   width:90%;
}
 
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
}

Y luego llamar este estilo desde nuestro HTML

 
<div class="drop-shadow">
        <p>Texto de la caja</p>
</div>

A continuación les dejo el link para que veas todos los estilos de los efectos de sombras que ves en la imagen de arriba y también el link para ver un demo en funcionamiento.

Ver demo | Ver codigos

Dejar respuesta