Foros del Web » Creando para Internet » CSS »

¿Cómo hacer una sombra curva?

Estas en el tema de ¿Cómo hacer una sombra curva? en el foro de CSS en Foros del Web. hola quiero hacer una caja o div que tenga una sombra curva en la parte inferior... aquí hay un ejemplo: http://milkandpixels.com/ si se fijan hay ...
  #1 (permalink)  
Antiguo 14/02/2014, 10:49
Avatar de eduardobrutaldeath  
Fecha de Ingreso: agosto-2013
Ubicación: América
Mensajes: 306
Antigüedad: 11 años, 3 meses
Puntos: 3
¿Cómo hacer una sombra curva?

hola
quiero hacer una caja o div que tenga una sombra curva en la parte inferior...
aquí hay un ejemplo:
http://milkandpixels.com/

si se fijan hay unas cajas que tienen en la parte de abajo una sombra curva, quisiera hacer eso... he estado intentando invertir el border-radius para luego darle sombra pero creo que no se puede, quizá ustedes sepan alguna otra manera...
  #2 (permalink)  
Antiguo 14/02/2014, 11:01
Avatar de 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.

Etiquetas: sombra
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:45.