Vamos 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
Gracias!! Yo sabía hace mucho que esto existía, pero no me atreví a hacerlos ino hasta hoy. Tu explicación fue muy útil y didactica!
Gracias a ti por tus comentarios, Juanda
Genial con CSS3! Miles de cambios, me quedé asombrado con las nuevas cosas que con él se pueden hacer. Excelentes explicaciones, un muy buen sitio… ¡saludos!
Saludos..
Te comento que tome uno te tus ejemplos pero no me corre como se ve en el ejemplo cree un cuadro de color rojo guardandolo con el mismo nombre que especifica el ejemplo pero no logro hacer que funcione correctamente