Múltiples bordes con CSS en tus Imágenes

En está entrada veremos como lograr en una imagen múltiples bordes, con border, propiedad padding, que le asignamos un background con un padding: de 5px, y cómo no, la propiedad outline: que es similar al border, pero se dibuja justo por el exterior del border: con el mismo tamaño en píxeles, y por último el box-shadow: propiedad CSS3, solamente. Si aplicas este truco en tu página web o blog, debes saber, que no se visualizará correctamente los múltiples bordes en navegadores antiguos, sólo en navegadores modernos, como Chrome, Opera, Firefox, según...
Estos bordes con css, lo puedes añadir en cualquier otro elemento que desees aplicarlo, pero en este caso te enseño exclusivamente en imágenes, a continuación verás unas demostraciones y su respectivo código. Atención: los colores que se muestran en el código es un modelo de color HSL (Hue, Saturation, Lightness) y para lograr los siguientes colores, he usado está herramienta que se denomina hslpicker. Puedes cambiar el grado de porcentaje del color, cuanto mayor porcentaje más transparente será o más claro y viceversa. Ahora vemos las demos...
ñ  áá  

Ejemplo 1

Ejemplo 2

Ejemplo 3

Ahora vemos el código CSS de los múltiples bordes

.bordes {
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);
    
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 y infinidad de bordes!!! (CSS3 solamente) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
    
        
    /* Si añades pseudo elementos
   usted puede obtener más... */
    
    /* Además, HSL es impresionante, pero no lo use si
   necesita el navegador antiguo */
}

Y cada vez que quieras usar los múltiples bordes aplicas esto...

<div class="bordes">
<img border="0" src="Aquí_la_dirección_URL_De_La_Imagen" /></div>

Get free premium widgets for your blog and website.