Blog
Blog sobre programación y diseño en la web
Utilizando CSS3 hoy (4): border-image
Translate this page into EnglishVamos a ver hoy otra posibilidad que nos ofrece CSS3 y que soportan ya Safari 3.1+, FireFox 3.5+ y Chrome 1.0+: La de utilizar imágenes en los bordes de elementos de nuestra web en lugar del borde normal, utilizando la porción de la imagen que indiquemos y estirándola también lo que indiquemos en la instrucción de CSS3.
La sintaxis a utilizar es un poco compleja, pero con los ejemplos creo que se entenderá mucho mejor (eso espero…).
La propiedad es border-image, aunque para utilizarla hoy hay que anteponer los prefijos que hemos visto para otras instrucciones de CSS3: -webkit para Safari y Chrome y -moz para Firefox:
1 2 | -webkit-border-image: url(imagen) %arriba %derecha %abajo %izquierda stretch stretch; -moz-border-image: url(imagen) %arriba %derecha %abajo %izquierda stretch stretch; |
En donde pone imagen habrá que poner la ruta hasta la imagen que vayamos a utilizar en el borde. Luego hay que indicar el tamaño que se va a utilizar de cada esquina de la imagen para cada esquina del nuevo borde de nuestro elemento (en el orden de las agujas del reloj, es decir arriba, derecha, abajo e izquierda. Se pueden expresar en porcentajes o sin ninguna unidad de medida para expresar píxeles exactos, es decir por ejemplo 10 10 10 10). La última parte, donde poner stretch, determina cómo se van a escalar y cortar los bordes de los lados y superior e inferior de nuestro elemento. Hay tres posibles valores:
- stretch (estirar)
- repeat (repetir)
- round (redondear)
Si especificamos sólo un valor es como poner dos veces el mismo (por ejemplo sólo una vez stretch. Entonces será stretch tanto para los lados superior e inferior como para los lados izquierda y derecha). El valor por defecto es “stretch”.
Vamos a ver algunos ejemplos para ver cómo funciona:
Supongamos que vamos a utilizar esta imagen para crear los bordes. Es un gif de 50px por 50px que lo he llamado borde1.gif:

Ahora supongamos que tenemos un elemento DIV de 300px de ancho y 100px de alto para el que queremos poner de borde la imagen anterior. Si hacemos:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html>
<head>
<title>border-image</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
padding: 10px; /* pongo un padding para despegar el texto de los bordes*/
border-width: 10px;
-webkit-border-image: url(borde1.gif) 25% stretch stretch;
-moz-border-image: url(borde1.gif) 25% stretch stretch;
}
</style>
</head>
<body>
<div>
<p>Este es un texto dentro del div sobre el que vamos a aplicar como borde una imagen</p>
</div>
</body>
</html> |
El resultado es este:

¿Qué ha sucedido? Si vemos el código, en primer lugar hemos dicho que el grosor del borde debe ser de 10px (con border-width). Esos 10 píxels de borde se van a rellenar con nuestra imagen borde1.gif. Para ello hemos aplicado border-image para los navegadores que usan webkit (Safari y Chrome) y a los de Mozilla (Firefox) con sus respectivos prefijos. Vamos a ver los parámetros que hemos elegido para border-image uno a uno:
- url(borde1.gif) : indicamos el camino y nombre de la imagen que vamos a usar para crear el borde.
- 25% : Hemos elegido el mismo valor para las cuatro esquinas (arriba, derecha, abajo e izquierda). Podríamos haber puesto cuatro valores diferentes o dos valores (arriba-abajo e izquierda-derecha). ¿Qué nos indica este 25%? Que se va a tomar para rellenar los 10 píxels de borde de la esquina superior izquierda del DIV el 25% de la imagen que usamos como borde cortando desde la esquina superior izquierda. Y lo mismo para el resto de esquinas:

- stretch stretch: indica que tanto para los lados superior-inferior como para los lados izquierda-derecha lo que se hace es alargar la imagen del borde hasta que se llegue a la siguiente esquina.
Vamos a ver otro ejemplo. Supongamos que la imagen que vamos a usar como borde es esta:

Con este código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html>
<head>
<title>border-image</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
padding: 10px;
border-width: 10px;
-webkit-border-image: url(borde2.gif) 28% stretch;
-moz-border-image: url(borde2.gif) 28% stretch;
}
</style>
</head>
<body>
<div>
<p>Este es un texto dentro del div sobre el que vamos a aplicar como borde una imagen</p>
</div>
</body>
</html> |
Se obtiene esto (ahora se ve mejor el efecto de stretch alargando la imagen del borde hasta encontrar la otra esquina):

Si hubiéramos puesto round en vez de stretch:
1 2 | -webkit-border-image: url(borde2.gif) 28% round; -moz-border-image: url(borde2.gif) 28% round; |
tendríamos:

Es un poco difícil cogerle el truco, pero haciendo pruebas con los porcentajes y los efectos se pueden lograr cosas interesantes, por ejemplo para crear botones. Os recomiendo los artículos recomendados que siguen a continuación que, aunque estén en inglés, se ven algunos ejemplos prácticos. Además, en el de irbabe.com se nos enseña cómo conseguir aplicar imágenes a bordes con jQuery para que así funcione también con Internet Explorer.
Otras lecturas recomendadas
irbabe.com: Meet a ninja living in browsers
John Resig Bog: border-image in Firefox
css3.info: Border-image: using images for your border
elliotswan.com: 9 CSS3 properties you can use now
Escribir un comentario
XHTML: Puedes usar estos códigos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">


