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: 109

Visitas el mes pasado: 132

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 (II)

Múltiples fondos

imagen css3

Varias imágenes de fondo: método tradicional

Con CSS2 si queremos poner varias imágenes de fondo en un sólo espacio la solución es hacer varias capas o divs superpuestos en los que ponemos una imagen en cada uno de ellos.

Debemos en principio anidar varios "divs" para mostrar una sóla área en la página. Veamos un ejemplo: queremos mostrar un área de la página con estas tres imágenes de fondo:

mosaico bob-esponja estrella-navidad

La primera imagen será un mosaico que rellene todo el fondo. La segunda la pondremos en el centro del área y la tercera en la esquina inferior derecha.

Este es el código HTML pàra este ejemplo:

<div id="capa1">
  <div id="capa2">
    <div id="capa3">
       <p>Esta área de la página tiene tres imágenes de fondo distintas</p>
    </div>
  </div>
</div>

Y el código CSS para poder poner las tres imágenes de fondo es el siguiente:

#capa1, #capa2, #capa3 { width: 400px; height: 300px; }
#capa1 { background-image:url(fondo1.jpg) ; }
#capa2 { background-image:url(fondo2.gif) ;
         background-repeat: no-repeat; 
         background-position: center center; }
#capa3 { background-image:url(fondo3.gif); 
         background-repeat: no-repeat; 
         background-position: bottom right; }

Las imágenes se superponen según el orden de las capas, la capa 1, que engloba al resto es la más profunda, y la capa 3 la que está por encima. El resultado será como en la página del siguiente enlace:

Superponer fondos



Varios fondos en CSS3: ejemplo:

Retomemos el ejemplo anterior y veamos cómo se resuelve con CSS3.

Para empezar no necesitamos crear varias capas, ya que CSS3 permite poner varias imágenes de fondo en una sóla capa; por lo tanto el código HTML será el siguiente:

<div id="capa1">
  <p>Esta área de la página tiene tres imágenes de fondo distintas</p>
</div>

En CSS3 la propiedad background permite poner distintas imágenes separadas por comas, el orden va de la más externa a la más interna, por lo tanto la primera imagen estará por encima de todas y la última debajo de todas.

Veamos el código CSS3 que utilizamos para colocar las imágenes de fondo en este ejemplo:

#capa1 { width: 400px; height: 300px; 
        background: url(fondo3.gif) bottom right no-repeat,
          url(fondo2.gif) center center no-repeat, 
          url(fondo1.jpg) repeat; }

Hemos usado aquí la propiedad background de tipo "shorthand" con lo cual después de la "url" con el archivo indicamos la posición (background-position) y la repeticion (background-repeat). Cada uno de estos bloques afecta a una imagen, y se separan por comas. El orden en que se muestran las imágenes va de la más exterior (la primera por encima de todas) a la más interior (la última la que está debajo). El resultado del código anterior lo puedes ver en la siguiente página:

Multiples fondos con CSS3


Como puedes observar el resultado es el mismo que con el método tradicional, la ventaja está en que el código es mucho más simple.


Propiedades simples

Hemos hecho el ejemplo anterior utilizando la propiedad background tipo "shorthand" que agrupa a varias propiedades "background". Podemos realizar el código anterior con cada una de las propiedades "background por separado, es decir utilizando las propiedades background-image , background-position y background-repeat; el código siguiente tiene el mismo resultado que el anterior:

#capa1 { width: 400px; height: 300px; 
        background-image:url(fondo3.gif), url(fondo2.gif), url(fondo1.jpg);
        background-position: bottom right, center center, top left;
        background-repeat: no-repeat, no-repeat, repeat;
        }

Aquí hemos puesto las propiedades por separado, los valores correspondientes a las distintas imágenes también van separadas por comas.

la propiedad background-attachment: también podemos utilizarla con distintas imágenes, sin embargo el valor "fixed" sólo funciona si en background-repeat le hemos dado como valor "no-repeat".


Compatibilidad en navegadores

Esta propiedad es compatible con todos los navegadores en sus versiones más actuales. (marzo-2014). Todos ellos admiten los múltiples fondos tanto si se escribe la propiedad tipo "shorthand" como si se escriben por separado. Internet explorer admite esta propiedad a partir de su versión 9 (IE 9).






En la siguiente página veremos otras propiedades de los fondos

Otras propiedades de los fondos.







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