Bordes con imágenes en CSS 3

Vamos a hablar rápidamente sobre uno de los nuevos atributos de las CSS 3, que sirve para personalizar los bordes de los elementos HTML con imágenes. Publicamos este artículo dentro del Manual de CSS 3, que es una especie de compendio de ejemplos y técnicas que nos permitirá aplicar esta nueva especificación de las Hojas de Estilo en Cascada.

De manera resumida, border-image es un atributo que nos ayudará a aplicar nuevos estilos a las cajas con CSS, a través de la utilización de imágenes en los bordes de los elementos, incluso pudiendo escoger varias imágenes para varias de las partes de los bordes.

Colocar imágenes en los bordes es una tarea que ya se suele realizar en el diseño web, y para ello se suelen utilizar complementariamente técnicas con los lenguajes HTML y CSS. Es decir, en el momento de escribir este artículo, para que un elemento de la página, como puede ser una división o una tabla, párrafo, etc., tenga un borde a partir de una imagen, se necesita colocar algún código HTML adicional, con algún contenedor que nos permita luego definir estilos CSS para "imitar" ese borde de imagen. En cualquier caso, estemos o no familiarizados con las técnicas de uso de imágenes en los bordes, lo importante es que con CSS 3 vamos a poder hacer eso mismo simplemente escribiendo algunos nuevos atributos a los elementos que deseemos.

Distintas especificaciones sobre border-image

Las especificaciones de CSS 3 están en etapa de desarrollo. El organismo W3C, que se encarga de definir los estándares de Hojas de Estilo en Cascada, ha alterado algunas veces las especificaciones del atributo border-image y relacionados. Es por ello que todavía hay algunas diferencias entre lo que los navegadores entienden con este atributo y lo que recomienda el W3C. Esto quiere decir que en el futuro todavía puede cambiar el funcionamiento de este atributo en los distintos navegadores, tal como anuncia Mozilla en su centro de desarrollo.

Para las personas que deseen encontrar de primera mano las especificaciones de los atributos para poner borde en las imágenes, recomendamos la lectura del sitio de la W3C.

Borrador de trabajo sobre las propiedades de borde de imagen. Noviembre de 2002
Borrador sobre borde de imagen. Diciembre 2009

Como se podrá ver, existen bastantes diferencias y es que también ha pasado bastante tiempo entre una y otra especificación. Además, la más actual de las dos tiene unas explicaciones basadas en esquemas mucho más entendibles.

Del mismo modo, tenemos acceso a las especificaciones que han puesto en marcha los más avanzados navegadores, que implementan ya de manera experimental algunos de los atributos para crear bordes en las imágenes.

Sitio para desarrolladores de Mozilla, sobre Border Image.
Sitio para desarrolladores de Mac y su navegador Safari.

Ejemplo de border-image

Así pues, para que sirva únicamente a modo de demostración que es todo lo que se puede hacer por el momento en este artículo de DesarrolloWeb.com, vamos a poner un simple ejemplo sobre lo que permiten a fecha de hoy los navegadores Safari y Firefox sobre border-image.

Por ejemplo, tendríamos este elemento HTML:

<div id="capaborde">
Esta capa le voy a poner un borde arriba
</div>

Y ahora podríamos aplicar estilos para crear un borde en la imagen:

#capaborde{
-moz-border-image: url(sello.png) 2 2 2 2 stretch stretch;
-webkit-border-image: url(sello.png) 2 2 2 2 stretch stretch;
padding:20px;
width: 100px;
}

Como se puede ver, los atributos para bordes de imágenes no tienen el nombre definitivo, que será border-image, sino unos propios para cada uno de los dos navegadores que implementan esta nueva característica de CSS 3. El atributo -moz-border-image es para el navegador Firefox y otros productos de la compañía Mozilla y el atributo -webkit-border-image es para cualquier navegador basado en WebKit, como Safari o Chrome.

La imágen que estamos utilizando como borde es la siguiente:

Y el ejemplo se puede ver en marcha en una página aparte, pero recordar que depende de vuestro navegador podréis ver o no el borde de imagen.

Otros atributos para hacer borde con imágenes

A parte del atributo border-image, existen otros numerosos atributos para definir los bordes de manera independiente para cada uno de los lados o vértices de un elemento HTML. Quizás conviene esperar un poco antes de dar unas explicaciones concisas y ejemplos sobre este y otros atributos, puesto que han cambiado bastante últimamente.

Sin embargo, según la última especificación de CSS 3, tenemos los siguientes atributos:

border-image-source: Para indicar la URL de la imagen que vamos a utilizar como borde.

border-image-slice: Indica el espacio de la imagen que será visible como borde, en los cuatro lados del elemento, es decir, top, right, bottom y left.

border-image-width: Para indicar la anchura del borde.

border-image-outset: Nos sirve para indicar el área en la que la imagen de borde se extiende más allá del área del elemento, en los 4 lados del mismo.

border-image-repeat: Permite marcar si se desea o no que se repita la imágen del borde haciendo un mosaico o si se desea que se estire, etc.

border-image: Se utilizaría como una manera resumida de especificar varios atributos de borde con imágenes al mismo tiempo.

Explicar con ejemplos cada uno de estos atributos sería sin duda interesante, pero nos llevaría varios artículos y además, merece la pena hacerlo cuando ya estén disponibles como especificación definitiva de CSS 3 y no en un simple borrador, así como cuando estén implementados en los navegadores.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información