9.1 Melhorando a interatividade com pseudo-classes
As pseudo-classes e pseudo-elementos no CSS são ferramentas poderosas para melhorar o design e a experiência do usuário (UX) nas páginas da web. Com eles, dá para criar elementos interativos e dinâmicos, melhorar a percepção visual e aumentar a acessibilidade.
Vamos dar uma olhada em alguns exemplos de como usar pseudo-classes e pseudo-elementos para esses objetivos.
1. Passando o cursor
A pseudo-classe :hover permite mudar o estilo de um elemento quando o usuário passa o cursor por cima. Isso é especialmente útil para botões e links.
Exemplo: Mudando a cor do botão ao passar o cursor
Neste exemplo, a cor de fundo do botão muda ao passar o cursor, o que melhora o feedback visual e deixa a interface mais interativa:
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
<button>Click Me</button>
2. Foco no elemento
A pseudo-classe :focus é usada para estilizar elementos de formulário quando estão em foco.
Isso ajuda os usuários a verem qual elemento do formulário estão preenchendo no momento.
Exemplo: Estilizando o campo de entrada ao focar
Neste exemplo, o campo de entrada ganha uma borda azul e sombra ao focar, melhorando a visibilidade do elemento ativo do formulário:
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
}
input[type="text"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
<input type="text">
3. Estado ativo do elemento
A pseudo-classe :active é aplicada a um elemento no momento de sua ativação (por exemplo, ao clicar com o mouse).
Exemplo: Estilizando o botão no momento do clique
Neste exemplo, o botão diminui levemente e muda de cor ao clicar, criando um efeito de clique:
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
<button>Click Me</button>
9.2 Aprimorando a percepção visual com pseudo-elementos
4. Adicionando conteúdo: ::before e ::after
Os pseudo-elementos ::before e ::after permitem adicionar conteúdo antes e depois de um elemento, sem alterar o código HTML.
Exemplo: Adicionando um ícone antes de um link
Neste exemplo, um ícone é adicionado antes do texto do link, melhorando a percepção visual e indicando aos usuários que se trata de um link:
a::before {
content: "🔗";
margin-right: 5px;
}
<a href="#">Here</a>
Exemplo: Adicionando um elemento decorativo após um parágrafo
Neste exemplo, um elemento decorativo é adicionado após o parágrafo, melhorando o visual da página:
p::after {
content: "❦";
display: block;
text-align: right;
color: #e74c3c;
}
<p>Content</p>
5. Estilizando a primeira letra e linha: ::first-letter e ::first-line
Os pseudo-elementos ::first-letter e ::first-line permitem estilizar a primeira letra e
a primeira linha de texto, criando efeitos tipográficos.
Exemplo: Estilizando a primeira letra do parágrafo
Neste exemplo, a primeira letra do parágrafo é aumentada e colorida de azul, criando o efeito de "primeira letra embutida", comumente utilizado em design de revistas:
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
<p>Content</p>
Exemplo: Estilizando a primeira linha do parágrafo
Neste exemplo, a primeira linha do parágrafo é destacada em negrito e verde, melhorando a legibilidade do texto:
p::first-line {
font-weight: bold;
color: #2ecc71;
}
<p>Content</p>
9.3 Melhorando a acessibilidade com pseudo-classes e pseudo-elementos
6. Estado dos elementos de formulário
As pseudo-classes de formulário permitem estilizar os elementos conforme seu estado, melhorando a acessibilidade e a interface do usuário.
Exemplo: Estilizando checkbox selecionado
Neste exemplo, o checkbox selecionado fica com cor verde, melhorando o feedback visual:
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
<input type="checkbox" checked>
Exemplo: Estilizando campo de entrada desativado
Neste exemplo, o campo de entrada desativado ganha fundo cinza claro e texto cinza, mostrando visualmente sua indisponibilidade:
input:disabled {
background-color: #f0f0f0;
color: #999;
}
<input type="text" disabled>
Exemplo: Estilizando campo de entrada incorreto
Neste exemplo, o campo de entrada incorreto ganha uma borda vermelha, ajudando os usuários a identificarem erros ao inserir dados:
input:invalid {
border-color: #e74c3c;
}
<input type="text">
9.4 Exemplo de implementação completa
/* Adicionando ícone antes do link */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Estilizando a primeira letra do parágrafo ao passar o cursor */
p:hover::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
}
/* Estilizando botão */
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
/* Estilizando campo de entrada ao focar */
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
/* Estilizando checkbox selecionado */
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
/* Estilizando campo de entrada desativado */
input:disabled {
background-color: #f0f0f0;
color: #999;
}
/* Estilizando campo de entrada incorreto */
input:invalid {
border-color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplos de uso de pseudo-classes e pseudo-elementos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Link com ícone</a>
<p>Passe o cursor sobre este parágrafo para ver o efeito na primeira letra.</p>
<button>Botão</button>
<form>
<label>
Digite o texto:
<input type="text" required>
</label>
<br>
<label>
Digite o email:
<input type="email" required>
</label>
<br>
<label>
<input type="checkbox" checked> Checkbox
</label>
<br>
<button type="submit">Enviar</button>
<button type="button" disabled>Botão desativado</button>
</form>
</body>
</html>
As pseudo-classes e pseudo-elementos oferecem ferramentas poderosas para melhorar o design e a experiência do usuário nas páginas da web. Usá-los permite criar elementos interativos e dinâmicos, melhorar a percepção visual, aumentar a acessibilidade e tornar as interfaces mais amigáveis e agradáveis para os usuários.
Compreender e aplicar corretamente essas ferramentas abre uma infinidade de possibilidades para criar designs web modernos e eficientes.
GO TO FULL VERSION