Inicio CSS estilos Creacion de sombras curvas con CSS

Creacion de sombras curvas con CSS

Jueves, 05-11-2015 14:11 - Leer comentarios - Comentar

Usaré dos divs para los dos casos. En el primero, usaré el id "div_uno" y en el segundo el id "div_dos". Para ambos divs, el css es:
Texto plano
#div_uno,
#div_dos{
	background:#E5DD97;
	height: 200px;
	margin:60px auto;
	position: relative;
	width: 400px;
}
Antes de seguir debemos tener en cuenta dos cosas:

Le asignamos position:relative al div para poder posicionar absolutamente las sombras.
Las sombras se crearán con los seudo elementos before y after.
Texto plano
#div_uno:after{
    content:"";
    box-shadow: 0 5px 5px 2px #000;
    border-radius: 50%;
    bottom: 5px;
    height: 5px;
    left: 50%;
    margin-left: -190px;
    position: absolute;
    width: 380px;
    z-index: -1;
 }
Lo explico:

He añadido el seudo elemento after con el que crearé la sombra.
Le he asignado un content vacío para que tenga dimensiones (sino, no se vería).
Le he dado un valor de sombra.
Le ha asignado radio de borde de 50% (esto genera el efecto de curva).
Le he asignado una altura y anchura para poder controlar el tamaño de la curva.
Lo he centrado verticalmente con left y margin-left.
Con position:absolute lo he puesto detrás del div (z-index:-1) y con bottom:5px he conseguido que asome apenas un poco por debajo del div.

Este efecto es muy atractivo visualmente y conseguirlo no es nada complicado (aunque hay que estar calculando valores para que encaje y en responsive design se vuelve un dolor de cabeza).

Otro tipo

Texto plano
#div_dos:before{
  bottom: 10px;
  box-shadow: 0 5px 5px 3px #000;
  content:"";
  left: 6px;
  position: absolute;
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  -o-transform: rotate(-1deg);
  transform: rotate(-1deg);
  width: 300px;
  z-index: -1;
}
#div_dos:after{
   bottom: 10px;
   box-shadow: 0 5px 5px 3px #000;
   content:"";
   right: 6px;
   position: absolute;
   -webkit-transform: rotate(1deg);
   -moz-transform: rotate(1deg);
   -ms-transform: rotate(1deg);
   -o-transform: rotate(1deg);
   transform: rotate(1deg);
   width: 300px;
   z-index: -1;
 }
Lo explico:

Nuevamente añado un content vacío para que se muestre el seudo elemento.
Aplico una sombra
En este caso, el ancho del seudo elemento es más de la mitad del elemento principal. Por ejemplo, el div tiene 400 de ancho y le ha dado a :before 300. Si le das la mitad o menos de ancho el efecto se verá bastante raro.
Posiciono el elemento ya no centrado, sino 6 pixeles a la izquierda.
Inclino el elemento con transform:rotate(-1deg) Además añado los prefijos propietarios por si acaso.
Llevo la sombra detrás del div con z-index:-1

Tags

crear, sombras, curvas, css

Comentarios

No se permiten comentarios en este momento.