Pointer-Events en CSS3
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).
Su soporte en browsers modernos es extenso: Firefox 3.6+, Chrome 4.0+, Safari 3.2+ y Android 2.1+
Links:
Sobre el Autor: Jorge Epuñan
Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.
