Simulando un efecto negativo

24/Mar/2008 226

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

SafariFirefoxInternet Explorer 7Opera

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!

Comentarios

  1. 29 dating 18 gay [#]

    dating sim gay serial killer https://datinggayservices.com/

  2. closet gay dating [#]

    top 5 gay dating sites https://gay-singles-dating.com/

  3. gay hiv positive dating uk [#]

    dating sites for gay singles https://gaydatingcanada.com/

  4. Gazcheedarap [#]

    sildenafil buy over the counter

  5. best gay pet lover dating site [#]

    steam gay dating sim https://gaydatinglosangeles.com/

  6. can humans take ivermectin paste [#]

    stromectol pille Simulando un efecto negativo | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin for humans for sale

  7. on quest bars [#]

    After looking into a number of the blog posts on your
    site, I seriously appreciate your way of writing
    a blog. I book marked it to my bookmark website list and
    will be checking back in the near future. Take a look at my web site too and let me know what you think.
    quest bars http://bit.ly/3jZgEA2 quest bars

  8. gay furry dating 2021 [#]

    french gay dating site https://dating-gaym.com/

  9. bisexual dating gay man [#]

    interracial gay dating https://gayedating.com/

  10. http://app.gumroad.com/asmr2021/p/best-asmr-online [#]

    Usually I don’t read post on blogs, but I would like to say that this write-up
    very compelled me to check out and do it! Your writing taste has been surprised
    me. Thanks, very great article. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  11. j.mp [#]

    I pay a visit everyday a few blogs and sites to read posts, however this website offers quality based posts.
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  12. gay dating sites 2021 [#]

    gay dating scene in seattle wa https://gayonlinedating.net/

  13. j.mp [#]

    I think the admin of this web page is really working hard in favor
    of his web page, because here every stuff is quality
    based stuff. cheap flights http://1704milesapart.tumblr.com/ cheap
    flights

  14. http://coub.com/stories/962966-scoliosis-surgery [#]

    I am not sure where you’re getting your info, but good topic.
    I needs to spend some time learning more or understanding more.

    Thanks for fantastic info I was looking for this information for my mission. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis
    surgery

  15. www.iherb.com [#]

    I’d like to find out more? I’d want to find out some
    additional information. quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  16. Adderrunc [#]

    https://buylasixshop.com/ – furosemide 40 mg without perscription

  17. zithromaxeska [#]

    zithromax zithromax instructions zithro

  18. blusiox [#]

    zithromax online

  19. walgreens sildenafil [#]

    I am extremely inspired together with your writing talents as smartly as with the format to your blog.

    Is this a paid topic or did you modify it your self? Anyway stay up the
    nice quality writing, it is uncommon to peer a nice weblog like this one nowadays.. http://www.deinformedvoters.org/aurogra-online

  20. hydroxychloroquine by state [#]

    Whats up this is kinda of off topic but I was
    wondering if blogs use WYSIWYG editors or if
    you have to manually code with HTML. I’m starting a blog soon but have no coding experience so
    I wanted to get guidance from someone with experience.
    Any help would be greatly appreciated! https://hhydroxychloroquine.com/

  21. Garcheedarap [#]

    buy prednisolone tablets for cats

  22. zyrtec allergy 10 mg dosage [#]

    cetirizine walmart – https://allergyd.com

  23. where to buy ivermectin pills for humans [#]

    ivermectin 5 mg https://stromectolforte.com/ ivermectin stromectol cost

  24. stromectolforte.com [#]

    stromectol http://stromectolforte.com/# side effects for ivermectin ivermectin pills 3mg

  25. bactrim antibiotic [#]

    cipro trimethoprim

  26. buymodafinilonline [#]

    modafinil schedule modafinil price

CSSLab