CSS

Sombras en CSS

Anteriormente hemos visto cómo redondear los bordes de las etiquetas en HTML, en este tutorial aprenderemos a crear sombras en CSS. Para realizar esta tarea vamos a utilizar la propiedad box-shadow de CSS3.

¿Cómo crear sombras en CSS?

Hacer esto es muy sencillo, en el siguiente código podemos ver como aplicar una breve sombra a un cuadrado rojo:

<!DOCTYPE html>
<html>
  <head>
    <title>Bordes redondeados en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
	  #cuadrado{
	    background:red;
		width: 200px;
		height: 200px;
	  }
	  
	  .sombra{
	    box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.75);
	  }
    </style>
  </head>
  <body>
    <div id="cuadrado" class="sombra">
	
    </div>
  </body>
</html>

Si visualizamos nuestra página podemos ver nuestro cuadrado de la siguiente forma:

Sombras en CSS

Sombras en CSS

Ahora si queremos que nuestro CSS sea compatible con los navegadores Firefox y Chrome tenemos que agregar las siguientes propiedades a la clase sombra:

.sombra{
  box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.75);
  -webkit-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    5px 5px 5px 0px rgba(50, 50, 50, 0.75);
}

Tener que calcular la intensidad, ubicación y tamaño de la sombra puede ser bastante complicado y molesto, es por eso que existen varias herramientas online que nos permiten generar las sombras visualmente y nos entregan el código, en mi caso les recomiendo http://css3gen.com/box-shadow.

Bueno gente hemos llegado al final de este sencillo tutorial, espero que les sea de gran utilidad. Ante cualquier problema no duden en dejar un comentario.

Compartir esto:

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *