lunes, 8 de febrero de 2021

👨‍💻 Mis apuntes sobre - bordes con imágenes -

Los nueve sectores definidos por las propiedades de mano larga de la imagen de borde CSS o border-image-slice

Figura 1. Imagen Introductoria

⏩ Snippet: ⏪
👉 Snippet: Exponiendo un sistema para crear bordes con imágenes, expandibles a partir de una imagen de base. Aplicable en CSS.
Portafolio de temas tratados en esta publicación:
  1. La técnica 9-slice
  2. Sintaxis
  3. Valores
  4. Modo de repetición
  5. Atajo: Bordes con imágenes
  6. Propiedad abreviada
  7. Soporte para el navegador
  8. Fuente

Una de las limitaciones que tenía CSS,. es que, si en lugar de utilizar los bordes de los que disponemos en CSS (sólidos, punteados, etc...) quisieramos hacer algo un poco más complejo con imágenes, podría volverse una tarea muy complicada. Por esa razón, CSS3 incorporó en su momento un sistema para crear bordes extensibles basados en una imagen de molde.

IR A PORTAFOLIO

La técnica 9-slice
👨‍💻 El fundamento ...
    Dicho sistema se fundamenta en el concepto 9-slice (muy utilizado en videojuegos) y se basa en la propiedad CSS border-image-slice.

    Respecto a la propiedad CSS border-image-slice, su función es dividir la imagen especificada por la frontera de la imagen de código. Esto se hace de la manera que se detalla en los párrafos que siguen.

👨‍💻 Teoría básica ...
propiedad border-image-slice
    La propiedad CSS border-image-slice define el corte de la imagen por intermedio de cuatro líneas que dan por resultado una división en nueve secciones: cuatro esquinas, cuatro bordes y el centro; o sea, especifica cuatro desplazamientos hacia adentro.

    Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.

    El fragmento central es descartado por el borde en sí (es tratado como totalmente transparente), a menos que se establece la palabra clave fill (relleno) y así ser utilizado de molde para los bordes de un elemento. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).

👨‍💻 Sinopsis gráfica ...
    Visualmente podemos resumir la teoría básica anterior en la siguiente sinopsis gráfica, la cual divide la imagen modelo trazando cuatro líneas (en rojo).:

Sistema 9-slice

Figura 2. Sistema 9-slice

De esta forma, los fragmentos 1, 3, 7 y 9 se utilizarán para las esquinas y los fragmentos 2, 4, 6 y 8 se utilizarán para los bordes laterales, pudiendo expandirlos si se requiere y considera necesario con alguna de las propiedades que veremos a continuación.

Las propiedades border-image-repeat, border-image-width y border-image-outset definen cómo se usarán estas imágenes.

La propiedad abreviada border-image podría restaurar esta propiedad a su valor predeterminado.

La propiedad de CSS   border-image permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.

Valor inicial100%
Se aplica a todos los elementos, excepto a los elementos de tabla interna cuando se contrae el colapso de borde. También se aplica a ::primera letra.border-collapse is collapse. It also applies to ::first-letter.
Heredableno
Los porcentajes se refieren al tamaño de la imagen del borde
Mediavisual
Valor calculadode uno a cuatro porcentajes (según lo especificado) o longitud(es) absoluta(s), más el relleno del keyword fill si se especifica
Tipo de animacióndiscreto
Orden canónicolos porcentajes o longitudes, seguido finalmente por el keyword fill

Notas: La propiedad CSS border-image-repeat define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.

La propiedad border-image-outsetdescribe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.

IR A PORTAFOLIO

Sintaxis

 

border-image-slice:number|%|fill|initial|inherit;

Nota: La propiedad border-image-rebanada puede tomar de uno a cuatro valores. Si se omite el cuarto valor, es el mismo que el segundo. Si también se omite la tercera uno, es el mismo que el primero. Si también se omite el segundo uno, es el mismo que el primero. 

/* border-image-slice: slice */
border-image-slice: 30%;

/* border-image-slice: horizontal vertical */
border-image-slice: 10% 30%;

/* border-image-slice: top horizontal bottom */
border-image-slice: 30 30% 45;

/* border-image-slice: top right bottom left */
border-image-slice: 7 12 14 5;

/* border-image-slice: … fill */
/* The fill value can be placed between any value */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

Sintaxis formal

<number-percentage>{1,4} && fill?
where 
<number-percentage> = <number> | <percentage>
IR A PORTAFOLIO

Valores
slice
Es un valor <number> o <percentage> de la separación de las cuatro líneas de corte. Un valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a 100%.
horizontal
Es un valor <number> o <percentage> de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
vertical
Es un valor <number> o <percentage> de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
top
Es un valor <number> o <percentage> de la separación de la línea de corte superior. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
bottom
Es un valor <number> o <percentage> de la separación de la línea de corte inferior. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
right
Es un valor <number> o <percentage> de la separación de la línea de corte derecha. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
left
Es un valor <number> o <percentage> de la separación de la línea de corte izquierda. El valor <number> representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores <percentage> son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
fill
Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.
inherit
Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.

Vamos a utilizar la siguiente imagen expandible (a la izquierda), que simula ser un antiguo carrete fotográfico, como imagen de borde. Las líneas rojas no forman parte de la imagen original, sino que se utilizan en este ejemplo para dejar claro cuáles serían los límites marcados con border-image-slice. Una vez hecho esto, conseguiremos el resultado de la imagen de la derecha, en el cuál podremos ampliar el texto del elemento lo que queramos, que se adaptará solo a su contenido:

Ejemplo con border-image en CSS

Figura 3. Ejemplo con border-image en CSS

Para ello, utilizaremos el siguiente código CSS, donde antes que nada, establecemos un ancho al elemento con width y un border básico para que, en el caso de navegadores que no soporten border-image, tenga al menos un borde básico y nos sirva también como base a lo que vamos a hacer a continuación:

