Juan Manuel 16 de octubre de 2008 a las 10.50
   Imprimir artículo
elWebmaster.com

CSS para principiantes: imágenes con doble borde


Hay muchos efectos que podemos aplicar por medio de CSS a las imágenes de nuestro sitio, pero la mayoría no son compatibles con todos los navegadores. Sin embargo, a veces lo mejor suele ser lo más sencillo, y por medio de CSS liso y llano podemos lograr un buen diseño que sea multiplataforma.

Por ejemplo, podemos agregar un borde de un color a una imagen, ponerle otro color de fondo y por medio del padding generaremos el efecto de “borde doble”. Luego, para una mejor experiencia de usuario, podemos usar este efecto sólo en hover, de manera que al pasar el mouse por encima se resalte la imagen.

Aquí les dejo el código:

img.double-border { border:1px solid #ccc; padding:2px; background:#eee; }

¡Espero que les sea de utilidad!

Fuente: David Walsh Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. claro claro dice:

    Grande la aportación, me ha inspirado mogollón para un diseño que no tenía muy claro. Muxas gracias =)

  2. Daniel P Z dice:

    Gracias man, el codigo de dobl borde me sirvio mucho,,

    me suscribiré a la web

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder