Introdução
Neste laboratório, você explorará a poderosa propriedade CSS box-shadow e aprenderá como criar efeitos de sombra visualmente atraentes para elementos web. Através de uma abordagem passo a passo, você entenderá a sintaxe fundamental das sombras de caixa, aplicará técnicas de sombra básicas e avançadas e descobrirá como personalizar as propriedades da sombra para aprimorar a profundidade e o interesse visual dos elementos HTML.
O laboratório cobre conceitos-chave, como entender a sintaxe da sombra de caixa, aplicar sombras a diferentes formas, experimentar com deslocamento (offset), raio de desfoque (blur radius) e variações de cor. Ao final deste laboratório, você terá habilidades práticas na criação de sombras com aparência profissional que podem transformar a apresentação visual de designs web, adicionando profundidade sutil e dimensionalidade às suas interfaces de usuário.
Entenda a Sintaxe de Box Shadow
Nesta etapa, você aprenderá a sintaxe fundamental das sombras de caixa CSS e como elas podem adicionar profundidade e interesse visual aos elementos web. A propriedade box-shadow é um recurso CSS poderoso que permite criar efeitos de sombra para elementos HTML.
Vamos começar criando um novo arquivo HTML para explorar a sintaxe da sombra de caixa. Abra o WebIDE e crie um arquivo chamado index.html no diretório ~/project.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Box Shadow Syntax</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
/* Basic box-shadow syntax */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Vamos detalhar a sintaxe da sombra de caixa:
5px: Deslocamento horizontal (move a sombra para a direita)5px: Deslocamento vertical (move a sombra para baixo)10px: Raio de desfoque (suaviza a sombra)rgba(0, 0, 0, 0.3): Cor da sombra com transparência
A sintaxe básica é: box-shadow: [deslocamento horizontal] [deslocamento vertical] [raio de desfoque] [cor]
Exemplo de saída da caixa renderizada com sombra:
+------------------------+
| |
| [Caixa Cinza com |
| Sombra Suave] |
| |
+------------------------+
Pontos-chave para lembrar:
- Valores de deslocamento positivos movem a sombra para a direita e para baixo
- Valores de deslocamento negativos movem a sombra para a esquerda e para cima
- O raio de desfoque suaviza as bordas da sombra
- Você pode usar nomes de cores, valores hexadecimais, RGB ou RGBA
Aplicar Box Shadow Básico a uma Div
Nesta etapa, você aprenderá como aplicar uma sombra de caixa básica a um elemento div, construindo sobre a sintaxe que você aprendeu na etapa anterior. Modificaremos o arquivo HTML existente para demonstrar diferentes efeitos de sombra.
Abra o arquivo index.html no WebIDE e atualize seu conteúdo com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basic Box Shadow</title>
<style>
.container {
display: flex;
justify-content: space-around;
padding: 50px;
}
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin: 20px;
}
/* Light shadow */
.light-shadow {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
/* Darker shadow */
.dark-shadow {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="box light-shadow"></div>
<div class="box dark-shadow"></div>
</div>
</body>
</html>
Vamos detalhar a aplicação da sombra de caixa:
Criamos dois elementos div com diferentes intensidades de sombra
.light-shadowusa uma sombra sutil com:- 5px de deslocamento horizontal
- 5px de deslocamento vertical
- 10px de raio de desfoque
- Cor preta clara com 20% de opacidade
.dark-shadowusa uma sombra mais pronunciada com:- 10px de deslocamento horizontal
- 10px de deslocamento vertical
- 15px de raio de desfoque
- Cor preta mais escura com 50% de opacidade
Exemplo de saída visual:
+------------------------+------------------------+
| | |
| [Caixa com Sombra Clara] | [Caixa com Sombra Escura] |
| | |
+------------------------+------------------------+
Observações chave:
- Aumentar os valores de deslocamento move a sombra mais longe do elemento
- Aumentar o raio de desfoque torna a sombra mais suave
- Ajustar a opacidade altera a intensidade da sombra
Personalizar as Propriedades de Box Shadow
Nesta etapa, você explorará opções avançadas de personalização para sombras de caixa, incluindo sombras internas (inset shadows), raio de espalhamento (spread radius) e variações de cor. Atualizaremos o arquivo index.html para demonstrar essas propriedades avançadas.
Abra o arquivo index.html no WebIDE e substitua seu conteúdo pelo seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Customized Box Shadows</title>
<style>
.container {
display: flex;
justify-content: space-around;
padding: 50px;
}
.box {
width: 200px;
height: 200px;
margin: 20px;
background-color: #f0f0f0;
}
/* Inset shadow */
.inset-shadow {
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
}
/* Spread radius */
.spread-shadow {
box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
}
/* Colored shadow */
.colored-shadow {
box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="container">
<div class="box inset-shadow"></div>
<div class="box spread-shadow"></div>
<div class="box colored-shadow"></div>
</div>
</body>
</html>
Vamos explorar as novas personalizações da sombra de caixa:
Sombra Interna (Inset Shadow):
- Usa a palavra-chave
insetpara criar uma sombra interna - Dá o efeito do elemento sendo pressionado ou indentado
- Sintaxe:
box-shadow: inset [deslocamento horizontal] [deslocamento vertical] [raio de desfoque] [cor]
- Usa a palavra-chave
Raio de Espalhamento (Spread Radius):
- Adiciona um valor adicional para expandir a sombra
- O quarto valor numérico controla o espalhamento da sombra
- No exemplo, o espalhamento de
10pxcria uma borda de sombra com tonalidade azul
Sombra Colorida:
- Use RGBA para criar sombras coloridas com transparência
- O exemplo usa uma sombra vermelha com 40% de opacidade
Exemplo de saída visual:
+------------------------+------------------------+------------------------+
| | | |
| [Caixa com Sombra Interna] | [Caixa com Sombra de Espalhamento] | [Caixa com Sombra Colorida] |
| | | |
+------------------------+------------------------+------------------------+
Pontos-chave:
insetcria uma sombra interna- O raio de espalhamento expande a sombra
- Use RGBA para sombras coloridas e transparentes
Criar um Elemento Circular com Sombra
Nesta etapa, você aprenderá como criar um elemento circular com uma sombra de caixa usando as propriedades CSS border-radius e box-shadow. Abra o arquivo index.html no WebIDE e atualize seu conteúdo com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Circular Element with Shadow</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.circular-element {
width: 200px;
height: 200px;
background-color: #ffffff;
/* Create circular shape */
border-radius: 50%;
/* Add box shadow */
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.2),
0 6px 6px rgba(0, 0, 0, 0.15);
/* Center content */
display: flex;
justify-content: center;
align-items: center;
/* Optional: add text */
font-family: Arial, sans-serif;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="circular-element">Circular Shadow</div>
</div>
</body>
</html>
Técnicas chave para criar um elemento circular com sombra:
Forma Circular:
- Use
border-radius: 50%para criar um círculo perfeito - Certifique-se de que a largura e a altura sejam iguais
- Use
Sombra de Caixa:
- Primeira sombra:
0 10px 20px rgba(0, 0, 0, 0.2)- Deslocamento vertical de 10px
- Raio de desfoque de 20px
- Cor preta suave com 20% de opacidade
- Segunda sombra:
0 6px 6px rgba(0, 0, 0, 0.15)- Adiciona profundidade com uma sombra mais próxima e suave
- Primeira sombra:
Exemplo de saída visual:
+------------------------+
| |
| [Elemento Circular |
| com Sombra Suave] |
| |
+------------------------+
Pontos-chave:
border-radius: 50%cria um círculo perfeito- Múltiplas sombras de caixa podem criar profundidade
- Ajuste a opacidade e o desfoque para o efeito desejado
Experimentar com Múltiplos Efeitos de Sombra
Nesta etapa, você explorará técnicas avançadas para criar efeitos de sombra complexos usando múltiplas sombras de caixa. Abra o arquivo index.html no WebIDE e atualize seu conteúdo com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Shadow Effects</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.card {
width: 300px;
height: 400px;
background-color: white;
border-radius: 10px;
/* Multiple shadow effect */
box-shadow:
/* Outer shadow */
0 10px 20px rgba(0, 0, 0, 0.1),
/* Inner shadow */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
/* Colored accent shadow */ 0 15px 25px rgba(0, 123, 255, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
inset 0 -5px 10px rgba(0, 0, 0, 0.1),
0 20px 35px rgba(0, 123, 255, 0.3);
}
</style>
</head>
<body>
<div class="card">
<h2>Shadow Experiment</h2>
<p>Hover to see shadow effect!</p>
</div>
</body>
</html>
Técnicas chave para múltiplos efeitos de sombra:
Sombras em Camadas:
- Primeira sombra: Sombra externa suave
- Segunda sombra: Sombra interna sutil
- Terceira sombra: Sombra de destaque colorida
Composição da Sombra:
0 10px 20px rgba(0, 0, 0, 0.1): Sombra externa suaveinset 0 -5px 10px rgba(0, 0, 0, 0.05): Sombra interna sutil0 15px 25px rgba(0, 123, 255, 0.2): Sombra de destaque azul
Efeito Hover:
- Aumente a intensidade da sombra ao passar o mouse
- Adicione transformação de escala para uma sensação interativa
Exemplo de saída visual:
+------------------------+
| |
| [Cartão com Efeitos |
| de Sombra Complexos] |
| |
+------------------------+
Pontos-chave:
- Combine múltiplas sombras para profundidade
- Use
insetpara sombras internas - Crie efeitos interativos com hover
Resumo
Neste laboratório, os participantes exploram a poderosa propriedade CSS box-shadow para criar profundidade e dimensão visualmente atraentes para elementos web. Ao aprender a sintaxe fundamental das sombras de caixa, os alunos descobrem como aplicar efeitos de sombra usando deslocamentos horizontais e verticais, raio de desfoque e parâmetros de cor, permitindo que aprimorem o design visual dos elementos HTML.
O laboratório guia os alunos por exercícios práticos, incluindo a criação de sombras de caixa básicas, a personalização das propriedades de sombra e a experimentação com múltiplos efeitos de sombra. Os participantes obterão experiência prática na manipulação de características de sombra, como direção de deslocamento, intensidade de desfoque e transparência de cor, o que pode melhorar significativamente a estética e a hierarquia visual dos componentes da página web.
