Dos tipos de sombras en el mismo div

Lokitozzz · #1 (**permalink**) 25/09/2012, 17:03

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 originaldiv.topbar {
    height: 30px;
    width: 100%;
    position: fixed;
    background: rgba(63, 63, 63, 0.82);
    z-index: 9000;
    top: 0;
    left: 0;
    border-bottom: 1px solid #464646;
    -webkit-box-shadow: inset 2px 3px 6px #3D3232;
    -moz-box-shadow: inset 2px 3px 6px #3D3232;
    box-shadow: inset 2px 3px 6px #3D3232;
 
    -webkit-box-shadow: 0 3px 8px black;
    -moz-box-shadow: 0 3px 8px black;
    box-shadow: 0 3px 8px black;
}

Como lo tengo que hacer?

Gracias de antemano.

emprear · #2 (**permalink**) 25/09/2012, 18:00

vas a tener que recurrir a dos capas

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
div.uno
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px red;
}
div.dos
{
width:100%;
height:100%;
background-color:transparent;
box-shadow: 5px 5px 5px red inset;
}
</style>
</head>
<body>
 
<div class="uno">
<div class="dos">
</div>
</div>
 
</body>
</html>

o quizás lo puedas solucionar con un borde

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
div.topbar {
    height: 100px;
    width: 100px;
    background: rgba(63, 63, 63, 0.82);
    border-left: inset 5px black;
    border-top: inset 5px black;
box-shadow:10px 10px black; 
 
 
/*]]>*/
</style>
 
</head>
<body>
 
<div class="topbar">
xxx
</div>
</body>
</html>

Saludos

Lokitozzz · #3 (**permalink**) 25/09/2012, 18:47

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

Como lo puedo hacer en ese caso?

emprear · #4 (**permalink**) 25/09/2012, 18:57

no se puede,solo con la primera. Por eso te puse las dos
Saludos

C2am · #5 (**permalink**) 25/09/2012, 23:40

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 originaldiv.topbar {
   
    box-shadow: inset 2px 3px 6px #3D3232, 0 3px 8px black;
}

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