CSS3 Presento la forma en que podemos añadir imágenes a los bordes de los elementos HTML por medio de la propiedad border-image que se une a la propiedad clásica border para extender la forma en que damos estilos a los bordes de los elemento.
Border-image: --valores--;
En realidad border-image es el método shorthand de las propiedades:
- border-image-source
- border-image-slice
- border-image-width
- border-image-ouset
- border-image-repeat
y en definida la sintaxis final resumida seria de la siguiente forma:
border-image: source slice width outset repeat;
También cabe decir que el soporte en los diferentes navegadores es bueno, y solo desde la versión 11 de IExplorer tiene soporte. caniuse.com/#search=border-image
Así que vamos a ver cada una de las propiedades que forman a border-image.
border-image-source
Esta propiedad la utilizamos para establecer la ruta de la imagen que vamos a establecer como fondo del borde, puede ser una ruta absoluta o relativa. Utilizamos la función url() y como argumento colocamos la ruta especifica.
O también podemos colocar el valor none, y se mostrara el borde del elemento por defecto.
O también podemos colocar el valor none, y se mostrara el borde del elemento por defecto.
Otra cosa también que debemos de tener en cuenta es que tenemos que definir la propiedad borde como base de la propiedad border-image. Ejemplo:
border: 30px solid;
Si solo definimos border-image-source como en el código CSS anterior obtendremos el siguiente resultado:
Seguimos con la siguiente propiedad que nos va a permitir configurar la forma de visualizar la imagen de borde.
border-image-slice
Lo que hace esta propiedad es dividir o cortar la imagen que especificamos en border-image-source en 9 partes. En las 4 esquinas de la imagen, los 4 lados y la parte central de la imagen.
En esta propiedad podemos especificar como valores:
Números: Representa píxeles para imágenes de mapa de bits y para las imágenes vectoriales coordenadas.
Porcentajes: Los valores de los porcentuales son respecto a la altura o la anchura de la imagen.
Fill: Esta palabra clave obliga al uso de la corte de la imagen central para que se muestre como fondo del elemento.
Inherit: Es una palabra clave que indica que los cuatro valores se heredan de elemento calculado del valor de sus padres.
Una vez definamos el valor a utilizar podemos utilizar Hasta cuatro valores diferentes se pueden especificar, en el siguiente orden: top, right, bottom, left.
Si definimos:
1 valor este se utilizara en los cuatro lados,
2 valores: el primero para los lados superior e inferior y el segundo valor en los lados,
3 valores: el primero para la parte superior el segundo para los lados y el tercero para el lado de abajo,
4 valores se aplicara un valor a cada lado.
2 valores: el primero para los lados superior e inferior y el segundo valor en los lados,
3 valores: el primero para la parte superior el segundo para los lados y el tercero para el lado de abajo,
4 valores se aplicara un valor a cada lado.
para el siguiente código:
tendremos el siguiente resultado:
border-image-width
Con border-image-width determinamos el ancho de la imagen que se está aplicando al borde del elemento. El valor de esta propiedad lo podemos especificar en cualquier medida de longitud ya sea relativa o absoluta, si utilizamos porcentajes (%) el valor se aplicara a la anchura y altura de la zona del borde cortada con border-image-slice, no podemos usar valores negativos y el valor inicial es none.
También podemos usar de 1 a cuatro valores como con slice y cada valor se aplicara a cada lado.
También podemos usar de 1 a cuatro valores como con slice y cada valor se aplicara a cada lado.
Este valor en border-image-width no es del todo dependiente del valor de la propiedad border-width, ya que el uno es para definir el grosor del borde y el otro para definir el tamaño de la imagen.
border-image-width
Border-image-repeat nos va a permitir configurar la forma en que se deben de mostrar los cortes hechos por slice en la imagen que estamos utilizando como del borde de un elemento. Este es el valor inicial de esta propiedad.
Los valores que podemos utilizar son:
Stretch: que hace estirar la imagen para ocupar y llenar todo el espacio del borde.
Repeat: va a repetir los cortes para llenar y ocupar todo el espacio del borde.
Round: con este valor lo que hacemos es que los cortes de la imagen del borde se distribuyan en el espacio que le genera el borde llenándolo todo.
Space: hace casi igual lo que hace round, solo que esta vez lo que se va a distribuir para llenar el borde son los espacios y no los cortes de la imagen.
Veamos los diferentes comportamientos de los valores de esta propiedad.
border-image-outset
Esta propiedad nos ayuda a especificar hasta que punto fuera del elemento y del borde del elemento padre se debe de colocar la imagen aplicada en el border-image-source. Es decir cuánto espacio hacia a afuera debe de haber entre el elemento y la imagen del borde.
Podemos indicar cualquier valor ya sea relativo o absoluto.
Veamos un ejemplo:
El resultado es el siguiente:
Seguimos con el mismo ejemplo y esta vez le decimos que aleje el border-image 40px desde su lugar inicial en su elemento padre con la propiedad
Cabe decir que también podemos ajustar cada lado individualmente.
border-image-outset: 40px;Cabe decir que también podemos ajustar cada lado individualmente.
border-image (Shorthand)
Y por último, decir que podemos reunir todas las propiedades anteriores en una sola declaración, y esto lo hacemos dentro de la propiedad border-image:;
La propiedad abreviada la podríamos armar con la siguiente sintaxis:
border-image: border-image-source border-image-slice border-imagewidth border-image-outset border-image-repeat;
Cuando cualquiera de los valores anteriores se omiten, se utiliza el valor inicial propiedades.
Veamos un ejemplo de todas las propiedades juntas en una declaración:
Esta propiedad es una de las más controversiales de CSS3 y las que se le tiene mucho temor al momento de utilizarla, pero vimos que en realidad es muy fácil y a la vez útil, bueno, a veces.
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
No hay comentarios:
Publicar un comentario