Ver Mensaje Individual
  #2 (permalink)  
Antiguo 14/02/2014, 11:01
Avatar de jonni09lo
jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 13 años, 2 meses
Puntos: 397
Respuesta: ¿Cómo hacer una sombra curva?

El ejemplo que muestras son imagenes, pero lo puedes hacer con CSS de esta manera:

Código CSS:
Ver original
  1. div {
  2.     width:300px;
  3.     height:300px;
  4.     background:#FFF;
  5.     position: relative;
  6. }
  7. div:before, div:after
  8. {
  9.   z-index: -1;
  10.   position: absolute;
  11.   content: "";
  12.   bottom: 30px;
  13.   left: 10px;
  14.   width: 50%;
  15.   top: 80%;
  16.   max-width:300px;
  17.   background: #777;
  18.   -webkit-box-shadow: 0 35px 20px #777;
  19.   -moz-box-shadow: 0 35px 20px #777;
  20.   box-shadow: 0 35px 20px #777;
  21.   -webkit-transform: rotate(-8deg);
  22.   -moz-transform: rotate(-8deg);
  23.   -o-transform: rotate(-8deg);
  24.   -ms-transform: rotate(-8deg);
  25.   transform: rotate(-8deg);
  26. }
  27. div:after
  28. {
  29.   -webkit-transform: rotate(8deg);
  30.   -moz-transform: rotate(8deg);
  31.   -o-transform: rotate(8deg);
  32.   -ms-transform: rotate(8deg);
  33.   transform: rotate(8deg);
  34.   right: 10px;
  35.   left: auto;
  36. }

Código HTML:
Ver original
  1. <div></div>

DEMO

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.