Deconstruct no DevTools
Abra sites que admira e inspecione cada elemento. Veja margins, paddings reais, qual fonte está sendo usada, como o grid foi montado.
Cada seção abaixo demonstra na prática os conceitos das Fases 0–4. Inspecione com o DevTools enquanto lê.
Todo elemento é uma caixa com content → padding → border → margin.
O box-sizing: border-box faz padding e border entrarem na largura total.
block, inline, flex, grid…
Distribuição em uma dimensão (linha ou coluna). Controla alinhamento, ordem e crescimento dos filhos com propriedades do pai e do filho.
display: flex (row padrão)
justify-content: space-between
flex-grow: 1 no item do meio
flex-direction: column
Distribuição em duas dimensões. Grid é a ferramenta certa quando você precisa controlar linhas e colunas ao mesmo tempo — layouts de página, cards, dashboards.
O padrão da indústria. Cada item declara quantas colunas ocupa com grid-column: span N. Fácil de escalar e de entender em equipe.
Com grid-column: start / end e grid-row você posiciona cada item exatamente onde quer — inclusive sobrepondo células ou criando items que cruzam linhas e colunas.
grid-template-areas mapeia o layout visualmente no CSS com nomes. Cada item recebe grid-area: nome. Facilita muito a leitura e a manutenção.
Ambos criam quantas colunas couberem no espaço. A diferença: auto-fill mantém colunas vazias; auto-fit colapsa colunas vazias e distribui o espaço entre os itens existentes.
auto-fill — colunas vazias persistem
auto-fit — itens crescem para preencher
auto-fill quando você quer manter a grade consistente mesmo com poucos itens (ex: galeria com espaços reservados). Use auto-fit quando você quer que poucos itens se expandam para ocupar toda a largura disponível (ex: menu de navegação, cards de destaque).
Existem três abordagens principais para grids responsivos — cada uma resolve um problema diferente.
O padrão mais poderoso: repeat(auto-fill, minmax(MIN, 1fr)). O grid calcula automaticamente quantas colunas cabem. Arraste a caixa abaixo para ver ao vivo.
← arraste para redimensionar
Controle preciso por breakpoint. Você define exatamente o layout de cada tamanho de tela. Mais verboso, mas mais previsível para layouts complexos.
Redefina grid-template-areas nos breakpoints para reorganizar o layout por completo — sem mover o HTML. A sidebar vai para baixo do main no mobile.
Ao invés de responder à viewport, o grid responde ao tamanho do seu container pai. Perfeito para componentes reutilizáveis em contextos variados.
Clique num breakpoint para ver como o layout se reorganiza. Cada um troca o grid-template-columns e o grid-template-areas.
1 coluna — todo conteúdo empilhado verticalmente
min-width. O CSS base fica menor e a performance em mobile é melhor.
fr distribui o espaço disponível após o gap. Com % você precisa subtrair o gap manualmente — frágil e verboso.
gap para espaçamento interno da grade. Reserve margin para espaçamento externo do componente inteiro — mais limpo e sem efeitos colaterais.
grid-template-columns: subgrid faz um filho participar da grade do avô. Perfeito para alinhar colunas de cards diferentes sem coordenação manual.
Pairing de fontes, hierarquia com clamp() e ritmo vertical
via line-height e letter-spacing.
Display serif com personalidade editorial. Perfeita para títulos que precisam de caráter e elegância clássica. Combine com uma sans limpa no corpo.
Sans-serif geométrica e legível. Funciona excelente em tamanhos pequenos e longos parágrafos. Traz modernidade ao par serif + sans.
Custom Properties com modelo HSL, gradientes linear, radial e conic,
pseudo-elementos ::before / ::after e aspect-ratio.
CSS tem três funções de gradient nativos — linear-gradient, radial-gradient e
conic-gradient — além das variantes repeating-*. Todos podem ser combinados em camadas.
Cria uma transição em linha reta. Você define o ângulo (ou direção) e os color stops.
Use to right, to bottom, to top left etc. para direções simples.
0deg = de baixo pra cima. 90deg = da esquerda pra direita. 135deg = diagonal.
Quando dois stops têm a mesma posição, a transição é instantânea — útil para padrões e listras.
Irradia a partir de um ponto de origem. Pode ser círculo ou elipse, e o centro é configurável.
A forma padrão quando largura ≠ altura é ellipse. Use circle para forçar proporção igual.
at X% Y% move o centro do gradiente. Ótimo para efeitos de luz vindos de um canto.
Empilhe vários radial-gradient separados por vírgula. A primeira camada fica na frente.
Gira os stops em torno de um ângulo (como um relógio). Perfeito para gráficos de pizza e efeitos rotativos.
Sem especificar graus, os stops se distribuem igualmente ao longo dos 360°.
Defina os stops com valores em deg. Hard stops criam fatias sem transição.
from Ndeg rotaciona o ponto de partida. at X% Y% move o centro.
Repete o padrão de stops infinitamente. Ideal para texturas, listras e grades.
O padrão se repete automaticamente. O tamanho do ciclo é definido pela posição do último stop.
Cria anéis concêntricos. O raio do último stop define o espaçamento entre cada anel.
Qualquer combinação de gradients pode ser empilhada. Use transparent para deixar as camadas inferiores aparecerem.
Clique para ver como o número e posição dos stops afeta o gradient.
background-image ou a shorthand background.
background-size e background-position funcionam em gradients normalmente.
hsl(H S% L% / alpha) para transparência sem precisar de rgba().
background-clip: text + -webkit-text-fill-color: transparent.
Escolher a unidade certa é tão importante quanto escolher o valor. Cada unidade tem um contexto ideal — misturá-las sem critério é uma das causas mais comuns de layouts quebrando em telas diferentes.
| Unidade | Nome | Como funciona |
|---|---|---|
| Absolutas | ||
| px | Pixel | 1 pixel de tela (em telas retina, o browser escala internamente). Único valor verdadeiramente fixo — use para bordas, shadows e valores que nunca devem escalar. |
| Relativas à fonte | ||
| rem | Root em | Relativo ao font-size do elemento html (padrão: 16px). Prefira para tamanhos de fonte e espaçamentos — respeita as preferências de acessibilidade do usuário. |
| em | Em | Relativo ao font-size do elemento pai imediato. Pode cascatear e se multiplicar. Use com cuidado — útil para padding interno de botões que deve escalar junto com o texto. |
| ch | Character | Largura do caractere "0" na fonte atual. Excelente para definir a largura máxima de parágrafos: max-width: 65ch garante uma linha de leitura confortável em qualquer tamanho de fonte. |
| ex | X-height | Altura da letra "x" minúscula. Raramente usado diretamente, mas útil para alinhamentos tipográficos precisos. |
| Relativas à viewport | ||
| vw | Viewport width | 1% da largura da janela. 100vw = largura total. Use em títulos fluidos (font-size: 5vw) e seções full-width. Cuidado: inclui a barra de rolagem. |
| vh | Viewport height | 1% da altura da janela. 100vh em mobile pode incluir a barra de endereço do browser, causando overflow. Para telas mobile, prefira dvh. |
| dvh | Dynamic viewport height | Moderno. Atualiza dinamicamente quando a barra de endereço mobile aparece/some. Substitui vh em hero sections e layouts full-screen em mobile. |
| svh | Small viewport height | Sempre usa o menor valor possível da viewport (com barra de endereço visível). Garante que o conteúdo caiba sem overflow mesmo no pior caso. |
| lvh | Large viewport height | Sempre usa o maior valor possível (barra de endereço escondida). Bom para animações e overlays que precisam cobrir a tela inteira. |
| vmin | Viewport min | 1% do menor entre largura e altura. Útil para elementos que precisam ser proporcionais à menor dimensão da tela. |
| vmax | Viewport max | 1% do maior entre largura e altura. Menos comum, mas útil para backgrounds e overlays que precisam cobrir toda a tela independente da orientação. |
| Grid e flex | ||
| fr | Fraction | Distribui o espaço disponível após subtrair gaps e tamanhos fixos. 1fr 2fr divide em 1/3 e 2/3. Exclusiva de grid-template-columns/rows. |
| Relativas ao container | ||
| cqi | Container query inline | Moderno. 1% da largura do container pai (requer container-type). Parte das Container Queries — o futuro do design responsivo baseado em componente. |
| Funções que usam unidades | ||
| clamp() | Min / ideal / max | clamp(1rem, 2.5vw, 2rem) — define um valor mínimo, um ideal fluido e um máximo. Fundamental para tipografia e espaçamentos responsivos sem media queries. |
| min() / max() | Mínimo / máximo | width: min(100%, 600px) — o elemento nunca ultrapassa 600px mas é fluido em telas menores. Substitui muitos padrões de media query de largura máxima. |
| calc() | Cálculo | Mistura unidades diferentes: calc(100% - 2rem). Essencial quando você precisa subtrair padding fixo de uma largura fluida. |
Quando o usuário aumenta o tamanho de fonte padrão do browser (acessibilidade), rem escala junto. px fica fixo e pode quebrar layouts para pessoas com baixa visão.
px para bordas, shadows e detalhes que não precisam escalar. Use rem para fontes e espaçamentos. Use % ou fr para larguras de layout. Use dvh ao invés de vh em mobile.
Texturas podem ser criadas 100% em CSS usando background-image com gradients,
padrões repetidos e SVG inline via data URI — sem nenhuma imagem externa.
background-image + background-size + background-repeat.
Você define um padrão pequeno e o browser o replica por toda a área.
A chave é trabalhar com transparência (hsl(... / 0.X)) para que a textura
se sobreponha ao fundo sem dominar.
Um radial-gradient de 1–2px repetido cria uma grade de pontos. Muito usado em hero sections.
Dois linear-gradient perpendiculares de 1px formam uma grade. Clássico em dashboards e backgrounds técnicos.
repeating-linear-gradient com espaços transparentes entre as listras cria um padrão sutil de hachura.
conic-gradient com quatro quadrantes alternados cria o padrão de xadrez — o jeito mais limpo em CSS moderno.
Dois radial-gradient com background-position offset criam um padrão de pontos em quincôncio (offset grid).
repeating-radial-gradient com origem no canto cria arcos que se repetem como ondas de água.
SVG inline com feTurbulence gera ruído fotográfico. Aplicado com baixa opacidade sobre cores sólidas, cria a sensação de material físico.
A técnica profissional: camadas múltiplas de background-image. Grain na frente, gradiente atrás. O resultado parece pintado à mão.
Dois radial-gradient com posições opostas e offset criam a ilusão de uma grade hexagonal — sem imagem alguma.
A mesma textura de dots com opacidades diferentes. Quanto mais sutil, mais profissional o resultado.
::before absoluto com mix-blend-mode: overlay ou multiply integra ela à cor de fundo de forma mais orgânica.
clip-path recorta o elemento em qualquer forma — círculo, polígono, elipse ou
inset com bordas arredondadas. Tudo fora da área definida fica invisível, mas
o espaço original do elemento ainda é preservado no layout.
circle(), ellipse(), polygon() ou inset().
O browser renderiza apenas o que estiver dentro dessa área.
Por ser uma propriedade animável, transições entre shapes ficam fluidas com transition.
O uso mais comum — avatares e imagens de perfil redondas sem precisar de border-radius: 50%. Aceita posição do centro.
Como circle() mas com raios independentes para X e Y. Ótimo para banners com corte oval e efeitos de "bolha".
Cada par de valores é um vértice (x y). O browser liga os pontos em ordem e fecha a forma. Substitui o antigo truque de triângulo com border.
Quatro pontos nos extremos formam um diamante. Muito usado em galerias e cards de destaque com visual geométrico.
Seis vértices calculados manualmente. Para formas regulares complexas, use uma ferramenta como Clippy para gerar as coordenadas.
Dez vértices alternando picos externos e internos. Shapes assim são difíceis de calcular à mão — use Clippy ou Bennett Feely.
Uma seta apontando para a direita feita com 6 pontos. Útil para badges de etapas, breadcrumbs e indicadores de progresso.
Recorta um retângulo interno ao elemento com offsets de cada lado. O round adiciona border-radius ao recorte.
Aplicado a uma seção inteira cria divisores inclinados entre seções — sem SVG de separador. O ponto 100% 80% controla o ângulo.
Quando dois shapes têm o mesmo número de pontos, o browser consegue interpolar entre eles com transition. Passe o mouse no card para ver.
transition, ambos os shapes precisam ter o mesmo número de vértices. Se não tiver, o browser não sabe como interpolar.
clip-path corta tudo — incluindo box-shadow e bordas que ficarem fora da área. Se precisar de sombra, aplique num elemento pai.
clip-path: path('M...') aceita qualquer path SVG — curvas Bézier, arcos, shapes orgânicas. Ideal para cortes ondulados entre seções.
A ferramenta mais usada para gerar clip-path visualmente. Escolha um shape pré-definido ou arraste os pontos livremente — o código CSS é gerado em tempo real.
Pseudo-elementos inserem um filho virtual antes ou depois do conteúdo de qualquer elemento —
sem tocar no HTML. A única regra obrigatória é que eles precisam de content para existir.
Sem content o pseudo-elemento não renderiza. Para efeitos puramente visuais (sem texto), use string vazia.
content: ''; /* sempre necessário */
O pai precisa de position: relative quando o pseudo for absolute. Eles herdam cor e fonte do pai normalmente.
position: relative; /* no pai */
Use attr() para puxar o valor de um atributo HTML diretamente — ótimo para tooltips e labels.
content: attr(data-label);
Aceitam width, height, background, border, transform, animation — tudo que um elemento normal aceita.
width: 100%; height: 2px;
Um ::before absoluto com background transparente que escurece no hover. Evita adicionar uma <div> extra no HTML.
O clássico número vermelho em ícones de notificação — feito com ::after posicionado no canto superior direito do elemento pai.
Um ::after com position: absolute e bottom: 0 desenha uma linha colorida sob o texto — sem <hr> no HTML.
Design é inteligência tornada visível.
O caractere \201C (aspas tipográficas) inserido com content num ::before grande cria um efeito editorial sem imagem.
content: attr(data-tip) lê o atributo HTML do elemento — o tooltip é 100% CSS, sem JavaScript.
Dois pseudo-elementos (topo e base) com scaleX(0) que crescem no hover a partir de lados opostos — efeito "desenhar a borda".
counter-reset no pai e counter-increment + content: counter() no filho criam numeração personalizada sem <ol> padrão.
Este é um texto longo que vai ser cortado suavemente com um gradiente de fade no final, evitando a quebra abrupta do conteúdo e criando um efeito "tem mais" natural sem JavaScript.
Um ::after com linear-gradient de transparente para o fundo cria o efeito de conteúdo "desaparecendo" — sem clipar o texto abruptamente.
Substitui o list-style padrão por qualquer caractere ou símbolo — aqui uma seta que anima no hover com transform: translateX.
content: '' — leitores de tela podem ignorar. Para texto real, use HTML. Para efeitos visuais decorativos, pseudo-elementos são a escolha certa.
As propriedades CSS que você mais vai usar no dia a dia, organizadas por categoria — com descrição, valores aceitos e exemplo de código.
Define o modelo de formatação do elemento e de seus filhos. É a propriedade mais fundamental do CSS — tudo começa aqui.
Define se width e height incluem padding e border. border-box é o padrão sensato — sempre use no reset global.
Shorthand para flex-grow, flex-shrink e flex-basis. Controla como um item flex cresce, encolhe e qual seu tamanho base.
Define as colunas de um grid. A unidade fr distribui o espaço disponível. repeat() e minmax() tornam o grid responsivo.
Espaçamento entre itens em flex e grid. Substitui margins manuais entre filhos — mais limpo e sem o problema do margin na borda.
justify-content alinha no eixo principal (horizontal em row). align-items alinha no eixo cruzado (vertical em row). Chave para centralizar qualquer coisa.
Mantém a proporção largura/altura automaticamente. Essencial para imagens, vídeos e cards que precisam ser consistentes independente do tamanho.
Shorthand para cor, imagem, posição, tamanho e repetição do fundo. Aceita múltiplas camadas separadas por vírgula — a primeira fica na frente.
Arredonda os cantos. Pode receber um ou quatro valores (top-left, top-right, bottom-right, bottom-left). Com 50% em elemento quadrado vira círculo.
Sombra projetada do elemento. Aceita múltiplos valores separados por vírgula. inset cria sombra interna. Blur alto com spread negativo = sombra suave realista.
Transparência do elemento inteiro (incluindo filhos). Diferente de background: hsl(... / 0.5), que afeta só o fundo. Use com cuidado — afeta toda a subárvore.
Controla o que acontece quando o conteúdo ultrapassa o elemento. hidden é muito usado para "clipar" filhos absolutos e para criar o efeito de border-radius nos filhos.
Aplica filtros ao conteúdo atrás do elemento. O efeito de "vidro fosco" (glassmorphism) usa blur() com fundo semitransparente.
Tamanho da fonte. Prefira rem (relativo à raiz) para acessibilidade. Com clamp() cria tipografia fluida que escala com a viewport.
Altura da linha. Valor sem unidade é multiplicador do font-size — prefira assim. Títulos pedem ~1.1–1.2; corpo de texto ~1.5–1.7.
Espaçamento entre letras (kerning manual). Use em para que seja proporcional ao tamanho. Valores negativos em títulos grandes, positivos em labels uppercase.
Controla o que aparece quando o texto ultrapassa. Requer overflow: hidden e white-space: nowrap para funcionar.
Define o esquema de posicionamento. relative cria contexto para filhos absolutos. sticky fixa ao rolar. fixed sai do fluxo e é relativo à viewport.
Shorthand para top, right, bottom, left. inset: 0 estica o elemento para cobrir completamente o pai — muito usado com position: absolute.
Ordem de empilhamento no eixo Z. Só funciona em elementos com position diferente de static. Use valores com espaçamento (10, 20, 100) para ter margem de manobra.
Move, rotaciona, escala ou distorce sem afetar o fluxo do documento. É processado pela GPU — prefira a top/left para animações performáticas.
Anima mudanças de propriedades. Recebe: propriedade, duração, easing e delay. Prefira especificar a propriedade ao invés de all para melhor performance.
Shorthand para animation-name, duration, easing, delay, iteration-count, direction, fill-mode. Usa @keyframes nomeados.
Avisa o browser com antecedência quais propriedades vão mudar, permitindo otimização. Use com parcimônia — criar muitas camadas de composição prejudica a memória.
Muda o cursor do mouse. Um detalhe pequeno que afeta muito a percepção de interatividade — links e botões devem ter pointer, áreas de drag grab.
Controla se o elemento responde a eventos de mouse/toque. none é essencial em pseudo-elementos decorativos que não devem interferir nos cliques.
Controla se o usuário pode selecionar o texto do elemento. Use none em botões e elementos de UI para evitar a seleção acidental ao clicar rapidamente.
Permite que o usuário redimensione o elemento. Requer overflow diferente de visible. Comumente usado para <textarea>.
Controla o comportamento de rolagem quando acionado por links âncora ou JavaScript. smooth adiciona animação sem precisar de JS.
Um @keyframes define os estados intermediários de uma animação CSS.
Você nomeia a animação e descreve o que acontece em cada ponto do tempo — o browser cuida de interpolar entre eles.
from ou 0%) e fim (to ou 100%). Pode adicionar quantos percentuais intermediários quiser. Depois aplica com a propriedade animation no elemento.
Passe o mouse em cada card para ver a animação ao vivo.
Sobe de baixo enquanto aparece. O reveal mais usado em landing pages — ativa com IntersectionObserver ao rolar.
Cai de cima enquanto aparece. Ideal para dropdowns, tooltips e modais que "caem" da barra de navegação.
Entra pela esquerda. Use para drawers laterais, notificações e conteúdo que aparece a partir de uma borda.
Cresce de um ponto central. Perfeito para modais, popovers e elementos que "aparecem" do nada na tela.
Bate como um coração. Use em indicadores de status, badges de notificação e elementos que precisam chamar atenção de forma contínua.
Rotação contínua. O loader mais simples do CSS — combine com border-radius: 50% e uma borda parcial para um spinner clássico.
Tremida horizontal para indicar erro. Use em formulários com campo inválido — dispare com animation-play-state ou re-adicionando a classe via JS.
Quica como uma bola. O segredo está nos dois animation-timing-function dentro do keyframe — um acelera na queda, outro desacelera na subida.
Expande e some como uma onda de radar. Muito usado como anel ao redor de um badge ou indicador de localização em mapas.
Brilho que percorre da esquerda para direita. O efeito "skeleton loader" — indica que conteúdo está carregando sem um spinner intrusivo.
Esses aparecem com frequência em bibliotecas e projetos — vale pesquisar quando precisar.
Documentação completa em português: sintaxe, valores aceitos, exemplos, compatibilidade de browser e propriedades relacionadas como animation-fill-mode, animation-play-state e muito mais.
A biblioteca mais usada de animações CSS prontas. Ótima para estudar os @keyframes reais de efeitos como bounce, wobble, flipIn e os outros da lista acima.
A propriedade transition anima mudanças de estado. O cubic-bezier define
a curva de velocidade — o que separa uma animação mecânica de uma que parece natural.
Cada botão usa um cubic-bezier diferente no transition. A mesma propriedade (translateY),
a mesma duração — só a curva muda.
Corre em paralelo a tudo. Hábitos que elevam o nível técnico e estético.
Abra sites que admira e inspecione cada elemento. Veja margins, paddings reais, qual fonte está sendo usada, como o grid foi montado.
Antes de codar, defina suas --variables: cores, tamanhos, espaçamentos. Isso é design system thinking na prática.
Curadoria visual diária treina o olho. Você começa a reconhecer padrões, tendências e o que torna um layout memorável.
A melhor forma de aprender é replicar. Escolha uma seção de um site e tente reproduzir do zero — você vai descobrir técnicas que não imaginava.
Use múltiplos de 4 ou 8 para espaçamento. Um sistema de espaçamento consistente faz tudo parecer intencional e profissional.
Você cobriu os fundamentos. Abaixo estão os tópicos mais importantes para continuar evoluindo — sem aprofundamento aqui, mas cada um merece estudo dedicado.