Doble línea sólida en el exterior de las imágenes

Por Toni | Comentarios ( 0 ) | Trackbacks ( 0 )

En CSSGLOBE encuentro un tutorial donde nos muestra cómo crear bordes sólidos en el exterior de imágenes y el código del estilo para poder aplicarlo.

Para que veas de que hablamos dale un vistazo a algunas de las demos. La imagen que aparece a continuación nos ayudará a explicar el invento:

La situación es la siguiente: en la zona exterior de la imagen se ve una línea de 3px verde, y en zona interiores una de 1px de color amarillo claro. ¿Cómo lograr esto?

Lo que haremos aquí es utilizar la propiedad CSS “border” exterior de la imagen y luego nos encargamos dej falso interior utilizando combinación de las propiedades de fondo (background) y el relleno (padding).

Primero, añadiremos la propiedad “border” a la imagen y los valores establecidos

img{

 border:2px solid #72a143;

}

Luego añadimos el “padding” de 1px con un fondo amarillo,

img{

 border:2px solid #72a143;

 padding:1px;

 background:#ffeda5;

}

La imagen recibirá otr “border” en el interior de la real. Eso es todo.

Puedes dejar un comentario, o suscribirte al feed.