Tutorial de Diseño Web Interactivo: Efecto CSS Sibling Fade

Introducción

En este laboratorio, aprenderemos cómo implementar un efecto CSS llamado "Sibling Fade". Este efecto permite que los hermanos de un elemento sobre el que se pasa el cursor se desvanezcan, mientras que el elemento sobre el que se pasa el cursor permanece completamente visible. Utilizaremos selectores CSS y transiciones para lograr este efecto de manera simple y elegante. Al final de este laboratorio, tendrás una mejor comprensión de cómo utilizar CSS para crear contenido web dinámico e interactivo.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/transitions("Transitions") subgraph Lab Skills css/selectors -.-> lab-35240{{"Efecto CSS Sibling Fade"}} css/margin_and_padding -.-> lab-35240{{"Efecto CSS Sibling Fade"}} css/pseudo_classes -.-> lab-35240{{"Efecto CSS Sibling Fade"}} css/transitions -.-> lab-35240{{"Efecto CSS Sibling Fade"}} end

Sibling Fade

index.html y style.css ya se han proporcionado en la VM.

Para desvanecer a los hermanos de un elemento sobre el que se pasa el cursor:

Anima los cambios de opacidad utilizando la propiedad transition.

span {
  padding: 0 16px;
  transition: opacity 0.3s;
}

Cambia la opacidad de todos los elementos excepto el que el mouse está sobre a 0.5 utilizando los selectores pseudo-clase :hover y :not.

.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

Aquí hay un ejemplo de código HTML:

<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Sibling Fade. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.