CSSLab

Simulando un efecto negativo

Tweet

Vi este efecto bastante interesante en un sitio web, y me atreví a intentar replicarlo a mí manera. Luego de fracasar en mi primer intento, decidí hacer trampa y revisé su código fuente. Me dí cuenta de que utilizaban una propiedad que no conocía, lo que me explicó mi anterior fracaso. Primero, un video de una captura tomada desde el mismo sitio web, para que vean a lo que me refiero. Luego, la explicación bastante simple.

Bueno pueden verlo por sus propios ojos desde el sitio original, sólo tomé el video porque creí que para muchos no sería tan obvio el efecto. La idea es que mediante el scroll, se intercambien 2 imágenes, en este caso una positiva de una negativa.

Ahora, vamos con la magia. A través de CSS y la propiedad background-attachment: fixed; repetiremos el efecto. Los ingredientes son:

• 1 HTML
• 2 imágenes similares, pero diferentes (positivo y negativo para ser originales).
• 1 pizca de CSS

El HTML:

<div id="container">
     <div id="header">
          <h1>CSSLab: efecto negativo</h1>
     </div>
     <div id="content">
          <p>Pellentesque vel dui sed……….</p>
     </div>
</div>

Nada de qué extrañarse. Un contenedor que tiene un encabezado y el contenido. La idea es que el #container tenga la imagen en negativo, escondida detrás del #header que tendrá la imagen en positivo. Ambos con la propiedad background-attachment: fixed; para que no se muevan con el scroll de la ventana, similar a lo que hace position: fixed;

La pizca de CSS:

#container {
     background: #333 url(tecla_neg.jpg) no-repeat fixed top;
     width: 600px;
     margin: 0 auto;
}
#header {
     background: #fff url(tecla_pos.jpg) no-repeat fixed top;
     height: 200px;
}
#content {
     width: 200px;
}

La propiedad background está resumida en una línea, pero desglosada sería de la siguiente manera:

background-color: #333;
background-image: url(tecla_neg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;

Ver ejemplo

Un detalle. No, mejor dos. No hubo caso de utilizar algún tributo de posicionamiento horizontal junto con background-attachment, o sea, sólo pude utilizar top o bottom, nada left ni right, y menos aún juntos. No me explico el porqué. Si quieren ponerlo hacia un lado, tendrían que hacer un background bien ancho cosa que lo cubra por completo en la horizontal. Segundo detalle… sí, oh sí. No funciona en IE6. ¡Qué maravilla!