Sombras avanzadas con CSS3

En esta ocasión vamos a ver algunas de las cosas que podemos hacer con CSS3 utilizando la propiedad box-shadow y transform, ya que usando y combinando estas características y con ayuda de los pseudo-elementos: after y: before podemos obtener buenos efectos de sombras a nuestros objetos en HTML, algo que antiguamente era complicado conseguir. En este tutorial veremos algunos ejemplos de sombras avanzadas.

(ver tutorial de sombras en CSS basico)

En este post solo vamos a ver 6, aunque podemos seguir intentando, probando y asi ampliar la galeria para reutilizar en algun proyecto.

Sombra simple

Sombra esquinas inferiores

Sombra inferior centrada

Sombra inferior con perspectiva

Sombras laterales interiores

Sombras esquinas levantadas

Podemos seguir creando los diferentes efectos de sombras, solo necesitaremos un poco de creatividad y claro, manejar un poco de CSS y conocer sus propiedades y saber lo que podemos llegar a hacer.

Y esto es todo amigos!! Nos vemos en otros tips.
——

—-

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo