La nueva imagen de borde de la propiedad CSS3 es un poco complicada, pero puede permitirle crear cuadros flexibles con bordes personalizados (o sombras, si eso es lo suyo) con un solo div y una sola imagen. En este artículo, explico cómo funciona la propiedad de taquigrafía de imagen de borde en los navegadores actuales.
La idea basica
La propiedad de taquigrafía de imagen de borde tiene 3 partes:
border-image: url(border-image.png) 25% repeat;
Básicamente, estos le permiten especificar:
- Una imagen para usar como borde
- Dónde cortar esa imagen, dividiendo la imagen en 9 secciones
- Cómo el navegador debe aplicar esas secciones a los bordes de su elemento
Los detalles pertinentes
Veamos cada parte del proceso con un poco más de detalle. La primera parte es fácil y está familiarizada con la propiedad background-image. Para fines de demostración, usaré esta imagen, que es de 100 px x 100 px:
Cortando tu imagen
La segunda parte puede tener de uno a cuatro valores, muy parecido a la propiedad border-width, y se especifican en el mismo orden: superior, derecha, inferior, izquierda. Puede utilizar porcentajes o píxeles. Curiosamente, los porcentajes requieren el “%”, mientras que los píxeles deben aparecer sin el “px”:
border-image: url(my-image.gif) 25% 30% 10% 20% repeat;
border-image: url(my-image.gif) 25 30 10 20 repeat;En este caso, dado que mi imagen es de 100 px x 100 px, las dos reglas anteriores son equivalentes: cortan la imagen en los mismos lugares. Agregué algunas dimensiones en mi imagen para demostrar:
Repetir, Redondear, Estirar
border-image siempre colocará las secciones de las esquinas de su imagen en las esquinas correspondientes del cuadro de su elemento, pero la tercera parte de la regla abreviada le dice al navegador cómo tratar las secciones medias de su imagen, las que irán a lo largo de los bordes de su elemento .
Repeat (repetir, o en mosaico, la imagen) y stretch (estirar o escalar la imagen) se explican por sí mismos.
Round significa colocar la imagen en mosaico, pero solo para que quepan un número entero de mosaicos y, de lo contrario, escalar la imagen. En este momento, Safari y Chrome interpretan round como repeat. Puede haber hasta dos valores: uno para los bordes superior e inferior del elemento y otro para el izquierdo y el derecho.
Aquí hay un ejemplo con el valor superior / inferior establecido en repeat, y el valor izquierdo / derecho establecido en stretch:
#example-one {
border-width: 25px 30px 10px 20px;
border-image: url("border-image.png") 25 30 10 20 repeat stretch;
}
Captura de pantalla del ejemplo uno
DEMOSTRACIÓN EN VIVO, LECTORES DE RSS HAGA CLIC PARA VER. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu arcu non dui consequat vestibulum non vitae eros. Donec imperdiet lorem en mi rhoncus lacinia. Phasellus porttitor ligula eu justo condimentum eget placerat arcu pharetra. Proin fringilla vulputate eros in accumsan. Sed mi nibh, pulvinar eu sollicitudin ut, feugiat non ipsum. En ornare, quam sit amet tempor suscipit, erat odio suscipit nisi, eu gravida nisl orci ut arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ancho del borde
border-image no hará nada si no especifica un ancho para su borde. Para los navegadores que entienden la imagen de borde, las secciones de la imagen se escalarán al ancho especificado. Si usa la propiedad de taquigrafía de borde, proporciona una buena alternativa para los navegadores que no:
#example-two {
border: 50px double orange;
border-image: url("border-image.png") 25 30 10 20 repeat;
}
Captura de pantalla del ejemplo dos
DEMOSTRACIÓN EN VIVO, LECTORES DE RSS HAGA CLIC PARA VER.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu arcu non dui consequat vestibulum non vitae eros. Donec imperdiet lorem en mi rhoncus lacinia. Phasellus porttitor ligula eu justo condimentum eget placerat arcu pharetra. Proin fringilla vulputate eros in accumsan. Sed mi nibh, pulvinar eu sollicitudin ut, feugiat non ipsum. En ornare, quam sit amet tempor suscipit, erat odio suscipit nisi, eu gravida nisl orci ut arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
O puede especificar cada ancho individualmente (en este ejemplo, he especificado anchos de modo que los cortes de la imagen no se escalen en absoluto):
#example-three {
border-color: orange;
border-style: double;
border-width: 25px 30px 10px 20px;
border-image: url("border-image.png") 25 30 10 20 repeat;
}
Captura de pantalla del ejemplo tres
DEMOSTRACIÓN EN VIVO, LECTORES DE RSS HAGA CLIC PARA VER. dolor sit amet, consectetur adipiscing elit. Aenean eu arcu non dui consequat vestibulum non vitae eros. Donec imperdiet lorem en mi rhoncus lacinia. Phasellus porttitor ligula eu justo condimentum eget placerat arcu pharetra. Proin fringilla vulputate eros in accumsan. Sed mi nibh, pulvinar eu sollicitudin ut, feugiat non ipsum. En ornare, quam sit amet tempor suscipit, erat odio suscipit nisi, eu gravida nisl orci ut arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sin embargo, usar un borde plano con el mismo ancho que su imagen de borde no siempre será ideal, por lo que es posible que desee usar hojas de estilo condicionales para darle a IE algunos estilos de borde diferentes por completo.
Peculiaridades del navegador
Como era de esperar, IE no entiende nada de imagen de borde. Navegadores que hacer support border-image solo admite la propiedad de taquigrafía, no todas las propiedades individuales que se describen en la especificación. Algunas propiedades potencialmente útiles no se admiten en absoluto, especialmente border-image-outset, lo que resolvería este problema.
Además, se supone que el comportamiento predeterminado es descarte la sección central de la imagen, y use la palabra clave ‘fill’ en la propiedad border-image-slice para preservarla:
El fill La palabra clave, si está presente, hace que se conserve la parte media de la imagen de borde. (De forma predeterminada, se descarta, es decir, se trata como vacío). (Lea las especificaciones)
Pero el comportamiento actual del navegador es preservar el medio y no hay forma de desactivarlo. Por lo tanto, si no desea que el área de contenido de su elemento tenga un fondo, la sección central de su imagen debe estar vacía. Sin embargo, puede utilizar este comportamiento de relleno a su favor para crear un cuadro con un borde y un fondo elegantes, con una sola imagen.
Demostración interactiva
Construí un border-image página de demostración para ayudarme a entender este nuevo y complicado conjunto de propiedades CSS3. Puede elegir una imagen, especificar repetir, redondear o estirar, y ajustar el ancho del borde y el corte. ¡Disfrutar!
Ejemplos en la naturaleza
- Chris Spooner lo usa con buen efecto para dar a sus imágenes un borde personalizado.
- En el blog de viajes Go Pink Boots (Actualización: ahora sin conexión) que construí recientemente, lo usé para agregar un fondo de papel rasgado a las imágenes.
- Lo uso en mi sitio The Web Designers ‘Review of Books (Actualización: ahora sin conexión) para resaltar las citas en bloque.
Si tiene otros ejemplos en sitios en vivo, me encantaría verlos. Deja un enlace en los comentarios.