Comunidad de diseño web y desarrollo en internet online

Aplicar sombra a una imagen dentro de una lista

Citar            
MensajeEscrito el 08 Mar 2007 09:26 am
Hola!

¿Se puede aplicar sombras a un imagen que está dentro de una lista y que tiene un enlace? Por lo que he investigado aplicarlo a un div no me da problemas, pero ¿se puede dar sombra a una imagen que está dentro de una lista?

Gracias

BOFH - tuve que quitar tu código, cuando hagas algo así, ponlo en las etiquetas CODE, no te cuesta más y es una gran ayuda para alguien que te quiere echar la mano.

Por moribe

15 de clabLevel



 

msie7
Citar            
MensajeEscrito el 10 Mar 2007 06:20 pm
Sí, pero explicate mejor con lo de "una imagen dentro de una lista"
Una idea, si usas links en esa lista, es hacer que los elementos 'a' se muestren como caja, y el background de esa caja sea tu imágen. Para aplicar la sombra, haces también que el elemento 'li' se muestre como una caja, con unos 5px más de ancho y alto (que será aproximadamente lo que mida tu sombra), en el background pones la imágen de la sombra, alineada a la derecha y abajo.
Saludos.

Código :

<ul>
   <li class="sombra"><a class="imagen" href="#"></a></li>
   <li class="sombra"><a class="imagen" href="#"></a></li>
   <li class="sombra"><a class="imagen" href="#"></a></li>
   <li class="sombra"><a class="imagen" href="#"></a></li>
</ul>

.imagen{
   display:block;
   width:80px;
   height:20px;
   position:relative;
   margin:auto 5px 5px auto;
   background:#EEE url(tu_imagen.png) no-repeat left top;
}
.sombra{
   display:block;
   width:85px;
   height:25px;
   background:#456 url(tu_sombra.png) no-repeat right bottom;
}

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.