.borde {
  width: 200px;
  border: 42px solid black;
  border-image-width: 1;
  border-image-source: url(https://i.imgur.com/YC5PUl6.png);
  border-image-slice: 23%;
  border-image-repeat: round;
}

Para establecer los límites y poder utilizar imágenes en los bordes, hemos hecho uso de las siguientes propiedades de CSS:

Propiedad Valor Significado
border-image-width 1 | | | auto Grosor de la imagen de borde.
border-image-source none | url(imagen.png) Imagen a utilizar de molde para el 9-slice.
border-image-slice 100% | | | fill Tamaño de los bordes en la imagen.
border-image-outset 0 | Tamaño en el que el borde crece hacia fuera.

Tabla 1. Propiedades de CSS

  • La propiedad border-image-width indica el tamaño que tendrá el borde de la imagen. El tamaño puede ser indicado con unidades (píxeles o porcentajes, por ejemplo) o sin ellas, lo que lo tomará como múltiplo del tamaño indicado en border-width.

En nuestro ejemplo, tanto indicarle un valor de 1 como dejarlo sin especificar, sería decirle que el tamaño del borde de la imagen será de 42px, pero por ejemplo, si indicamos border-image-width: 2, le estaremos indicando que use un tamaño de 84px. Al igual que vimos en el apartado de margin se puede indicar 1, 2, 3 o 4 parámetros .

Consejo: No olvides que hay que indicar también un border-width y un border-style para que el borde CSS esté definido y se pueda visualizar.

  • La propiedad border-image-source establece, mediante la expresión url(), la imagen que vamos a utilizar para crear nuestro borde con imágenes.

Truco: ¡Como imagen de fondo puedes utilizar un gradiente de CSS, ya que internamente se interpretan como imágenes!
  • La propiedad border-image-slice define la posición de las líneas divisorias de la imagen, o lo que es lo mismo, el tamaño de los bordes. Por defecto, el valor es de 100% (tamaño de ancho completo de la imagen), pero también podemos usar números sin unidad, que simbolizan píxeles de recorte. Se pueden especificar 1, 2, 3 ó 4 parámetros.

Por otro lado, el valor opcional fill sirve para indicar que quieres rellenar el elemento con el fondo del fragmento 5, que por defecto es descartado. Útil en casos que quieras aprovechar el fondo.

En nuestro caso, nos podría valer tanto con 110 (110 píxeles de recorte) como con 23%, ya que es más o menos la cantidad apropiada para establecer el límite tanto de ancho como de alto.

  • La propiedad border-image-outset establece el factor de crecimiento (hacia fuera) de la imagen. Muy útil para compensar la imagen si se extiende hasta el contenido. Usar con cuidado, ya que puede desplazar el contenido. Por defecto no tiene desplazamiento.
IR A PORTAFOLIO

Modo de repetición

Habremos comprobado que en algunas ocasiones, el modo en que se repite la imagen de borde no es la apropiada, o al menos, no es la que más se adapta a nuestro caso específico. Este comportamiento se puede variar mediante la propiedad border-image-repeat:

Propiedad Valor Significado
border-image-repeat [repetición en X e Y] 1 parámetro. Comportamiento de repetición en ambos ejes.
[rep. en X] [rep. en Y] 2 parámetros. Comportamiento de repetición por separado.

Tabla 2. Propiedad border-image.repeat

Con dicha propiedad se establece como deben comportarse los fragmentos del borde y el tipo de repetición que deben efectuar. Se puede usar la modalidad de un parámetro en la que se aplica a todos los bordes, o la modalidad de dos parámetros donde estableces diferente comportamiento para los bordes horizontales y verticales.

Esta propiedad puede tomar los siguientes valores:

Valor Significado
stretch Los bordes se estiran hasta rellenar el área. Es el valor por defecto.
repeat Los bordes se repiten hasta rellenar el área.
round Igual que repeat, pero estira los fragmentos individualmente hasta rellenar el área completa.
space Igual que repeat, pero añade espacios hasta rellenar el área completa.

Table 3. Valores de la propiedad border-image-repeat

Para verlo más claramente, echemos un vistazo a esta representación visual del comportamiento de cada uno:

Border-image-repeat values

Figura 4. Propiedad border-image-repeat values

Es importante recalcar los dos últimos valores (round y space) actúan igual que repeat, pero con un comportamiento ligeramente diferente que nos puede interesar en el caso de que la zona repetida quede descompensada.

Utilizando la imagen y código CSS anterior, obtendríamos un resultado similar a este, que se adaptaría sólo al contenido que escribamos dentro del elemento HTML con clase borde :

CSS: Border-image en acción

Figura 5. Propiedad border-image en acción

IR A PORTAFOLIO

Atajo: Bordes con imágenes

Como suele ser costumbre, este tipo de propiedades tienen una propiedad para ahorrar espacio y escribirlo todo de una sola vez. En este caso, la sintaxis es la siguiente:

div {
  /* border-image: <source> <slice> <width> <outset> <repeat> */
  border-image: url(https://i.imgur.com/YC5PUl6.png) 23% 1 0 round;
}
IR A PORTAFOLIO

Propiedad abreviada

 También tenemos la propiedad imagen frontera: una propiedad abreviada (shorthand property) para establecer todas las propiedades border-image-*

Valor por defecto: 100%
Heredado: no
animable: no.
Versión: CSS3
la sintaxis de JavaScript: objeto.style.borderImageSlice="30%"

Un codigo de ejemplo: 

 

  
 #borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) round; /* Opera 11-12.1 */
    border-image: url(border.png) round;
    border-image-slice: 10%;  <------ Propiedad abreviada 
}

IR A PORTAFOLIO

Soporte para el navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad Chrome Edge Firefox Safari Ópera
border-image-slice 15.0 11.0 15.0 6.0 15.0
IR A PORTAFOLIO

Fuentes

Esta publicación se apoya en la consulta de las siguientes URLs que tratan sobre este tema:

https://lenguajecss.com/css/modelo-de-cajas/bordes-imagenes/

https://developer.mozilla.org/es/docs/Web/CSS/border-image-slice

http://www.w3bai.com/es/cssref/css3_pr_border-image-slice.html



Complementarias:

https://aprende-web.net/NT/css3/css3_5.php
https://www.creatuwebnicaragua.com/propiedad-border/

https://uniwebsidad.com/libros/referencia-css2/border





a la/s
Etiquetas: , , ,