23 KiB

Raw Blame History Unescape Escape

Projeto Terrário Parte 2: Introdução ao CSS

Sketchnote por Tomomi Imura

Lembra como o seu terrário em HTML parecia bem básico? O CSS é onde transformamos essa estrutura simples em algo visualmente atraente.

Se o HTML é como construir a estrutura de uma casa, o CSS é tudo o que faz com que ela pareça um lar - as cores das paredes, a disposição dos móveis, a iluminação e como os cômodos se conectam. Pense em como o Palácio de Versalhes começou como um simples alojamento de caça, mas a atenção cuidadosa à decoração e ao layout o transformou em um dos edifícios mais magníficos do mundo.

Hoje, vamos transformar seu terrário de funcional para refinado. Você aprenderá a posicionar elementos com precisão, criar layouts que se adaptam a diferentes tamanhos de tela e adicionar o apelo visual que torna os sites envolventes.

Ao final desta lição, você verá como o uso estratégico do CSS pode melhorar dramaticamente o seu projeto. Vamos adicionar estilo ao seu terrário.

Questionário Pré-Aula

Questionário pré-aula

Começando com CSS

O CSS é frequentemente visto como apenas "deixar as coisas bonitas", mas ele tem um propósito muito mais amplo. O CSS é como ser o diretor de um filme - você controla não apenas como tudo parece, mas como se move, responde à interação e se adapta a diferentes situações.

O CSS moderno é incrivelmente poderoso. Você pode escrever código que ajusta automaticamente os layouts para celulares, tablets e computadores. Pode criar animações suaves que guiam a atenção dos usuários para onde é necessário. Os resultados podem ser impressionantes quando tudo funciona em conjunto.

💡 Dica Profissional: O CSS está em constante evolução com novos recursos e capacidades. Sempre verifique CanIUse.com para confirmar o suporte dos navegadores aos recursos mais recentes do CSS antes de usá-los em projetos de produção.

Aqui está o que vamos realizar nesta lição:

Criar um design visual completo para o seu terrário usando técnicas modernas de CSS
Explorar conceitos fundamentais como cascata, herança e seletores CSS
Implementar estratégias de posicionamento e layout responsivo
Construir o recipiente do terrário usando formas e estilos em CSS

Pré-requisito

Você deve ter concluído a estrutura HTML do seu terrário na lição anterior e tê-la pronta para ser estilizada.

📺 Recurso em Vídeo: Confira este vídeo tutorial útil

Configurando seu Arquivo CSS

Antes de começarmos a estilizar, precisamos conectar o CSS ao HTML. Essa conexão informa ao navegador onde encontrar as instruções de estilo para o nosso terrário.

Na pasta do seu terrário, crie um novo arquivo chamado style.css e, em seguida, vincule-o na seção <head> do seu documento HTML:

<link rel="stylesheet" href="./style.css" />

O que este código faz:

Cria uma conexão entre seus arquivos HTML e CSS
Informa ao navegador para carregar e aplicar os estilos do style.css
Usa o atributo rel="stylesheet" para especificar que este é um arquivo CSS
Referencia o caminho do arquivo com href="./style.css"

Entendendo a Cascata do CSS

Já se perguntou por que o CSS é chamado de "Folhas de Estilo em Cascata"? Os estilos descem como uma cascata e, às vezes, entram em conflito uns com os outros.

Considere como funcionam as estruturas de comando militar - uma ordem geral pode dizer "todas as tropas devem usar verde", mas uma ordem específica para sua unidade pode dizer "usem uniformes de gala azuis para a cerimônia". A instrução mais específica tem precedência. O CSS segue uma lógica semelhante, e entender essa hierarquia torna a depuração muito mais fácil.

Experimentando a Prioridade da Cascata

Vamos ver a cascata em ação criando um conflito de estilo. Primeiro, adicione um estilo inline à sua tag <h1>:

<h1 style="color: red">My Terrarium</h1>

O que este código faz:

Aplica uma cor vermelha diretamente ao elemento <h1> usando estilo inline
Usa o atributo style para incorporar CSS diretamente no HTML
Cria a regra de estilo de maior prioridade para este elemento específico

Em seguida, adicione esta regra ao seu arquivo style.css:

h1 {
  color: blue;
}

No exemplo acima, nós:

Definimos uma regra CSS que direciona todos os elementos <h1>
Definimos a cor do texto como azul usando uma folha de estilo externa
Criamos uma regra de prioridade mais baixa em comparação com os estilos inline

✅ Verificação de Conhecimento: Qual cor aparece no seu aplicativo web? Por que essa cor prevalece? Consegue pensar em cenários onde você gostaria de sobrescrever estilos?

💡 Ordem de Prioridade do CSS (da mais alta para a mais baixa):

Estilos inline (atributo style)

IDs (#meuId)

Classes (.minhaClasse) e atributos

Seletores de elementos (h1, div, p)

Padrões do navegador

Herança no CSS em Ação

A herança no CSS funciona como genética - elementos herdam certas propriedades de seus elementos pai. Se você definir a família de fontes no elemento body, todo o texto dentro usará automaticamente essa mesma fonte. É semelhante a como o queixo característico da família Habsburgo apareceu em várias gerações sem ser especificado para cada indivíduo.

No entanto, nem tudo é herdado. Estilos de texto como fontes e cores são herdados, mas propriedades de layout como margens e bordas não. Assim como os filhos podem herdar traços físicos, mas não as escolhas de moda dos pais.

Observando a Herança de Fontes

Vamos ver a herança em ação definindo uma família de fontes no elemento <body>:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Entendendo o que acontece aqui:

Define a família de fontes para toda a página ao direcionar o elemento <body>
Usa uma pilha de fontes com opções de fallback para melhor compatibilidade entre navegadores
Aplica fontes modernas do sistema que ficam ótimas em diferentes sistemas operacionais
Garante que todos os elementos filhos herdem essa fonte, a menos que sejam especificamente sobrescritos

Abra as ferramentas de desenvolvedor do seu navegador (F12), vá para a aba Elements e inspecione seu elemento <h1>. Você verá que ele herda a família de fontes do body:

✅ Hora de Experimentar: Tente definir outras propriedades herdáveis no <body>, como color, line-height ou text-align. O que acontece com o seu título e outros elementos?

📝 Propriedades Herdáveis Incluem: color, font-family, font-size, line-height, text-align, visibility

Propriedades Não Herdáveis Incluem: margin, padding, border, width, height, position

Dominando os Seletores CSS

Os seletores CSS são sua maneira de direcionar elementos específicos para estilização. Eles funcionam como dar direções precisas - em vez de dizer "a casa", você pode dizer "a casa azul com a porta vermelha na Rua Maple".

O CSS oferece diferentes maneiras de ser específico, e escolher o seletor certo é como escolher a ferramenta apropriada para a tarefa. Às vezes, você precisa estilizar todas as portas do bairro, e às vezes apenas uma porta específica.

Seletores de Elementos (Tags)

Os seletores de elementos direcionam elementos HTML pelo nome da tag. Eles são perfeitos para definir estilos básicos que se aplicam amplamente à sua página:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Entendendo esses estilos:

Define uma tipografia consistente em toda a página com o seletor body
Remove margens e preenchimentos padrão do navegador para maior controle
Estiliza todos os elementos de cabeçalho com cor, alinhamento e espaçamento
Usa unidades rem para tamanhos de fonte escaláveis e acessíveis

Embora os seletores de elementos funcionem bem para estilização geral, você precisará de seletores mais específicos para estilizar componentes individuais, como as plantas no seu terrário.

Seletores de ID para Elementos Únicos

Os seletores de ID usam o símbolo # e direcionam elementos com atributos id específicos. Como os IDs devem ser únicos em uma página, eles são perfeitos para estilizar elementos individuais e especiais, como nossos recipientes de plantas à esquerda e à direita.

Vamos criar o estilo para os recipientes laterais do nosso terrário, onde as plantas ficarão:

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

O que este código realiza:

Posiciona os recipientes nas extremidades esquerda e direita usando posicionamento absolute
Usa unidades vh (altura da janela de visualização) para uma altura responsiva que se adapta ao tamanho da tela
Aplica box-sizing: border-box para que o preenchimento seja incluído na largura total
Remove unidades px desnecessárias de valores zero para um código mais limpo
Define uma cor de fundo sutil que é mais agradável aos olhos do que o cinza forte

✅ Desafio de Qualidade do Código: Note como este CSS viola o princípio DRY (Don't Repeat Yourself). Você consegue refatorá-lo usando tanto um ID quanto uma classe?

Abordagem Melhorada:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

Seletores de Classe para Estilos Reutilizáveis

Os seletores de classe usam o símbolo . e são perfeitos quando você deseja aplicar os mesmos estilos a vários elementos. Ao contrário dos IDs, as classes podem ser reutilizadas em todo o seu HTML, tornando-as ideais para padrões de estilo consistentes.

No nosso terrário, cada planta precisa de um estilo semelhante, mas também de um posicionamento individual. Usaremos uma combinação de classes para estilos compartilhados e IDs para posicionamento único.

Aqui está a estrutura HTML para cada planta:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.br.png" />
</div>

Elementos principais explicados:

Usa class="plant-holder" para estilização consistente do contêiner em todas as plantas
Aplica class="plant" para estilização e comportamento compartilhados da imagem
Inclui id="plant1" exclusivo para posicionamento individual e interação com JavaScript
Fornece texto alternativo descritivo para acessibilidade de leitores de tela

Agora adicione esses estilos ao seu arquivo style.css:

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

Entendendo esses estilos:

Cria um posicionamento relativo para o suporte da planta para estabelecer um contexto de posicionamento
Define cada suporte de planta com 13% de altura, garantindo que todas as plantas caibam verticalmente sem rolagem
Desloca os suportes ligeiramente para a esquerda para centralizar melhor as plantas dentro de seus recipientes
Permite que as plantas escalem de forma responsiva com as propriedades max-width e max-height
Usa z-index para posicionar as plantas acima de outros elementos no terrário
Adiciona um efeito de hover sutil com transições em CSS para melhor interação do usuário

✅ Pensamento Crítico: Por que precisamos de ambos os seletores .plant-holder e .plant? O que aconteceria se tentássemos usar apenas um?

💡 Padrão de Design: O contêiner (.plant-holder) controla o layout e o posicionamento, enquanto o conteúdo (.plant) controla a aparência e o dimensionamento. Essa separação torna o código mais fácil de manter e flexível.

Entendendo o Posicionamento no CSS

O posicionamento no CSS é como ser o diretor de palco de uma peça - você direciona onde cada ator deve ficar e como eles devem se mover no palco. Alguns atores seguem a formação padrão, enquanto outros precisam de posicionamento específico para um efeito dramático.

Depois de entender o posicionamento, muitos desafios de layout se tornam gerenciáveis. Precisa de uma barra de navegação que fique no topo enquanto os usuários rolam? O posicionamento resolve isso. Quer um tooltip que apareça em um local específico? Isso também é feito com posicionamento.

Os Cinco Valores de Posicionamento

Valor de Posicionamento	Comportamento	Caso de Uso
`static`	Fluxo padrão, ignora top/left/right/bottom	Layout normal do documento
`relative`	Posicionado em relação à sua posição normal	Ajustes pequenos, criando contexto de posicionamento
`absolute`	Posicionado em relação ao ancestral posicionado mais próximo	Posicionamento preciso, sobreposições
`fixed`	Posicionado em relação à janela de visualização	Barras de navegação, elementos flutuantes
`sticky`	Alterna entre relativo e fixo com base na rolagem	Cabeçalhos que "grudam" ao rolar

Posicionando no Nosso Terrário

Nosso terrário usa uma combinação estratégica de tipos de posicionamento para criar o layout desejado:

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

Entendendo a estratégia de posicionamento:

Contêineres absolutos são removidos do fluxo normal do documento e fixados nas bordas da tela
Suportes de plantas relativos criam um contexto de posicionamento enquanto permanecem no fluxo do documento
Plantas absolutas podem ser posicionadas com precisão dentro de seus contêineres relativos
Essa combinação permite que as plantas sejam empilhadas verticalmente enquanto podem ser posicionadas individualmente

🎯 Por que isso é importante: Os elementos plant precisam de posicionamento absoluto para se tornarem arrastáveis na próxima lição. O posicionamento absoluto os remove do fluxo normal do layout, tornando possíveis as interações de arrastar e soltar.

✅ Hora de Experimentar: Tente alterar os valores de posicionamento e observe os resultados:

O que acontece se você mudar .container de absolute para relative?
Como o layout muda se .plant-holder usar absolute em vez de relative?
O que ocorre quando você altera .plant para posicionamento relative?

Construindo o Terrário com CSS

Agora vamos construir um jarro de vidro usando apenas CSS - sem imagens ou softwares gráficos.

Criar vidro realista, sombras e efeitos de profundidade usando posicionamento e transparência demonstra as capacidades visuais do CSS. Essa técnica reflete como arquitetos do movimento Bauhaus usavam formas geométricas simples para criar estruturas complexas e bonitas. Depois de entender esses princípios, você reconhecerá as técnicas de CSS por trás de muitos designs da web.

Criando os Componentes do Jarro de Vidro

Vamos construir o terrário em um pote peça por peça. Cada parte utiliza posicionamento absoluto e tamanhos baseados em porcentagem para um design responsivo:

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

Entendendo a construção do terrário:

Utiliza dimensões baseadas em porcentagem para escalonamento responsivo em todos os tamanhos de tela
Posiciona os elementos de forma absoluta para empilhá-los e alinhá-los com precisão
Aplica diferentes valores de opacidade para criar o efeito de transparência do vidro
Implementa camadas com z-index para que as plantas apareçam dentro do pote
Adiciona sombras sutis e bordas arredondadas refinadas para uma aparência mais realista

Design Responsivo com Porcentagens

Observe como todas as dimensões utilizam porcentagens em vez de valores fixos em pixels:

Por que isso é importante:

Garante que o terrário seja escalável proporcionalmente em qualquer tamanho de tela
Mantém as relações visuais entre os componentes do pote
Proporciona uma experiência consistente, desde celulares até grandes monitores de desktop
Permite que o design se adapte sem quebrar o layout visual

Unidades CSS em Ação

Estamos utilizando unidades rem para o border-radius, que são escaladas em relação ao tamanho da fonte raiz. Isso cria designs mais acessíveis que respeitam as preferências de fonte do usuário. Saiba mais sobre unidades relativas no CSS na especificação oficial.

✅ Experimente Visualmente: Tente modificar esses valores e observe os efeitos:

Altere a opacidade do pote de 0.5 para 0.8 – como isso afeta a aparência do vidro?
Ajuste a cor da terra de #3a241d para #8B4513 – qual é o impacto visual disso?
Modifique o z-index da terra para 2 – o que acontece com as camadas?

Desafio do GitHub Copilot Agent 🚀

Use o modo Agent para completar o seguinte desafio:

Descrição: Crie uma animação CSS que faça as plantas do terrário balançarem suavemente de um lado para o outro, simulando o efeito de uma brisa natural. Isso ajudará você a praticar animações CSS, transformações e keyframes, enquanto melhora o apelo visual do seu terrário.

Instrução: Adicione animações de keyframes CSS para fazer as plantas no terrário balançarem suavemente de um lado para o outro. Crie uma animação de balanço que gire levemente cada planta (2-3 graus) para a esquerda e para a direita com uma duração de 3-4 segundos, e aplique-a à classe .plant. Certifique-se de que a animação seja infinita e tenha uma função de easing para um movimento natural.

Saiba mais sobre o modo agent aqui.

🚀 Desafio: Adicionando Reflexos no Vidro

Pronto para melhorar seu terrário com reflexos realistas no vidro? Essa técnica adicionará profundidade e realismo ao design.

Você criará destaques sutis que simulam como a luz reflete nas superfícies de vidro. Essa abordagem é semelhante à usada por pintores renascentistas como Jan van Eyck, que utilizavam luz e reflexo para fazer o vidro pintado parecer tridimensional. Aqui está o que você deve fazer:

Seu desafio:

Crie formas ovais sutis, brancas ou de cores claras, para os reflexos no vidro
Posicione-as estrategicamente no lado esquerdo do pote
Aplique opacidade e efeitos de desfoque apropriados para reflexos de luz realistas
Use border-radius para criar formas orgânicas, semelhantes a bolhas
Experimente com gradientes ou sombras para um realismo aprimorado

Questionário Pós-Aula

Questionário pós-aula

Expanda Seu Conhecimento em CSS

CSS pode parecer complexo no início, mas entender esses conceitos básicos fornece uma base sólida para técnicas mais avançadas.

Próximas áreas de aprendizado em CSS:

Flexbox - simplifica o alinhamento e a distribuição de elementos
CSS Grid - oferece ferramentas poderosas para criar layouts complexos
Variáveis CSS - reduzem a repetição e melhoram a manutenção
Design responsivo - garante que os sites funcionem bem em diferentes tamanhos de tela

Recursos Interativos de Aprendizado

Pratique esses conceitos com esses jogos envolventes e interativos:

🐸 Flexbox Froggy - Domine o Flexbox através de desafios divertidos
🌱 Grid Garden - Aprenda CSS Grid cultivando cenouras virtuais
🎯 CSS Battle - Teste suas habilidades em CSS com desafios de codificação

Aprendizado Adicional

Para fundamentos abrangentes de CSS, complete este módulo do Microsoft Learn: Estilize seu app HTML com CSS

Tarefa

Refatoração de CSS

Aviso Legal:
Este documento foi traduzido usando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.

23 KiB Raw Blame History Unescape Escape