Destacar y atenuar elementos simultáneamente con CSS3

Explicamos cómo emplear la pseudoclase :not de CSS3 para lograr un efecto muy elegante de destacado y atenuación de elementos.


En algún blog nos hemos encontrado con un efecto my sutil, pero que nos ha parecido muy elegante: ver una lista de elementos como comentarios, tweets o entradas relacionadas, que al pasar el ratón por encima reaccionan oscureciendo el ítem que recibe el :hover, y atenuando los demás. En muchos casos se trata de un efecto de JavaScript, pero se puede obtener exclusivamente por medio de CSS3.

La idea es bien simple: si un usuario se sitúa sobre un elemento, oscurecemos su diseño y clareamos el de los relacionados. La función de JavaScript consiste exclusivamente en recorrer la lista de nodos a los que asignar la clase que los atenua. Pero eso lo podemos hacer en la hoja de estilo con un selector de nivel 3, la pseudoclase de negación :not.

Por medio de :not podemos indicar los elementos que expresamente no cumplan una condición, es decir:


li:hover{
  color:#000;
  -webkit-box-shadow:0 1px 5px 0 #000;
  -moz-box-shadow:0 1px 5px 0 #000;
  box-shadow:0 1px 5px 0 #000;
}

ul:hover li:not(:hover){
  opacity:.35;
  -webkit-box-shadow:0 1px 1px 0 #000;
  -moz-box-shadow:0 1px 1px 0 #000;
  box-shadow:0 1px 1px 0 #000;
}
 

El único aspecto poco intuitivo puede ser el primer :hover de la segunda declaración: no basta con li:not(:hover), puesto que esa sería la situación por defecto de cualquiera de los elementos antes de la interacción del usuario, y por tanto todos y cada uno aparecerían atenuados al cargar la página.

Como decíamos, es un efecto elegante con una implementación simple, y con un buen soporte. Nuestros favoritos.

Contrato diseño web
Menús desplegables animados con CSS3
Efectos javascript
Carrusel de imágenes con efecto de fundido (y en menos de 2Kb)
Outline y los bordes redondeados
Clientes
MapBox: una alternativa al mapa de Google
Destacar y atenuar elementos simultáneamente con CSS3




Dominio en Venta. Este dominio puede ser tuyo por 450 Euros. Haz Click