Sombras con CSS3 (Box-shadow)

box_shadow

[membership level="0"]

[/membership] Box-shadow CSS3

Box-shadow CSS3, las cajas de sombras son utilizadas para mejorar el aspecto de ciertos elementos dentro de una página web, en lo personal me gusta mucho utilizar esta propiedad en mis proyectos.

La implementacion de Box-shadow es muy fácil pero hay que entender sus propiedades para logar un mejor resultado.

Primordialmente tenemos que tener un elemento ya sea un div, aside, figure, article, imagen etc. Este elemento tiene que tener un ID o una clase CLASS para poder enlazar el estilo, veamos como seria esto.

<div id="caja"></div>

Una vez que tengas tu contenedor pasamos a la parte de los estilos CSS3 donde agregaremos el Box-shadow.

#caja{
   background: red; /*Color de fondo*/
   width: 200px; /*Ancho del div*/
   height: 100px; /*Alto del div*/
   box-shadow:10px 10px 20px #000000;
   -moz-box-shadow:10px 10px 20px #000000;
   -webkit-box-shadow:10px 10px 20px #000000;
}

Ya lo se, se estarán preguntando ¿No solo era Box-shadow?, ¿Que es todo eso que pusiste? , les explico cada parte, yo agregue background, width, height para darle color de fondo, ancho y alto así que podemos ignorar esa parte por el momento y centrarnos en Box-shadow.

Como lo habrán notado hay tres lineas muy similares que tienen en común la palabra box-shadow, en realidad eso es la misma propiedad solo que los agregamos para una mayor compatibilidad con los navegadores.

La mayoría de las actualizaciones de los navegadores ya permiten el uso correcto de CSS3, pero es recomendable adaptar el código para que funcione en la mayoría de los navegadores, podemos utilizar “-moz-box-shadow:” para Mozilla, “webkit-box-shadow:” para Google Chrome y Safari,”box-shadow” para Explorer y Opera, PUEDES UTILIZAR TODOS JUNTOS como en este ejemplo. 

Ya sabemos el porqué de estas tres lineas ahora veamos como colocar las sombras a nuestro gusto, si notamos en el código podemos ver esta parte “10px 10px 20px #000000;”, los primeros 10px es la distancia que colocamos la sobra hacia la derecha (Podemos colocar números negativos para mover la sombra a la izquierda), los segundos 10px representan la posición vertical de la sombra, de igual manera que los primeros podemos utilizar numero negativos, los últimos  20px es el desenfoque de la sombra y terminamos con #000000 que es el color negro en hexadecimal. 

Este seria el resultado final;

See the Pen Sombras con CSS3 (Box-shadow) by Angel Sanchez (@AzulWeb) on CodePen.


Pero esto no es todo, también podemos modificar el ancho de la sombra he incluso si queremos que sea sobra interna o externa. Para modificar el ancho necesitamos colocar otro numero de pixeles justo antes del código hexadecimal, algo así;

#caja{
   background: red; /*Color de fondo*/
   width: 200px; /*Ancho del div*/
   height: 100px; /*Alto del div*/
   box-shadow:10px 10px 20px 50px #000000;
   -moz-box-shadow:10px 10px 20px 50px #000000;
   -webkit-box-shadow:10px 10px 20px 50px #000000;
}

Para colocar la sombra interna solo basta con agregar “inset” al principio, algo así;

#caja{
   background: red; /*Color de fondo*/
   width: 200px; /*Ancho del div*/
   height: 100px; /*Alto del div*/
   box-shadow:inset 10px 10px 20px 50px #000000;
   -moz-box-shadow:inset 10px 10px 20px 50px #000000;
   -webkit-box-shadow:inset 10px 10px 20px 50px #000000;
}

Este es el resultado de los tres ejemplos;

See the Pen Box-shadow, sobre interna y externa by Angel Sanchez (@AzulWeb) on CodePen.

Para el mejor entendimiento y claro también para ahorrarnos tiempo y utilizarlo como herramienta de trabajo he creado un Generador de sombras CSS3 (Box-shadow) de código libre que puede utilizar para sus proyectos.


Generador de sombras CSS3 (Box-shadow)

Espero que toda esta informacion les sea útil, no olviden que si tienen alguna duda pueden preguntarme con toda confianza, YO RESPONDO TODOS LOS COMENTARIOS.   

Descargar este artículo en PDF

Lo sentimos, esta opción solo está disponible para los socios. Más información de nuestro grupo de socios.


Angel Sanchez on FacebookAngel Sanchez on GithubAngel Sanchez on GoogleAngel Sanchez on InstagramAngel Sanchez on LinkedinAngel Sanchez on Twitter
Angel Sanchez
CEO en Azul Web
Fundador de Azul Web amante de la tecnología, me gusta compartir mis conocimientos y apoyar a las demás personas que desean tener un mejor desarrollo profesional. Toda persona que tenga un sueño y este luchando por él tiene mi respeto y mi apoyo.

Déjanos un comentario: