Marcos para imágenes (3): border-image – Shipping – Colleges

Esta es una de las formas más cómodas y sencillas que existen para crear bordes artísticos para las imágenes de una web. Hablamos de la propiedadborder-image, que como es fácil deducir por su nombre, genera bordes con soporte gráfico.

El único problema es el ya habitual de compatibilidad CSS3 con los distintos navegadores y que hace que tengamos que añadir varias líneas con distintos prefijos para conseguir la máxima visibilidad. Explorer no lo soporta ni siquiera en su versión 9.

Esta propiedad debe ir siempre precedida al menos de unborder-width que fije el ancho que va a tener el borde y es conveniente que sea unborder con todos sus valores de ancho, forma y color para el caso de navegadores no compatibles. De esta manera al menos saldrá siempre un borde corriente si ese es nuestro deseo.

El ancho, como es habitual, puede ser definido individualmente determinando distintos valores para las diferentes áreas conborder-width-top,border-width-right, etc.

Hoy no vamos a entrar en profundidad en todas las posibilidades deborder-image, así que para lo que queremos basta con saber que la expresión mínima sería esta:

border-image: url(direccion_imagen)recorte_imagen(px);

Con todo esto ya podemos hacer nuestro primer borde gráfico añadiendo esto a nuestra hoja de estilo:

.borderimg1 img {
border: 60px solid black;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGtUwiRJ0seyYpHfiSfWKh7MUFgC6svQTl5b795f7VrFysvyDjdU-5cLJxDqnntbVpv2IGuk7S4KaqlrCtYIuL5y8oKsDRu7agqU_lLrjylXZ_lfee5J3BWk-jl77l82EWfMSm80tygH/s1600/marco300.gif) 36;
}

Para aplicar estos bordes hay que meter la imagen dentro de una capa con la nueva clase que hemos creado, así que para los que no lo tengan claro aquí va la parte HTML y a continuación lo que se vería.

div class="separatorborderimg1" style="clear: both; text-align: center;"
a href="http://2.bp.blogspot.com/NPd4P/s1600/lont3vr4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"img border="0" src="http://2.bp.blogspot.com/NPd4P/s500/lont3vr4.jpg" width="500" //a/div

Cómo en Blogger tenemos el conocidoseparator de serie, aproveché para insertar ahí la nueva clase y no tener que crear una capa adicional. Y sí, también podemos aplicar las propiedades que vimos al principio directamente a la claseseparator y ahorrarnos ir metiendo a mano una nueva clase imagen por imagen. Eso sí, el estilo se aplicará a todas en ese caso.

Si usamos el código mínimo para mostrar una imagen lo anterior quedaría así:

div class="borderimg1"
img src="http://2.bp.blogspot.com/NPd4P/s500/lont3vr4.jpg"/
/div

Y ahora veamos lo que hemos hecho para poder aplicarlo de forma genérica.

En primer lugar se ha definido un borde normal de 60px sólido de color negro. Eso será lo que se vea cuando el navegador no soporteborder-image. Cuando lo haga, simplemente interpretará el primer valor, el que se refiere al ancho del marco, 60px en todas direcciones en el ejemplo.

En la propiedadborder-image es dónde se ha indicado la dirección de la imagen de fondo, el recorte de la parte periférica de dicha imagen (nótese que se escribe sin la abreviatura px) y el modo de redimensión.

La imagen utilizada para el fondo es esta de la izquierda, que aquí se muestra reducida de tamaño pero que podéis ver a tamaño original pinchando en ella

El recorte se refiere a la parte de la imagen que usaremos como borde. En esta se han tomado 36px porque esa es la medida que hay desde los bordes hasta la recta interior que delimitará la imagen principal (ver esquema a la derecha). En los cuatro lados es la misma y lo más fácil es usar imágenes con esta característica.

Reitero que en esta propiedad, el número de píxeles se expresa sólo con un número, sin añadirpx.

Comparando la imagen de fondo original y el resultado que anteriormente vimos, se puede comprobar cómo los lados izquierdo y derecho se han acortado automáticamente lo necesario para que el marco no supere el alto de la imagen enmarcada.

Con los extremos inferior y superior ha ocurrido al contrario, alargándose hasta ocupar toda la longitud de la imagen principal. Ambas redimensiones las ha provocado un tercer valor que no hemos incluido pero que por defecto hace esto. El valor en cuestión esstretch(elasticidad).

Como las imágenes de fondo se redimensionarán lo que sea necesario, resulta importante que estas tengan un tamaño suficientemente grande (sin pasarse) porque como podéis comprobar en este ejemplo, al ampliarse se puede perder bastante definición.

Conveniente pero no imprescindible, es que repitamos la línea delborder-image con los distintos prefijos de los diferentes navegadores para aumentar la compatibilidad. Ya, es una tarea tediosa pero si queremos que más gente pueda ver el efecto, no hay más remedio mientras muchos sigan sin actualizar sus navegadores.

.borderimg1 img {
border: 60px solid black;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGtUwiRJ0seyYpHfiSfWKh7MUFgC6svQTl5b795f7VrFysvyDjdU-5cLJxDqnntbVpv2IGuk7S4KaqlrCtYIuL5y8oKsDRu7agqU_lLrjylXZ_lfee5J3BWk-jl77l82EWfMSm80tygH/s1600/marco300.gif) 36;
-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGtUwiRJ0seyYpHfiSfWKh7MUFgC6svQTl5b795f7VrFysvyDjdU-5cLJxDqnntbVpv2IGuk7S4KaqlrCtYIuL5y8oKsDRu7agqU_lLrjylXZ_lfee5J3BWk-jl77l82EWfMSm80tygH/s1600/marco300.gif) 36;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGtUwiRJ0seyYpHfiSfWKh7MUFgC6svQTl5b795f7VrFysvyDjdU-5cLJxDqnntbVpv2IGuk7S4KaqlrCtYIuL5y8oKsDRu7agqU_lLrjylXZ_lfee5J3BWk-jl77l82EWfMSm80tygH/s1600/marco300.gif) 36;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzGtUwiRJ0seyYpHfiSfWKh7MUFgC6svQTl5b795f7VrFysvyDjdU-5cLJxDqnntbVpv2IGuk7S4KaqlrCtYIuL5y8oKsDRu7agqU_lLrjylXZ_lfee5J3BWk-jl77l82EWfMSm80tygH/s1600/marco300.gif) 36;
}

.borderimg3 img {border-width: 82px;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsB6d7mzLjKviNeJCGSLfbsyBmWLtzAF0tg3rwlIcA4IHEDM86Tx7fNrxGJhuCIq4cTl1FW9bysXskSQ8yNKZk87vb0_hML7TOo0hGjOLaA7k6x4yuPGrm1j7o9fN7DC9DezrpCrFLxR3y/s1600/sun.gif) 82;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsB6d7mzLjKviNeJCGSLfbsyBmWLtzAF0tg3rwlIcA4IHEDM86Tx7fNrxGJhuCIq4cTl1FW9bysXskSQ8yNKZk87vb0_hML7TOo0hGjOLaA7k6x4yuPGrm1j7o9fN7DC9DezrpCrFLxR3y/s1600/sun.gif) 82;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsB6d7mzLjKviNeJCGSLfbsyBmWLtzAF0tg3rwlIcA4IHEDM86Tx7fNrxGJhuCIq4cTl1FW9bysXskSQ8yNKZk87vb0_hML7TOo0hGjOLaA7k6x4yuPGrm1j7o9fN7DC9DezrpCrFLxR3y/s1600/sun.gif) 82;}

.borderimg2 img {border-width: 78px;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQA7IM0MhJZcvcK5zqAMn_2CsUt70BneuOUe6f-0jZWzBIm5aKxsC2hQPmzwTBgsg6zfHJpS_ciU_R24pDOAjKJo5WUPhGUxJ27E-mY11_CXoUekKxCyMRPfN-7wB7zOkqZqiDZg7VzZJP/s1600/marco.png) 78;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQA7IM0MhJZcvcK5zqAMn_2CsUt70BneuOUe6f-0jZWzBIm5aKxsC2hQPmzwTBgsg6zfHJpS_ciU_R24pDOAjKJo5WUPhGUxJ27E-mY11_CXoUekKxCyMRPfN-7wB7zOkqZqiDZg7VzZJP/s1600/marco.png) 78;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQA7IM0MhJZcvcK5zqAMn_2CsUt70BneuOUe6f-0jZWzBIm5aKxsC2hQPmzwTBgsg6zfHJpS_ciU_R24pDOAjKJo5WUPhGUxJ27E-mY11_CXoUekKxCyMRPfN-7wB7zOkqZqiDZg7VzZJP/s1600/marco.png) 78;}

.borderimg4 img {border-width: 96px;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77fxhUrqI52oHcJ3CgWz-CVEuV7Tz_w1wFNVU-hQO9G1Umn7lENzNXzO0Z_M-5iikPwFvWUfDaHF4wsoiif-hObJzTYaiXmMx_Ct072Mo2wB6YVmN3jhoGF8skopST_nX1XEt9CxGYNQ/s1600/ramas.jpg) 96;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77fxhUrqI52oHcJ3CgWz-CVEuV7Tz_w1wFNVU-hQO9G1Umn7lENzNXzO0Z_M-5iikPwFvWUfDaHF4wsoiif-hObJzTYaiXmMx_Ct072Mo2wB6YVmN3jhoGF8skopST_nX1XEt9CxGYNQ/s1600/ramas.jpg) 96;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77fxhUrqI52oHcJ3CgWz-CVEuV7Tz_w1wFNVU-hQO9G1Umn7lENzNXzO0Z_M-5iikPwFvWUfDaHF4wsoiif-hObJzTYaiXmMx_Ct072Mo2wB6YVmN3jhoGF8skopST_nX1XEt9CxGYNQ/s1600/ramas.jpg) 96;}