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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

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 *