Efecto sombra con css? como mejorarlo

Copia · #1 (**permalink**) 02/03/2010, 11:21

Hola amigos estoy haciendo un menu horizontal con sombra, inclinada a la izquierda inferior.

Tengo el siguiente codigo:

Código:

#nav {
	background: url(../images/menu_h.png) repeat-x;
	border:1px solid #7a6552;
	padding: .5em 2px;
	margin:0;
	padding:0;
	height:44px;
	/*margin: 10px 0px 5px 0px;*/
}

.blur{
	background: transparent url(../images/shadow1.png);
/*path to the 80%-transparent 1x1pixel black-colored background image*/
	padding: 0px;
}

.shadow{
	background: transparent url(../images/shadow2.png);
/*path to the 60%-transparent 1x1pixel black-colored background image*/
	color: inherit;
}

.shadow, #nav{
	position: relative;
	bottom: 2px;
	left: 2px;
}

y este es el orden html

Código:

 <div class="blur">
					<div class="shadow">
                    	     <div id="nav">
                             </div>                       
                    </div>
                </div>

y este es mi resultado:

la sombra esta inclinada a la izquierda pero aun esta por sobre toda la barra, y solo debe aparacer en la parte inferior izquierda.
pense que usando z-index en #nav podria hacer que sobresalga y no me salio.
Alguna sugerencia?

AlbertoGarcia · #2 (**permalink**) 02/03/2010, 13:22

Éste sería un método algo menos complicado, es casi igual que el método Gilder/Levin de sustitución de imágenes pero usando los márgenes del div que queda debajo para meter la imagen con la sombra. Para la imagen de la sombra (shadow.jpg) he creado un archivo con una sombra inferior y derecha de 4px de ancho.

Si pones un borde a cada uno de los divs 'nav' y 'shadow' verás como queda uno debajo de otro con el mismo tamaño pero desplazado el de debajo. (#nav, #shadow {border: dotted 1px #000;})

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-type" content= "text/html; charset=utf-8">
        <title>Sombra</title>
        <style type="text/css">
        <!-- * {
            margin: 0;
            padding: 0;
        }
        
        li {
            display: inline;
            padding: 1em;
        }
        
        a {
            font-size: 2em;
            color: #fff;
        }
        
        #container {
            width: 800px;
            margin: 2em auto;
        }
        
        #shadow {
            display: block;
            width: 600px;
            height: 60px;
            float: left;
            position: relative;
            background: url(picts/shadow.jpg) no-repeat bottom right;
        }
        
        #nav {
            width: 100%;
            height: 100%;
            position: absolute;
            margin: -4px -4px 0;
            background: darkred url(../picts/main-logo.gif) no-repeat bottom left;
        }
        -->
        </style>
    </head>
    <body>
        <div id="container">
            <div id="shadow">
                <div id="nav">
                    <ul>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Si tienes dudas avisa, Salud!

Copia · #3 (**permalink**) 03/03/2010, 20:01

hola, amigo lo que aparece con esto es una pequeña sombra en la parte inferior derecha y un logo.

ahora supongo que es para hacer todo una barra, y con eso tendria un efecto sombra pero solo inferior, ¿como lo aria para que vaya a la izquierda?

Copia · #4 (**permalink**) 03/03/2010, 20:52

disculpen el doble post pero acabo de encontrar una solucion a este problema y esta tal cual lo queria.

Gracias amigo me base en tu codigo, la verdad no hay mucho cambio.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-type" content= "text/html; charset=utf-8">
        <title>Sombra</title>
        <style type="text/css">
        <!-- * {
            margin: 0;
            padding: 0;
        }
        
        li {
            display: inline;
            padding: 1em;
        }
        
        a {
            font-size: 2em;
            color: #fff;
        }
        
        #container {
            width: 800px;
            margin: 2em auto;
        }
        
        #shadow {
            display: block;
            width: 600px;
            height: 60px;
            float: left;
            position: relative;
			margin: -1px 1px 0;
            background: #666 ;
        }
        
        #nav {
            width: 100%;
            height: 100%;
            position: absolute;
            margin: -1px 1px 0;
            background: darkred  no-repeat bottom left;
        }
		
		.presombra{
			display: block;
            width: 600px;
            height: 60px;
            float: left;
            position: relative;
            background: #CCC;
		}
        -->
        </style>
    </head>
    <body>
        <div id="container">
           <div class="presombra">
            <div id="shadow">
                <div id="nav">
                    <ul>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                    </ul>
                </div>
            </div>
          </div>
        </div>
    </body>
</html>

Saludos y gracias.

AlbertoGarcia · #5 (**permalink**) 04/03/2010, 11:41

Sólo tenías que cambiar los valores del margen de 'nav' para cambiar la sombra de posición:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-type" content= "text/html; charset=utf-8">
        <title>Sombra</title>
        <style type="text/css">
        <!-- * {
            margin: 0;
            padding: 0;
        }
        
        li {
            display: inline;
            padding: 1em;
        }
        
        a {
            font-size: 2em;
            color: #000;
        }
        
        #container {
            width: 800px;
            margin: 2em auto;
        }
        
        #shadow {
            display: block;
            width: 600px;
            height: 60px;
            float: left;
            position: relative;
            background: #000;
        }
        
        #nav {
            width: 100%;
            height: 100%;
            position: absolute;
            margin: -4px 4px 0;
            background: #ccc;
        }
        -->
        </style>
    </head>
    <body>
        <div id="container">
            <div id="shadow">
                <div id="nav">
                    <ul>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                        <li>
                            <a href="#">item</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Salud!