Los bordes imaginativos

Regresar al índice

1. La sintaxis del W3C

Los estilos CSS3 para los bordes (http://www.w3.org/TR/css3-background/#border-images) ahora permiten aplicar imágenes a los bordes. Esa imagen se repetirá en el borde en función del patrón que haya definido el diseñador web. Cuidado, una vez más tendremos que usar los prefijos propietarios.

Comience creando la imagen que se repetirá en el borde, según un patrón que permita definir los cuatro ángulos y los cuatro lados.

En el ejemplo se trata de una imagen de 60 píxeles de lado. Tenemos un círculo para cada ángulo y un triángulo con una orientación diferente para cada uno de los cuatro lados. Cada "elemento decorativo" mide 20 píxeles de lado.

Utilice la propiedad border-image.

Esta es la sintaxis corta con los prefijos de navegación:

#borde {

position: absolute;

top: 10px;

left: 10px;

width: 300px;

height: 100px;

border-width: 20px;

border-image: url(elemento.png) 20 round;

background-color: lightyellow;

}

Como puede ver, se ha usado la propiedad estándar border-width, que en este ejemplo es igual a la dimensión de los elementos que se colocarán en el borde: 20px.

Los argumentos de la propiedad border-image (con la sintaxis corta): 

• url(triangulo.png): ruta de acceso a la imagen. 
• 20: porción en píxeles de la imagen que se usará para cada elemento decorativo. Vamos a usar 20 píxeles de la imagen para cada elemento. Si el valor es el mismo para todos los lados, bastará con indicar un único valor, que será el equivalente de: 20 20 20 20. Si los valores son diferentes para los distintos lados, indique dichos valores en este orden: arriba, derecha, abajo, izquierda. 
• round: permite repetir la imagen y redimensionarla para que ocupe la totalidad del borde, sin que aparezca cortada (los dos otros valores son: stretch para estirar el motivo sobre toda la dimensión del lado y repeat para repetir el motivo, que podría aparecer cortado).

Y el resultado visual:

Aquí hemos usado la sintaxis corta: border-image. Usted podrá individualizar cada propiedad: 

• border-image-source: URL de la fuente de la imagen. 
• border-image-slice: los valores de corte de la imagen para obtener los motivos. 
• border-image-width: grosor del borde. 
• border-image-outset: distancia del borde de la imagen. 
• border-image-repeat: tipo de repetición de la imagen.

2. Los generadores en línea

El sitio web Border Image Generator (http://border-image.com/) le permite generar el código CSS3 para crear bordes imaginativos.

En el campo Image, introduzca la URL de su imagen.

Use los cursores Offset para indicar el tamaño de los motivos.

También puede seleccionar tamaños diferentes para el ancho del borde en la zona Border Size.

En el menú desplegable Border Repeat, seleccione el estilo de repetición que desee.

Podrá visualizar el resultado en la zona Preview, así como el código generado.

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice