Efeito CSS Sibling Fade: Tutorial de Design Web Interativo

Introdução

Neste laboratório, aprenderemos como implementar um efeito CSS chamado "Sibling Fade" (Desvanecimento de Irmãos). Este efeito permite que os elementos irmãos de um item em foco (hovered) desvaneçam, enquanto o item em foco permanece totalmente visível. Usaremos seletores CSS e transições para alcançar este efeito de forma simples e elegante. Ao final deste laboratório, você terá uma melhor compreensão de como usar CSS para criar conteúdo web dinâmico e interativo.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Sibling Fade (Desvanecimento de Irmãos)

index.html e style.css já foram fornecidos na VM (Máquina Virtual).

Para desvanecer os irmãos de um item em foco:

Anime as mudanças na opacity (opacidade) usando a propriedade transition (transição).

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

Mude a opacity de todos os elementos, exceto o que o mouse está sobre, para 0.5 usando os seletores de pseudo-classe :hover e :not.

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

Aqui está um exemplo 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>

Por favor, clique em 'Go Live' (Iniciar) no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Sibling Fade (Desvanecimento de Irmãos). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.