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.
La propiedad outline dibuja alrededor de un elemento una línea a modo de marco que puede emplearse como un segundo borde a efectos de estilo. Sin embargo, esta línea no sigue el contorno de dicho elemento si a éste se le asigna un radio de borde para redondear las esquinas. En esta entrada muestro un par de soluciones a este pe
No hace tanto, explicábamos cómo habíamos vuelto flexible un plugin de jQuery que consiste en un carrusel de imágenes. En esta entrada mostramos una versión que hemos programado desde cero, con un efecto diferente y que no depende de ninguna librería. El carrusel de imágenes no sólo es un e
Los menús desplegables son una interfaz de navegación muy común. Hasta ahora con CSS podíamos hacer que los vínculos de las subsecciones aparecieran sin necesidad de JavaScript, pero si queríamos hacer que el efecto de dicha aparición fuera progresivo, no nos quedaba más opción que prog