Cómo funciona border-image | Oloblogger La propiedad CSS border-image está en la actualidad sólo en fase CR - Candidate Recommendation, candidata a recomendación - dentro del W3C ...

20 de agosto de 2012

Cómo funciona border-image

La propiedad CSS border-image está en la actualidad sólo en fase CR -Candidate Recommendation, candidata a recomendación- dentro del W3C. Esto quiere decir que ha sido suficientemente revisada y satisface los requisitos por sus grupos de trabajo, pero también que no se considera un estándar definitivo.

Como cualquier otra novedad no funcionará en todas las versiones de navegadores sino sólo en las más modernas -excepción hecha de Internet Explorer- y además no todos sus valores estarán desarrollados, aunque sí los principales.

Lo que hace esta propiedad es añadir un borde gráfico con el soporte de una imagen a cualquier tipo de elemento, permitiéndonos recortar de esa imagen la parte que nos interese y presentándola a modo de background mediante diversos tipos de repetición. Su nomenclatura de manera abreviada es esta:

border-image: url(direccion_imagen) recorte repeticion;

  • direccion_imagen: la dirección de la imagen que servirá como marco; la imagen de fondo
  • recorte: la porción de imagen de fondo que tomaremos en píxeles, medida desde sus extremos; lo veremos con más detalle después
  • repeticion: la manera en que va a ser tratada la imagen de fondo para rellenar el espacio reservado para el borde cuando las medidas de esta y de la imagen principal no coincidan; a priori, casi siempre. Puede tomar estos cuatro valores:
    • stretch: se escala la imagen de fondo (deformándose)
    • repeat: se repite la imagen de fondo igual que hace background
    • round: idem pero si con un número entero de repeticiones no se rellena del todo, los trozos se redimensionarán
    • space: idem pero si con un número entero de repeticiones no se rellena del todo, se aumentarán los espacios, no deformando la imagen de fondo


Aunque en los ejemplos seguiremos usando la forma abreviada, los distintos apartados de este post irán precedidos con el título de la propiedad específica que desarrollemos. Empezamos por...

border-image-source


Esta propiedad hace sólo referencia a la imagen que usaremos de fondo. No requiere mucha explicación pues sólo es necesario añadir URL y entre paréntesis la dirección de dicha imagen.

 El CSS necesario para enmarcar con una clase que llamaremos en este ejemplo borderimg1 sería este:

.borderimg1 img {border: 60px solid black;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36 stretch;
}


border-image-repeat


Lo que hemos llamado al principio repetición, se controla individualmente con la propiedad border-image-repeat. En el esquema inicial hemos indicado que existían cuatro posibilidades. Como el anterior borde lo montamos con stretch, veamos ahora qué ocurre si usamos repeat:


¿Nada? No. Lo que ocurre es que el marco por estar hecho en un color plano (sin degradados) y con tanta floritura, se presta a que los empalmes no sean demasiado evidentes y sirva esto de aviso para que se usen los distintos modos de repetición según el tipo de imagen de fondo que se escoja.

Con una de mayor tamaño el repeat no hubiera actuado y no habría existido diferencia con stretch. Tampoco se hubiera deformado tanto perdiendo precisión y es que aquí, el tamaño sí importa.

En el ejemplo usé un fondo con un ancho sensiblemente menor al de la imagen principal para poder ilustrar lo anterior, pero lo razonable hubiera sido usar una imagen mayor que las que pensaba enmarcar.

En esta captura comparativa se puede ver con detalle qué ha ocurrido (arriba con stretch- abajo con repeat):



Cuando se indica un solo valor, el modo de repetición se aplica simultáneamente en horizontal y vertical, pero también se pueden poder dos valores para que esto funcione de manera independiente.

En caso de indicar dos valores distintos, el primero se aplicará a los bordes horizontales (arriba-abajo) y el segundo a los verticales (izquierda-derecha). Con esta imagen con la que W3C ilustra estos valores de repetición, seguramente se vea más claro:


stretchrepeat

stretch repeatrepeat stretch
Las otros dos valores (round y space) no he podido probarlas en los navegadores de los que dispongo, asumiendo estos siempre el valor por defecto stretch.

En este ejemplo interactivo de Nora Brown Design podéis experimentar online con los resultados de realizar distintas variaciones de estos valores sobre cinco fondos distintos.

border-image-slice


Habréis observado que las esquinas parecían ajenas a cualquier modo de repetición y esto tiene su explicación por el tratamiento que sobre las imágenes de fondo ofrece el recorte que al principio del todo mencionaba. Esto lo hace la propiedad denominado border-image-slice, que he dejado para el final porque normalmente es la menos sencilla de entender.

En el ejemplo hemos usado una sola dimensión (36),  pero también se puede indicar de manera independiente para las cuatro direcciones (arriba-derecha-abajo-izquierda), de manera similar a como lo hacemos en margin o padding.

Como veis en el dibujo de la derecha, ese 36 ha recortado la imagen de fondo de manera que por todo el perímetro se han tomado 36px. Esto ha podido ser así porque esa imagen esta diseñada ex-profeso para que los cuatro lados tengan el mismo ancho.

Sin embargo no siempre es así y a veces necesitamos o queremos usar una imagen bastante menos regular, por ejemplo la siguiente (aquí redimensionada al 25% de su tamaño real).

En ese caso necesitaríamos individualizar los recortes según la dirección y siguiendo con esta imagen, hemos decidido que la parte que nos interesa es 39px por arriba, 20px por la derecha, 44px por abajo y 17px por la izquierda. Además queremos que el borde tenga un ancho arriba y abajo de 30px y por los laterales de sólo 10px.

La forma de indicarle al navegador esto sería:

