Foros del Web » Creando para Internet » CSS »

Dos tipos de sombras en el mismo div

Estas en el tema de Dos tipos de sombras en el mismo div en el foro de CSS en Foros del Web. Buenas tengo el siguiente código css, & quiero que en un div se muestre una sombra interior & una sombra que va hacía afuera. Lo ...
  #1 (permalink)  
Antiguo 25/09/2012, 17:03
 
Fecha de Ingreso: junio-2009
Mensajes: 138
Antigüedad: 13 años, 1 mes
Puntos: 4
Dos tipos de sombras en el mismo div

Buenas tengo el siguiente código css, & quiero que en un div se muestre una sombra interior & una sombra que va hacía afuera.

Lo hice así..:

Código CSS:
Ver original
  1. div.topbar {
  2.     height: 30px;
  3.     width: 100%;
  4.     position: fixed;
  5.     background: rgba(63, 63, 63, 0.82);
  6.     z-index: 9000;
  7.     top: 0;
  8.     left: 0;
  9.     border-bottom: 1px solid #464646;
  10.     -webkit-box-shadow: inset 2px 3px 6px #3D3232;
  11.     -moz-box-shadow: inset 2px 3px 6px #3D3232;
  12.     box-shadow: inset 2px 3px 6px #3D3232;
  13.  
  14.     -webkit-box-shadow: 0 3px 8px black;
  15.     -moz-box-shadow: 0 3px 8px black;
  16.     box-shadow: 0 3px 8px black;
  17. }

Como lo tengo que hacer?

Gracias de antemano.
  #2 (permalink)  
Antiguo 25/09/2012, 18:00
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años, 1 mes
Puntos: 1567
Respuesta: Dos tipos de sombras en el mismo div

vas a tener que recurrir a dos capas

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <style type="text/css">
  3. div.uno
  4. {
  5. width:300px;
  6. height:100px;
  7. background-color:yellow;
  8. box-shadow: 10px 10px 5px red;
  9. }
  10. div.dos
  11. {
  12. width:100%;
  13. height:100%;
  14. background-color:transparent;
  15. box-shadow: 5px 5px 5px red inset;
  16. }
  17. </head>
  18.  
  19. <div class="uno">
  20. <div class="dos">
  21. </div>
  22. </div>
  23.  
  24. </body>
  25. </html>

o quizás lo puedas solucionar con un borde

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9.  
  10. div.topbar {
  11.    height: 100px;
  12.    width: 100px;
  13.    background: rgba(63, 63, 63, 0.82);
  14.    border-left: inset 5px black;
  15.    border-top: inset 5px black;
  16. box-shadow:10px 10px black;
  17.  
  18.  
  19. /*]]>*/
  20.  
  21. </head>
  22.  
  23. <div class="topbar">
  24. xxx
  25. </div>
  26. </body>
  27. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 25/09/2012, 18:47
 
Fecha de Ingreso: junio-2009
Mensajes: 138
Antigüedad: 13 años, 1 mes
Puntos: 4
Respuesta: Dos tipos de sombras en el mismo div

Me sirvió con la segunda opción, pero no queda difuminado..

Como lo puedo hacer en ese caso?
  #4 (permalink)  
Antiguo 25/09/2012, 18:57
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años, 1 mes
Puntos: 1567
Respuesta: Dos tipos de sombras en el mismo div

no se puede,solo con la primera. Por eso te puse las dos
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 25/09/2012, 23:40
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 13 años, 6 meses
Puntos: 306
Respuesta: Dos tipos de sombras en el mismo div

Para emplear dos tipos de sombras no debes volver a definirla como haces porque esto es estilo en cascada, es decir, la última regla es la que se aplica.
Para lograr lo que deseas debes separaras las sombras mediante una coma,

Código CSS:
Ver original
  1. div.topbar {
  2.    
  3.     box-shadow: inset 2px 3px 6px #3D3232, 0 3px 8px black;
  4. }

No te olvides de agregar los prefijos propietarios para cada navegador, aunque me parece que todos los navegadores modernos ya aceptan el box-shadow sin esos molestos prefijos.

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Saludos


PD: aquí un ejemplo con varias sombras



Edito, luego de varios días para poner un enlace al blog del amigo kseso que prueban el Poder de las Sombras
http://ksesocss.blogspot.com/2012/10...n-de-adan.html
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 06/10/2012 a las 16:17 Razón: El Poder de las Sombras

Etiquetas: sombras, tipo, fondo
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 10:05.