Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 145

Visitas el mes pasado: 333

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (V)

Bordes con imagenes

imagen css3

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 algunos navegadores en su forma estándar. NO obstante podemos utilizarlas utilizando la forma experimental (mediante el prefijo del navegador).


Propiedades individuales

Indicamos aquí las propiedades. Luego mediante un ejemplo veremos cómo funcionan:

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 uno a cuatro números o porcentajes, o la palabra reservada fill. Divide la imagen en varias áreas, las cuales se corresponden con 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 (marzo 2014) La mayoría de los navegadores ha adaptado ya la forma estándar de la propiedad. Tan sólo Safari y Opera siguen utilizando la forma experimental. Sin embargo esta actualización es muy reciente, por lo que se recomienda poner junto a la forma estándar, las formas experimentales de todos los navegadores, pues es probable que muchos usuarios no los tengan actualizados. Estas son:

Internet Explorer admite esta propiedad en su forma estándar a partir de la versión 10. Las versiones anteriores no admiten la propiedad de ninguna manera.

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>Visible en los principales navegadores.</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 su forma estándar:

#capa1 { width: 300px; height: 150px; border: 30px double blue;
         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 border-image se corresponden en este orden con los de border-source, border-slice, border-repeat. Al utilizar la propiedad tipo "shorthand", no se admiten más que los valores de estas propiedades. el valor de border-repeat es opcional, (si no se pone se sobreentiende stretch), y no admite space como valor.

Este código se verá ya en todos los navegadores, siempre que estén actualizados, excepto en Safari y en Opera. Sin embargo nos interesa que el código pueda verse también en Safari y en Opera y en navegadores que no estén actualizados, para ello repetimos la última línea incluyendo el prefijo para los diferentes navegadores:

#capa1 { width: 300px; height: 150px; border: 30px double blue;
         border-image: url(borde1.gif) 33% round;
         -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 ya podemos ver el borde con imágenes en todos los navegadores que lo admiten. La capa con el borde con imágenes la veremos de la siguiente manera:

Elemento con bordes con imágenes.

Visible en los principales navegadores.

Si no ves el recuadro anterior con el borde con imágenes, o estás usando Internet Explorer en versión 9 o anteriores, 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 de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com