.borderfilm img {
border-width: 30px 10px;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zuzfQ9Jz6oeovxrVD5JQax-lJ8z2zbIGuxQ9cAgPmtDDIIJo-HnW-N4__fPC5BEXiSpfAGsSP7uU9tVluT2ri9Q475tIaWhSOTnZCIoFRQTNsF2GTPoHIS9PQs_zrwJnQt78tnLSWa4X/s1600/film.jpg) 39 20 44 17 stretch;}

Esquemáticamente, esto es lo que produciría en la imagen esos valores para el slice de border-image:




Y este sería el resultado de aplicarlo a una imagen. Comparando podréis comprobar cómo se correlacionan los recortes en el esquema con los mostrados en el borde de la imagen y como los bordes horizontales y verticales tienen el ancho indicado por border:



Y en este punto ya podemos volver al tema de las esquinas. Inicialmente podíamos pensar que sólo crearíamos 4 recortes, uno para cada lado, pero realmente lo que creamos con cuatro líneas es un bonito tablero de 3 en raya con nueve secciones.

Las cuatro esquinas siempre serán respetadas tal cual estén en la imagen original y sólo se redimensionarán en función del ancho de borde elegido. Si hacemos coincidir este con el tamaño del recorte saldrán idénticas. Si es mayor se extenderán proporcionalmente y si es menor, a la inversa.

Este otro gráfico que encontré en Onextrapixel creo que resume bastante bien cómo funciona todo esto. La forma en que se disponen los círculos rosas sería para la opción repeat de la propiedad. Si se hubiera construído simulando un stretch, veríamos en los lados un sólo óvalo muy estirado.


Para el que no se haya percatado, los valores en píxeles van sin la unidad de medida (px), ya que esta propiedad está definida así.

También se admiten valores en % que producirían los cortes siguiendo los porcentajes indicados sobre el ancho/alto total. En el ejemplo interactivo mencionado en el anterior apartado también se puede experimentar con esto.

Nótese que un ancho del 50% nos daría sólo cuatro porciones y que el valor 100% nos daría sólo una.



.borderimg img {
border-width: 60px;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVbjv9ZF_rzycwz_DojmDYlvDgJrADvYhjfHro2K37MvqDH4EOzJYir_INGZHWokIV22jUE9VWiSlyHCMnFPsxbSxb2B-u9_xH5cMgPq0vvaeMnGm1vfNdcckFjhYfEdqNpl2xTmm-qHS/s400/florituras.jpg) 70 stretch;
}




Con estas nuevas propiedades siempre es conveniente usar los kits de compatibilidad de los diferentes navegadores:

.marcocss3 img {
border-width: 78px;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78 stretch;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78 stretch;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78 stretch;
}


Más información sobre la propiedad border-image en W3C y aquí un generador online con el mismo nombre que la propiedad.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

10 comentarios :

  1. Quiero saber si es posible conocer la fecha de apertura de mi blog, es decir cuando fue puesto en liberta por primera vez en la red. Es que mi primer entrada ya no existe por que la borre hace muchísimo tiempo cuando creí no necesitarla.

    ResponderEliminar
    Respuestas
    1. Pues lo de ver el primer post es la única forma que conozco, así que si ya no lo tienes, no te puedo indicar una alternativa ¿quizás lo tengas en borrador y no eliminado del todo?

      Eliminar
  2. Hola, se que no viene al caso, pero queria seguir tu blog, pinchando en la parte baja y me sale error :S como hago?

    ResponderEliminar
    Respuestas
    1. Volviendo a pinchar. Era un experimento para evitar usar el gadget de Friend Connect, pero por lo que comentas, no ha funcionado del todo bien :( Ya lo he subsanado.

      Eliminar
  3. Hola Oloman, antes que nada felicitarte y darte las gracias por este grandisimo blog.

    Tengo dos dudas, te agradezco tus respuestas:
    -como le quito el borde a las imagenes de mi blog (plantilla dinámica blogger)?
    -como puedo modificar el color del fondo de las entradas y de las paginas (que es blanco por defecto?

    Mi blog es mistahdijah.blogspot.com

    he intentado deducir varios codigos css pero ninguno me ha dado resultado

    te agradezco mucho tu ayuda
    saludos master!

    ResponderEliminar
  4. aquí se aprecia el problema (en las imagenes que tienen el borde, las que no lo tienen es porque las copié de otro blog y mantuvieron su formato): http://www.dijah.net/p/discografia.html

    he revisado muchos post tuyos y he probado monton de codigos css (post-body img, thumbnail... ) pero ninguno me ha dado resultado, por ejemplo he intentado estos dos y nada:
    .post-body img {
    border: 0px;
    }

    .thumbnail {
    border:0px;
    }

    gracias x tu ayuda

    ResponderEliminar
    Respuestas
    1. Por lo que vi el selector que añade esos bordes es este:
      .article .article-content img:not(.deferred)

      Prueba a añadirle un border-image:none;

      Eliminar
    2. Amigo muchas gracias, después de varios intentos, finalmente me ha funcionado agregando este CSS:

      .article .article-content img:not(.deferred){
      border: 0px !important;
      padding: 0px !important;
      }

      muchas gracias!!!

      pd: aprovecho de recomendar otro crack cuyos conocimientos de las plantillas dinamicas de blogger me parece notable, Yoga: http://www.southernspeakers.net/

      Eliminar
    3. Hace casi un año... Ya que el blog parece bueno, voy a imaginar que no eres su administrador para no eliminar el comentario por spam ;)

      Eliminar
  5. Muchísimas gracias.
    Lo he probado con una fotografía y funciona perfecto.

    ResponderEliminar