Pointer-Events en CSS3

27/Jul/2012 80

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+

Links:

Comentarios

  1. Cat sample papers with solutions pdf free download [#]

    Quality artices or revirws is the important to interest the users to payy a
    visit the site, that’s what this web site is providing.

    http://ww5.co/forum/journal/cat-sample-papers-with-solutions-pdf-free-download.pdf
    Cat sample papers with solutions pdf free download https://truecraftbuilding.com/2006-scion-tc-manual-pdf.pdf

  2. Scottsnuro [#]

    https://zithromaxproff.com/# where can i get zithromax over the counter
    zithromax for sale us

  3. Bnqbfn [#]

    Astwsl – heading for a college essay Knxjpq csxhwd

  4. Gxyrnr [#]

    Eolmfl – professional essay writer Jgpjrb btcgph

  5. Nissan qashqai 2008 manual pdf [#]

    Fantastic goods from you, man. I’ve understand your stuff previous tto and youu are just too
    magnificent. I actually like wnat you have acquired here, really like what you are saying and the
    wway in which youu say it. You make it entertaining and you still care for
    to keep it smart. I can’t wait to readd much more from you.
    This is actually a tremendouss site.
    http://netfim.xyz/nissan-qashqai-2008-manual-pdf.pdf
    Nissan qashqai 2008 manyal pdf
    Plannjng document template https://www.frostdentalcare.com/simple-business-plan-sample-doc.pdf

  6. Scottsnuro [#]

    https://zithromaxproff.com/# buy zithromax without prescription online
    generic zithromax 500mg

  7. Dilfoi [#]

    Rmpyie – otc viagra united states Vkqzmo qecnvt

  8. Yfxpyi [#]

    stromectol prices – ivermectin 3mg pill ivermectin goodrx

  9. Cadoip [#]

    ivermectin 10 ml – ivermectin buy australia stromectol buy

  10. Untrjt [#]

    ivermectin 500ml – purchase oral ivermectin stromectol 6 mg tablet

  11. Eqpzej [#]

    stromectol buy uk – ivermectin price uk ivermectin buy canada

  12. chevy celebrity 1985 [#]

    hi!,I lovge your writing so so much! percentage we keep
    up a correspondence more approximately your post on AOL?
    I need an eexpert on this space to resolve my problem.
    May be that is you! Taking a look ahead to see you.
    https://toppdfchecklist.com/chevy-celebrity-1985.pdf
    chevycelebrity 1985
    toyota 34 fuel pressure regulator https://filemanualsearch.com/2007-400ex.pdf

  13. Amxnoa [#]

    buy stromectol – cost of stromectol stromectol

  14. Ukugpk [#]

    stromectol in canada – can you buy stromectol over the counter stromectol ireland

  15. Zzvcjt [#]

    stromectol tablet 3 mg – stromectol tab 3mg stromectol for humans

  16. AnthonyGlymn [#]

    generic viagra without a doctor prescription cost of viagra – how long does viagra last
    viagra 100mg

  17. Sbmlkj [#]

    ivermectin humans – ivermectin lotion 0.5 stromectol for sale

  18. AnthonyGlymn [#]

    online viagra generic viagra overnight – generic viagra overnight
    blue pill viagra

  19. Hltgkn [#]

    plavix 75mg clopidogrel – clopidogrel cost uk plavix in india

  20. AnthonyGlymn [#]

    viagra without prescription female viagra – buy generic viagra online
    viagra online

  21. gqecrkxjfr [#]

    Pointer-Events en CSS3 | CSSLab | Laboratorio de ideas web
    gqecrkxjfr http://www.gu393p6cf2tr85xpmry8gg3701t03j00s.org/
    [url=http://www.gu393p6cf2tr85xpmry8gg3701t03j00s.org/]ugqecrkxjfr[/url]
    agqecrkxjfr

  22. AnthonyGlymn [#]

    viagra without a doctor prescription usa cost of viagra – buy viagra online without a prescription
    buy viagra professional

  23. daolggk [#]

    oqQtRj ywacbiwkaohl, [url=http://gqhzfwfcwcla.com/]gqhzfwfcwcla[/url], [link=http://gkdyefequlld.com/]gkdyefequlld[/link], http://pqbyhnvayymz.com/

  24. Dnmbie [#]

    plavix 40 mg – plavix tablet 25 mg plavix price in india

  25. BradleyTonuh [#]

    safe buy cialis cialis original for sale – can i buy cialis in uk
    cheapest generic cialis australia

  26. Zratxo [#]

    jacked up ed pill – top five ed pills overcoming ed

  27. BradleyTonuh [#]

    buy cialis shipping canada generic cialis 20 mg tadalafil – buy cialis tadalafil uk
    buy cialis philippines

  28. Nydia [#]

    Everything is very open with a really clear clarification of tthe challenges.
    It wass really informative. Your site is useful. Many thanks
    for sharing!
    https://mkfinstitute.com
    Nydia
    Rudolph https://managerpdf.com

  29. BradleyTonuh [#]

    buy cialis online in canada buy cialis tadalafil0 with pay pal – can i buy cialis in uk
    where can u buy cialis

  30. Yhvcxt [#]

    nutrality ed pills reviews – snoop ed pills roman ed pills review

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab