Ir directamente al contenido de esta página

Destacar y atenuar elementos simultáneamente con CSS3

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.

Como queríamos demostrar en nuestra demo [Firefox 9]

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.

Esta entrada se publicó el 11 de julio de 2012, se archivó en , y fue etiquetada como , . Autor: Saúl González Fernández. Aún no hay comentarios ›.

Comentarios

Aún no hay comentarios

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2017