Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 V

Bordes con imagenes

Nuevas propiedades para el borde

Las nuevas propiedades para el borde en CSS3 permiten poner una imagen como borde de un elemento. La imagen debe tener unas ciertas carácterísticas que explicaremos más adelante. Las nuevas propiedades no están todavía disponibles en los navegadores en su forma estándar. no obstante vamos a dar un adelanto de cuáles serán estas propiedades:

Propiedades individuales

border-image-source: url(imagen.gif) : su valor es la url o ruta al archivo donde está la imagen que se quiere poner en el borde.

border-image-slice: <número> | <porcentaje>]{1,4} && fill? : su valor es de una a cuatro números o porcentajes, o la palabra reservada fill. Divide la imagen en varias áreas, las cuales se colocarán en las distintas zonas del borde.

border-image-outset: [<medida> | <número>] {1,4} : su valor es de uno a cuatro números o medidas. Indica el area de la imagen que pùede extenderse más alla de la caja que lo contiene.

border-image-width: [<medida> | <porcentaje> | <número> | auto] {1,4} : su valor es de uno a cuatro números, medidas o porcentajes. Indica el area donde se coloca la imagen, que por defecto se corresponde con el área del borde. (auto) indica el valor por defecto.

border-image-repeat: [ stretch | repeat | round | space ]{1,2} : Indica si la imagen se va a repetir o no. stretch indica que no se repetirá, Las demás palabras repiten la imagen, pero mientras con repeat la imagen simplemente se repite, con round se ajusta a un número entero de repeticiones (sin imágenes a medias), para ello ajusta el tamaño de la imagen. space ajusta también el número de repeticiones, pero en lugar de modificar el tamañó, deja a su alrededor espacios en blanco. Si ponemos dos valores el primero corresponde a los bordes horizontales, y el segundo a los verticales.

Propiedad tipo "shorthand"

Todas las propiedades anteriores pueden especificarse en una sola propiedad de tipo "shorthand": la propiedad border-image.

border-image: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>? [ / <‘border-image-outset’> ]? ]? || <‘border-image-repeat’>

Las propiedades border-image-width y border-image-outset son opcionales y además se debe escribir una barra inclinada delante de ellas. Las demás son obligatorias.

Compatibilidad con navegadores

Actualmente (octubre 2011) ningún navegador ha compatibilizado estas propiedades en su forma estándar. Sin embargo bajo otros nombres, de forma experimental varios navegadores admiten la propiedad tipo "shorthand" border-image;

Sólo admiten los valores de border-image-source, border-image-slice y border-image-repeat, siendo este último opcional (valor por defecto stretch).

Después de ésto veamos que podemos hacer para poner una imagen en el borde y que nos quede más o menos decente:

Propiedad border-image-slice

Una sóla imagen es la que nos servirá para ponerla en los cuatro bordes y las cuatro esquinas del borde, para ello la propiedad nos divide la imagen en una serie de áreas diferentes, que se corresponden con los laterales y las esquinas del borde. El border-image-slice se encarga de dividir la imagen en distintas áreas. para ello crea cuatro líneas de partición que se corresponden con los cuatro valores como máximo que podemos darle a esta propiedad y que se distribuyen como en el siguiente esquema:

esquema

El cuadrado coloreado de azul representa a la imagen. Las líneas 1, 2, 3, y 4 dividen la imagen en nueve partes. Estas línas vienen marcadas por los valores indicados en border-image-slice de manera miden la distancia desde su respectivo borde a la línea. Línea 1: borde derecho; línea 2: borde superior; línea 3: borde inferior; línea 4: borde izquierdo. Los valores se miden en pixels (cuando es un número) o en porcentajes.

Si hay cuatro valores estos toman el orden visto anteriormente. Si hay 3 valores el primero es el superior, el segundo los dos laterales, y el tercero el inferior. Si hay dos valores el primero corresponde a las líneas horizontales y el segundo a las verticales. si hay un sólo valor, es el mismo para todas las líneas.

La imagen queda dividida en nueve zonas. cuatro esquinas, cuatro laterales, y una zona central. Estas se corresponden con las cuatro esquinas del borde, los cuatro laterales del borde, y el contenedor de la imagen respectivamente. La parte de la imagen que quede en cada una de estas zonas es la que se verá en el sitio que le corresponde.

Tipo de imagen

Según lo anterior, la imagen que pongamos se distribuye en todo el contenedor, de manera que unas partes quedan dentro del borde y otras no, como queremos que la imagen se vea sólo en el borde, debemos tener una imagen que sólo se vea en el borde pero que no se vea en el contenedor. Esto nos obliga poner una imagen que tenga una serie de condiciones:

Por ejemplo tenemos la siguiente imagen de 150px X 150px:

banderas1

Al aplicar la propiedad border-image-slice: 33% la imagen queda dividida en nueve partes iguales de la siguiente manera:

banderas1-particion

Cada una de estas partes de la imagen es la que se verá en su correspondiente parte del borde.

Ejemplo práctico:

Tomaremos la imagen anterior para usarla como borde de una caja de 300px X 150px. Para ello lo primero en el código HTML colocaremos un div:

<div id="capa1">
<p>Elemento con bordes con imágenes.</p>
<p>Sólo visible en Firefox, Safari, Chrome y Opera.</p>
</div>

Una vez tenemos la caja le aplicamos el código CSS. En primer lugar definimos la anchura, altura, y un borde normal, lo bastante ancho como para que pueda contener las imágenes, y que es el que se verá en caso de que no sea visible el borde con imágenes:

#capa1 { width: 300px; height: 150px; border: 30px double blue; }

A continuación definimos el borde con imágenes en el navegador Firefox. Recordemos que debemos usar el prefijo -moz-:

#capa1 { width: 300px; height: 150px; border: 30px double blue;
         -moz-border-image: url(borde1.gif) 33% round;
       }

Recordemos que debemos haber guardado previamente la imagen en el mismo directorio que la página HTML. Los valores de -moz-border-image se corresponden en este orden con los de border-source, border-slice, border-repeat. Señalar que no se admiten más valores de otras propiedades. el valor de border-repeat es opcional, (si no se pone se sobreentiende stretch), y no admite space como valor.

Con el código visto hasta aquí el borde con imágenes debemos verlo en Firefox, sin embargo nos interesa que el código pueda verse en el mayor número posible de navegadores, para ello repetimos la última línea variando el prefijo para los diferentes navegadores:

#capa1 { width: 300px; height: 150px; border: 30px double blue;
         -moz-border-image: url(borde1.gif) 33% round;
         -webkit-border-image: url(borde1.gif) 33% round;
         -o-border-image: url(borde1.gif) 33% round;
       }

Con éste código debemos ser capaces de ver el borde con imágenes en los navegadores indicados. La capa con el borde con imágenes la veremos de la siguiente manera:

Elemento con bordes con imágenes.

Sólo visible en Firefox, Safari, Chrome y Opera.

Si no ves el recuadro anterior con el borde con imágenes, o estás usando Internet Explorer, o tal vez estés usando una versión antigua de tu navegador. Prueba a actualizarlo.

En el código utilizado, en el valor de slice aquí hemos puesto un solo valor - 33% - sin embargo tal como hemos indicado anteriormente, podríamos haber puesto de 1 a 4 valores. En el valor de repeat aquí hemos utilizado round, sin embargo se admiten también los valores de stretch y repeat, pudiendo ponerlos una o dos veces, tal como se ha indicado anteriormente.






En la siguiente página veremos otro de los efectos más demandados por los diseñadores: las sombras.

Sombras en CSS3



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo