Foros del Web » Creando para Internet » CSS »

Efecto sombra con css? como mejorarlo

Estas en el tema de Efecto sombra con css? como mejorarlo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/03/2010, 11:21
Avatar de Copia  
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 8 años
Puntos: 4
Efecto sombra con css? como mejorarlo

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?
  #2 (permalink)  
Antiguo 02/03/2010, 13:22
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Efecto sombra con css? como mejorarlo

É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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2.     <head>
  3.         <meta name="generator" content="HTML Tidy, see www.w3.org">
  4.         <meta http-equiv="Content-type" content= "text/html; charset=utf-8">
  5.         <title>Sombra</title>
  6.         <style type="text/css">
  7.         <!-- * {
  8.            margin: 0;
  9.            padding: 0;
  10.        }
  11.        
  12.        li {
  13.            display: inline;
  14.            padding: 1em;
  15.        }
  16.        
  17.        a {
  18.            font-size: 2em;
  19.            color: #fff;
  20.        }
  21.        
  22.        #container {
  23.            width: 800px;
  24.            margin: 2em auto;
  25.        }
  26.        
  27.        #shadow {
  28.            display: block;
  29.            width: 600px;
  30.            height: 60px;
  31.            float: left;
  32.            position: relative;
  33.            background: url(picts/shadow.jpg) no-repeat bottom right;
  34.        }
  35.        
  36.        #nav {
  37.            width: 100%;
  38.            height: 100%;
  39.            position: absolute;
  40.            margin: -4px -4px 0;
  41.            background: darkred url(../picts/main-logo.gif) no-repeat bottom left;
  42.        }
  43.        -->
  44.         </style>
  45.     </head>
  46.     <body>
  47.         <div id="container">
  48.             <div id="shadow">
  49.                 <div id="nav">
  50.                     <ul>
  51.                         <li>
  52.                             <a href="#">item</a>
  53.                         </li>
  54.                         <li>
  55.                             <a href="#">item</a>
  56.                         </li>
  57.                         <li>
  58.                             <a href="#">item</a>
  59.                         </li>
  60.                         <li>
  61.                             <a href="#">item</a>
  62.                         </li>
  63.                     </ul>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.     </body>
  68. </html>

Si tienes dudas avisa, Salud!
  #3 (permalink)  
Antiguo 03/03/2010, 20:01
Avatar de Copia  
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 8 años
Puntos: 4
Respuesta: Efecto sombra con css? como mejorarlo

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?
  #4 (permalink)  
Antiguo 03/03/2010, 20:52
Avatar de Copia  
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 8 años
Puntos: 4
Respuesta: Efecto sombra con css? como mejorarlo

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.
__________________
Dejando una huella de mi existencia por la red en http://tiricaya.com
  #5 (permalink)  
Antiguo 04/03/2010, 11:41
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Efecto sombra con css? como mejorarlo

Sólo tenías que cambiar los valores del margen de 'nav' para cambiar la sombra de posición:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2.     <head>
  3.         <meta name="generator" content="HTML Tidy, see www.w3.org">
  4.         <meta http-equiv="Content-type" content= "text/html; charset=utf-8">
  5.         <title>Sombra</title>
  6.         <style type="text/css">
  7.         <!-- * {
  8.            margin: 0;
  9.            padding: 0;
  10.        }
  11.        
  12.        li {
  13.            display: inline;
  14.            padding: 1em;
  15.        }
  16.        
  17.        a {
  18.            font-size: 2em;
  19.            color: #000;
  20.        }
  21.        
  22.        #container {
  23.            width: 800px;
  24.            margin: 2em auto;
  25.        }
  26.        
  27.        #shadow {
  28.            display: block;
  29.            width: 600px;
  30.            height: 60px;
  31.            float: left;
  32.            position: relative;
  33.            background: #000;
  34.        }
  35.        
  36.        #nav {
  37.            width: 100%;
  38.            height: 100%;
  39.            position: absolute;
  40.            margin: -4px 4px 0;
  41.            background: #ccc;
  42.        }
  43.        -->
  44.         </style>
  45.     </head>
  46.     <body>
  47.         <div id="container">
  48.             <div id="shadow">
  49.                 <div id="nav">
  50.                     <ul>
  51.                         <li>
  52.                             <a href="#">item</a>
  53.                         </li>
  54.                         <li>
  55.                             <a href="#">item</a>
  56.                         </li>
  57.                         <li>
  58.                             <a href="#">item</a>
  59.                         </li>
  60.                         <li>
  61.                             <a href="#">item</a>
  62.                         </li>
  63.                     </ul>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.     </body>
  68. </html>

Salud!

Etiquetas: efecto, 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 01:38.