El propósito de este artículo es mostrar de que forma se pueden lograr llamativos fondos para nuestras paginas web utilizando imágenes de fondo que se ponen una encima de la otra para lograr efectos visuales atractivos. Esto no es algo nuevo que me acabo de sacar de la manga. Eric Meyer fue uno de los pioneros en esta técnica CSS y lo vemos en sus ejemplos de Complex Espiral.
Antes de empezar es importante saber que todo lo que se explica en este articulo no es valido para IE debido a que este navegador no es capaz de interpretar la propiedad background-atachment de CSS y los resultados no son los esperados.
Puedes utilizar los navegadores con motor Gecko (Mozilla, Firefox, Safari) u Opera. Vemos un ejemplo de lo que se pretende lograr aquí:
Ejemplo de superposición de Imágenes. (Se paciente mientras cargan las imagenes, son pesadas)
Como ves en la página de ejemplo, creamos un efecto como si las letras estuvieran encima de un cristal y debajo de este un jarrón. Solo se ha utilizado CSS y XHTML siguiendo los estandares del W3C , no hay javascript ni ningún tipo de tecnología especial.
A continuación el código XHTML que vamos a usar:
<body id="pagina">
<div id="contenedor">
<div id="contenido">
<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p>Parrafo de contenido</p>
...
</div>
<div id="contenido2">
<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p>Parrafo de contenido</p>
...
</div>
</div>
</body>
En este ejemplo, tenemos un bloque padre (id="contenedor") que dentro contiene dos bloques de texto (id="contenido" - id="contenido2") en total tres bloques.
Cada uno de estos bloques tendrá una imagen de fondo. El bloque padre tendrá la imagen original y los bloques de texto la imagen modificada que hará el efecto cambiante.
Vemos el código CSS utilizado:
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color:#000;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
}
#contenedor {
margin: 0;
padding: 100px 0 0 0;
background:fixed url(img/img1.png) 0 0 no-repeat;
}
Usuarios que han visto este tema también han visto...
- Estilo de la primera letra con CSS
- Cómo evitar que una página se imprima en CSS
- 70 ideas para crear mejores CSS
- Hojas de estilo externas
- Notas en imágenes utilizando CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.