Pointer-Events en CSS3

27/Jul/2012 294

Tonteando con una idea que tuve de un bookmarklet (una analogía gráfica que contamina visualmente un sitio web de la misma manera en que estamos contaminados quienes vivimos en grandes ciudades), tuve una epifanía y pude resolverla. La idea es crear una capa sobre todo el contenido del sitio: un <div> posicionado fijo, ancho y alto 100% y con un gradiente de color smog a transparente.

#smog {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: -moz-linear-gradient(top, rgba(140,127,86,0.85) 0%, rgba(140,127,86,0.4) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(140,127,86,0.85)), color-stop(100%,rgba(140,127,86,0.4)));
   background: -webkit-linear-gradient(top, rgba(140,127,86,0.85) 0%,rgba(140,127,86,0.4) 100%);
   background: -o-linear-gradient(top, rgba(140,127,86,0.85) 0%,rgba(140,127,86,0.4) 100%);
   background: -ms-linear-gradient(top, rgba(140,127,86,0.85) 0%,rgba(140,127,86,0.4) 100%);
   background: linear-gradient(top, rgba(140,127,86,0.85) 0%,rgba(140,127,86,0.4) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d98c7f56",endcolorstr="#668c7f56",gradienttype="0");

Todo normal, es como si fuera un overlay de una ventana modal común y corriente, la que tapa todo lo que esté detrás y no deja que interactúes con nada más que el nuevo contenido levantado. Pero mi idea es que esta capa, aunque estuviera sobre, pudieras seguir utilizando el sitio y los enlaces normalmente. Ante esta duda, investigué y CSS3 trae una nueva propiedad que hace precisamente esto que necesitaba:

#smog {
   pointer-events: none;

Con esta propiedad todos los elementos que estén bajo el nuevo creado, y que estén de alguna manera tapados por el mismo (sea un elementos con background de color sólido, gradiente ó imagen) podrán ser accedidos (como enlace ó selección).

Ver ejemplo

Su soporte en browsers modernos es extenso: Firefox 3.6+, Chrome 4.0+, Safari 3.2+ y Android 2.1+



  1. PatrickFax [#]

    generic cialis cialis coupon

  2. hydroxychloroquineMt [#]

    plaquinol how to get hydroxychloroquine dolquine

  3. ivermectin1.com [#]

    stromectol for humans Pointer-Events en CSS3 | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin for humans

  4. how to best use tadalafil [#]

    This site truly has all the information I needed concerning this subject and didn’t know who to ask. https://tadalafili.com/

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

    Pretty! This was an incredibly wonderful article.
    Thank you for supplying this info. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  6. quest bars with [#]

    WOW just what I was searching for. Came here by searching
    for with quest bars http://bit.ly/3jZgEA2 quest bars

  7. ivermectin1.com [#]

    ivermectin 10 ml Pointer-Events en CSS3 | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ where can you buy ivermectin pills

  8. ivermectin1.com [#]

    koupit ivermectin nz Pointer-Events en CSS3 | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ where to buy legitamate ivermectin

  9. cialis alternative [#]

    generic cialis https://cialiswithdapoxetine.com/

  10. sex doll shopping [#]

    I have read some good stuff here. Definitely worth bookmarking for revisiting. I wonder how much effort you put to make such a great informative website.

  11. http://bitly.com/ [#]

    There is certainly a lot to know about this subject.
    I really like all the points you’ve made. scoliosis surgery
    https://0401mm.tumblr.com/ scoliosis surgery

  12. hydroxychloroquineMt [#]

    hydroxychloroquine tablets hydroxychloroquine coronavirus hydroxychloroquine treats what

  13. cialis online [#]

    https://cialiswithdapoxetine.com/ cheap cialis

  14. j.mp [#]

    It is perfect time to make some plans for the future and it’s time to be happy.
    I’ve read this post and if I could I want to suggest you few interesting things or suggestions.

    Perhaps you can write next articles referring to this article.
    I desire to read even more things about it! cheap flights http://1704milesapart.tumblr.com/ cheap

  15. HenryUnfiP [#]

    gay preppy dating site
    why is gay dating so difficult
    gay firefighter dating

  16. buy cialis usa [#]

    cialis generic cialis 20mg

  17. http://www.iherb.com/search?kw=questbars [#]

    Hello, this weekend is pleasant in favor of me, since this occasion i am reading this
    great informative paragraph here at my house. quest bars https://www.iherb.com/search?kw=quest%20bars quest

  18. coub.com [#]

    Hey there! This is kind of off topic but I need some
    guidance from an established blog. Is it very difficult
    to set up your own blog? I’m not very techincal but I
    can figure things out pretty fast. I’m thinking about setting
    up my own but I’m not sure where to start. Do you have any tips or suggestions?
    With thanks scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  19. HenryUnfiP [#]

    hornet gay dating
    best gay dating
    gay man dating service

  20. zithromaxeska [#]

    zithromax 250 mg tablet zithromax how to take zithromax medication

  21. zithromaxeska [#]

    zithromax 500 mg side effects zithromax 500 mg zed herb products

  22. allegra coupon [#]

    cetirizine vs benadryl – http://allergyd.com

  23. jdtfdddxt [#]

    fBPayb yyzbnupsnvef, [url=http://yvsrhwcjtcek.com/]yvsrhwcjtcek[/url], [link=http://dqqppbanpfxg.com/]dqqppbanpfxg[/link], http://tzfuyvhidxdd.com/

  24. lnqufp [#]

    LstQv6 werkspxptvpf, [url=http://mumznmrvhczv.com/]mumznmrvhczv[/url], [link=http://hvflzekytyzi.com/]hvflzekytyzi[/link], http://tuunfowkhofi.com/

  25. cetirizine costco [#]

    children’s zyrtec – https://allergyd.com

  26. zyrtec dosing [#]

    prescription strength zyrtec 20 mg – http://allergyd.com

  27. prednisolonedosage [#]

    steroids prednisone https://prednisoloneacetateophthalmic.com/

  28. isotretinoin [#]

    accutane accutane side effects

  29. modafinilforsale [#]

    provigil for depression modafinil 200mg

  30. bactrim ds [#]

    Can I drink alcohol while taking sulfamethoxazole / trimethoprim DS tablets? trimethoprim side effects

  31. pharmaceptica.com [#]

    sildenafil tablets online australia https://pharmaceptica.com/

  32. prednisolona [#]

    what is prednisone prescribed for prednisone no prescription

  33. modafinilwarnings [#]

    https://modafinilpleasure.com/ provigil prescription

  34. bactrim dosage [#]

    trimethoprim side effects bactrim ds

  35. stromectolforte.com [#]

    ivermectin predaj https://stromectolforte.com/ ivermectin dosage by weight ivermectin tablets for sale walmart

  36. cheap cialis [#]

    cialis 20 mg generic cialis

  37. www.pharmaceptica.com [#]

    online doctor erectile dysfunction https://www.pharmaceptica.com/

  38. ivermektin tabletter storbritannien [#]

    stromectol canada http://stromectolforte.com/ ivermectin ivermectin horse paste for sale

  39. provigilsideeffects [#]

    modafinil smart drug modafinil vs adderall

  40. buy ivermectin online canada [#]

    stromectol order online http://stromectolforte.com/# ivermectin for humans ivermektiini otc

  41. adult doll [#]

    I’ve learn several good stuff here. Definitely worth bookmarking for revisiting. I surprise how so much attempt you put to make the sort of excellent informative site. love doll https://sexdollsoff.com/

  42. drineevqyc [#]

    accutane how does accutane work

  43. GustavoVet [#]

    essay writing service reviews
    cheap essay writers

  44. drineecrqj [#]

    how to get modafinil modafinil half life