cssadvanced235 snippets

CSS3: O Guia Visual

Nunca mais chute valores de display ou position. Domine Flexbox, Grid e layouts responsivos visualmente em segundos.

Seções12

🎯 Seletores Básicos

16 snippets

Esta seção aborda os fundamentos da seleção de elementos HTML utilizando CSS, permitindo aplicar estilos a elementos específicos, grupos de elementos ou elementos com identificadores únicos. Essencial para direcionar as regras de estilo de forma precisa na sua folha de estilos.

Seletor de Elemento: Parágrafo

Seleciona todos os elementos de parágrafo (<p>) no documento HTML e aplica a eles a cor azul para o texto. Este é o tipo de seletor mais fundamental, que atua diretamente sobre o nome da tag HTML.

css

p { color: blue; }

Seletor de Elemento: Título H1

Seleciona todos os elementos de título de nível 1 (<h1>) no documento HTML e define o tamanho da fonte para 2 vezes o tamanho da fonte padrão do elemento pai. Útil para estilizar todos os títulos de um determinado nível de forma consistente.

css

h1 { font-size: 2em; }

Seletor de Elemento: Divisão

Seleciona todas as divisões (<div>) no documento HTML e aplica uma margem de 10 pixels em todos os quatro lados (topo, direita, inferior, esquerda). Usado para espaçamento externo uniforme de todos os blocos div.

css

div { margin: 10px; }

Seletor de Elemento: Span

Seleciona todos os elementos span (<span>) e garante que eles se comportem como elementos em linha, ocupando apenas o espaço necessário para seu conteúdo. Embora `inline` seja o padrão para `span`, esta declaração pode ser usada para reforçar ou sobrescrever estilos herdados.

css

span { display: inline; }

Seletor de Classe Genérico

Seleciona todos os elementos HTML que possuem o atributo `class="classe"` e define a cor do texto para vermelho. Seletores de classe são ideais para aplicar estilos a múltiplos elementos não relacionados ou para reutilização de estilos.

css

.classe { color: red; }

Seletor de Classe: Botão Primário

Seleciona elementos com a classe `btn-primary` e define a cor de fundo para azul. Comumente utilizado para estilizar botões principais em interfaces de usuário.

css

.btn-primary { background: blue; }

Seletor de Classe: Texto Centralizado

Seleciona elementos com a classe `text-center` e centraliza o texto dentro deles. Uma classe utilitária comum para alinhamento de texto.

css

.text-center { text-align: center; }

Seletor de Classe: Elemento Oculto

Seleciona elementos com a classe `hidden` e os remove completamente do fluxo do documento, tornando-os invisíveis e não interativos. Diferente de `visibility: hidden;`, `display: none;` não ocupa espaço.

css

.hidden { display: none; }

Seletor de ID: Cabeçalho

Seleciona o elemento HTML que possui o atributo `id="header"` e o posiciona de forma fixa na viewport. Seletores de ID devem ser usados para elementos únicos na página.

css

#header { position: fixed; }

Seletor de ID: Conteúdo Principal

Seleciona o elemento com o ID `main-content` e define sua largura máxima para 1200 pixels. Isso garante que o conteúdo principal não exceda uma largura específica, mantendo-o legível em telas grandes.

css

#main-content { max-width: 1200px; }

Seletor de ID: Barra Lateral

Seleciona o elemento com o ID `sidebar` e define sua largura para 300 pixels. Usado para definir dimensões fixas para componentes de layout específicos.

css

#sidebar { width: 300px; }

Seletor de ID: Rodapé

Seleciona o elemento com o ID `footer` e aplica uma margem superior de 50 pixels. Isso cria um espaçamento entre o rodapé e o conteúdo acima dele.

css

#footer { margin-top: 50px; }

Seletor Combinado: Div com Classe

Seleciona apenas os elementos `div` que também possuem a classe `container`, definindo sua largura para 100%. Este seletor combina um seletor de elemento com um seletor de classe para maior especificidade.

css

div.container { width: 100%; }

Seletor Combinado: Item de Lista em Navegação

Seleciona todos os itens de lista (<li>) que são descendentes de uma lista não ordenada (<ul>) com a classe `nav`, fazendo com que se comportem como elementos em linha. Comumente usado para criar menus de navegação horizontais.

css

ul.nav li { display: inline; }

Seletor Combinado: Elemento com Classe dentro de ID

Seleciona o elemento com a classe `logo` que é um descendente de um elemento com o ID `header`, fazendo-o flutuar à esquerda. Isso é útil para posicionar elementos específicos dentro de um contêiner identificado.

css

#header .logo { float: left; }

Seletor Combinado: Título H2 em Artigo

Seleciona todos os títulos de nível 2 (<h2>) que são descendentes de um elemento `<article>` com a classe `post`, definindo sua cor para um tom de cinza escuro. Ajuda a estilizar títulos dentro de um contexto específico de conteúdo.

css

article.post h2 { color: #333; }

📦 Box Model

20 snippets

O Box Model é um conceito fundamental no CSS que descreve como os elementos HTML são renderizados como caixas retangulares. Cada caixa possui conteúdo, padding (espaçamento interno), border (borda) e margin (espaçamento externo), que juntos determinam o tamanho total e o espaçamento do elemento na página.

Largura do Elemento

Define a largura explícita do conteúdo do elemento para 300 pixels. Esta propriedade controla a dimensão horizontal do elemento.

css

width: 300px;

Altura do Elemento

Define a altura explícita do conteúdo do elemento para 200 pixels. Esta propriedade controla a dimensão vertical do elemento.

css

height: 200px;

Largura Máxima

Define a largura máxima que o elemento pode ocupar para 100% do seu contêiner pai. Isso é crucial para tornar elementos, como imagens, responsivos, garantindo que eles não transbordem em telas menores.

css

max-width: 100%;

Altura Mínima

Define a altura mínima do elemento para 100% da altura da viewport (altura visível da janela do navegador). Garante que o elemento ocupe pelo menos a altura total da tela, útil para layouts de página inteira.

css

min-height: 100vh;

Box Sizing: Border-Box

Altera o Box Model padrão, fazendo com que a largura e a altura de um elemento incluam o padding e a borda, mas não a margem. Isso simplifica o cálculo de dimensões e o layout, pois o tamanho total do elemento permanece consistente independentemente do padding ou borda adicionados.

css

box-sizing: border-box;

Margem em Todos os Lados

Aplica uma margem de 10 pixels em todos os quatro lados (topo, direita, inferior, esquerda) do elemento. A margem cria espaço externo entre o elemento e outros elementos adjacentes.

css

margin: 10px;

Margem Vertical e Horizontal

Aplica uma margem de 10 pixels no topo e na parte inferior, e 20 pixels na esquerda e na direita do elemento. Esta é uma sintaxe abreviada para definir margens verticais e horizontais de forma diferente.

css

margin: 10px 20px;

Margem Individual por Lado

Define margens específicas para cada lado do elemento, na ordem: topo (10px), direita (15px), inferior (20px) e esquerda (25px). Permite controle granular sobre o espaçamento externo.

css

margin: 10px 15px 20px 25px;

Margem Apenas no Topo

Aplica uma margem de 20 pixels exclusivamente na parte superior do elemento, sem afetar os outros lados. Útil para criar espaçamento vertical específico.

css

margin-top: 20px;

Centralizar Horizontalmente

Define a margem superior e inferior como 0 e as margens laterais como "auto". Para elementos de bloco com uma largura definida, isso os centraliza horizontalmente dentro de seu contêiner pai.

css

margin: 0 auto;

Padding em Todos os Lados

Aplica um preenchimento (padding) de 15 pixels em todos os quatro lados do conteúdo do elemento. O padding cria espaço interno entre o conteúdo e a borda do elemento.

css

padding: 15px;

Padding Vertical e Horizontal

Aplica um padding de 10 pixels no topo e na parte inferior, e 20 pixels na esquerda e na direita do elemento. Sintaxe abreviada para definir padding vertical e horizontal de forma diferente.

css

padding: 10px 20px;

Padding Individual por Lado

Define padding específicos para cada lado do elemento, na ordem: topo (5px), direita (10px), inferior (15px) e esquerda (20px). Permite controle granular sobre o espaçamento interno.

css

padding: 5px 10px 15px 20px;

Padding Apenas na Esquerda

Aplica um padding de 30 pixels exclusivamente na parte esquerda do elemento, sem afetar os outros lados. Útil para criar espaçamento interno específico.

css

padding-left: 30px;

Padding com Unidade Relativa

Aplica um padding de 1 "em" em todos os lados. A unidade `em` é relativa ao tamanho da fonte do próprio elemento, tornando o espaçamento escalável com o texto.

css

padding: 1em;

Borda Completa

Define uma borda de 1 pixel de largura, estilo sólido e cor cinza claro (`#ccc`) em todos os quatro lados do elemento. Esta é uma propriedade abreviada para `border-width`, `border-style` e `border-color`.

css

border: 1px solid #ccc;

Bordas Arredondadas

Aplica um raio de 5 pixels aos cantos do elemento, tornando-os arredondados. Um valor maior resulta em cantos mais arredondados.

css

border-radius: 5px;

Forma Circular/Oval

Aplica um raio de 50% aos cantos do elemento. Se o elemento for quadrado, ele se tornará um círculo perfeito; se for retangular, se tornará uma forma oval.

css

border-radius: 50%;

Borda Superior Estilizada

Define uma borda de 2 pixels de largura, estilo tracejado (`dashed`) e cor vermelha apenas na parte superior do elemento. Permite estilizar bordas individuais de forma independente.

css

border-top: 2px dashed red;

Remover Borda

Remove completamente qualquer borda existente no elemento. É uma forma concisa de garantir que um elemento não tenha bordas.

css

border: none;

📝 Tipografia

20 snippets

Esta seção detalha as propriedades CSS utilizadas para controlar a aparência do texto e das fontes, incluindo família, tamanho, peso, estilo, decoração, alinhamento e espaçamento. É fundamental para garantir a legibilidade e a estética do conteúdo textual em uma página web.

Família de Fontes Padrão

Define a família de fontes para o texto. O navegador tentará usar "Arial" primeiro; se não estiver disponível, usará qualquer fonte genérica "sans-serif" (sem serifa). É uma boa prática fornecer fontes de fallback.

css

font-family: Arial, sans-serif;

Família de Fontes com Espaços

Define a família de fontes, usando aspas para nomes de fontes que contêm espaços, como "Helvetica Neue". Se a primeira não estiver disponível, "Helvetica" será usada como fallback.

css

font-family: "Helvetica Neue", Helvetica;

Fonte Serif

Define a família de fontes para uma fonte com serifa, como "Times New Roman". Fontes serifadas são tradicionalmente usadas para textos longos em impressão.

css

font-family: "Times New Roman", serif;

Fonte Monoespaçada

Define a família de fontes para uma fonte monoespaçada, como "Courier New". Fontes monoespaçadas são aquelas em que todos os caracteres têm a mesma largura, ideal para blocos de código ou dados tabulares.

css

font-family: "Courier New", monospace;

Fontes Alternativas

Define uma sequência de fontes alternativas. O navegador tentará "Georgia", depois "Times New Roman" e, por último, qualquer fonte genérica "serif" disponível, garantindo compatibilidade.

css

font-family: Georgia, "Times New Roman", serif;

Tamanho da Fonte em Pixels

Define o tamanho da fonte para 16 pixels. Unidades de pixel fornecem um controle de tamanho fixo e preciso, mas podem ser menos flexíveis para responsividade.

css

font-size: 16px;

Tamanho da Fonte Relativo ao Pai (em)

Define o tamanho da fonte para 1 "em", que é equivalente ao tamanho da fonte do elemento pai. Isso permite que o texto se adapte proporcionalmente ao seu contêiner.

css

font-size: 1em;

Tamanho da Fonte Relativo à Raiz (rem)

Define o tamanho da fonte para 1 "rem", que é equivalente ao tamanho da fonte do elemento raiz (<html>). `rem` é ideal para manter uma escala de fonte consistente em todo o documento, facilitando a responsividade.

css

font-size: 1rem;

Peso da Fonte: Negrito

Define o peso da fonte para negrito. Pode ser usado para destacar texto importante. Outros valores incluem `normal`, `lighter`, `bolder` ou valores numéricos de 100 a 900.

css

font-weight: bold;

Peso da Fonte Numérico

Define o peso da fonte usando um valor numérico (entre 100 e 900, em múltiplos de 100). `300` geralmente corresponde a uma fonte "light" ou "fina", se disponível na família de fontes.

css

font-weight: 300;

Estilo da Fonte: Itálico

Define o estilo da fonte para itálico. Usado para enfatizar texto ou para estilos tipográficos específicos. Outros valores incluem `normal` e `oblique`.

css

font-style: italic;

Decoração de Texto: Sublinhado

Aplica uma linha abaixo do texto, ou seja, sublinha-o. Comumente usado para links, mas pode ser aplicado a qualquer texto.

css

text-decoration: underline;

Remover Decoração de Texto

Remove qualquer decoração de texto padrão, como o sublinhado em links (<a>). Essencial para estilizar links de forma personalizada.

css

text-decoration: none;

Transformação de Texto: Maiúsculas

Converte todo o texto do elemento para letras maiúsculas, sem alterar o conteúdo original no HTML. Útil para títulos ou destaque visual.

css

text-transform: uppercase;

Transformação de Texto: Capitalizar

Converte a primeira letra de cada palavra no texto do elemento para maiúscula. Útil para títulos ou nomes próprios.

css

text-transform: capitalize;

Alinhamento de Texto: Centralizado

Centraliza horizontalmente o texto dentro do seu elemento contêiner. Aplica-se a elementos de bloco ou células de tabela.

css

text-align: center;

Alinhamento de Texto: Justificado

Distribui o texto uniformemente entre as margens esquerda e direita, adicionando espaço extra entre as palavras conforme necessário. Comumente usado em blocos de texto longos para uma aparência formal.

css

text-align: justify;

Altura da Linha

Define a altura da linha para 1.5 vezes o tamanho da fonte do elemento. Um `line-height` sem unidade é o mais recomendado, pois escala proporcionalmente com o `font-size`, melhorando a legibilidade.

css

line-height: 1.5;

Espaçamento Entre Letras

Adiciona um espaçamento extra de 1 pixel entre os caracteres do texto. Pode ser usado para ajustar a densidade visual do texto.

css

letter-spacing: 1px;

Espaçamento Entre Palavras

Adiciona um espaçamento extra de 2 pixels entre as palavras do texto. Pode ser usado para ajustar a legibilidade de frases.

css

word-spacing: 2px;

🎨 Cores e Fundos

20 snippets

Esta seção explora as propriedades CSS para definir cores de texto, cores e imagens de fundo, bem como aplicar gradientes e outros efeitos visuais. É crucial para a identidade visual e o design estético de qualquer página web.

Cor Hexadecimal

Define a cor do texto usando um código hexadecimal de 6 dígitos (ou 3), onde cada par representa os valores de vermelho, verde e azul (RGB). `#333333` é um tom de cinza escuro.

css

color: #333333;

Cor RGB

Define a cor do texto usando o modelo RGB (Red, Green, Blue), com valores de 0 a 255 para cada componente. `rgb(51, 51, 51)` é equivalente a `#333333`.

css

color: rgb(51, 51, 51);

Cor RGBA (com Transparência)

Define a cor do texto usando o modelo RGBA, que inclui um canal alfa (transparência) com valor de 0 (totalmente transparente) a 1 (totalmente opaco). `0.8` significa 80% de opacidade.

css

color: rgba(51, 51, 51, 0.8);

Cor HSL

Define a cor do texto usando o modelo HSL (Hue, Saturation, Lightness). `Hue` (matiz) é um grau no círculo de cores (0-360), `Saturation` (saturação) é a intensidade da cor (0-100%), e `Lightness` (luminosidade) é o brilho (0-100%). `hsl(0, 0%, 20%)` é um cinza escuro.

css

color: hsl(0, 0%, 20%);

Herdar Cor do Pai

Faz com que o elemento herde a cor do texto de seu elemento pai. Útil para manter a consistência de cores em elementos aninhados.

css

color: inherit;

Cor de Fundo Sólida

Define uma cor de fundo sólida para o elemento usando um código hexadecimal. `#f5f5f5` é um tom de cinza muito claro, quase branco.

css

background-color: #f5f5f5;

Gradiente Linear de Fundo

Aplica um gradiente linear como cor de fundo, que transita de uma cor para outra em uma direção específica. `to right` indica que o gradiente vai da esquerda para a direita, com as cores `#ff7e5f` (laranja avermelhado) e `#feb47b` (pêssego).

css

background: linear-gradient(to right, #ff7e5f, #feb47b);

Gradiente Radial de Fundo

Aplica um gradiente radial como cor de fundo, que se espalha a partir de um ponto central. `circle` define a forma do gradiente, transicionando de `#ff7e5f` no centro para `#feb47b` nas bordas.

css

background: radial-gradient(circle, #ff7e5f, #feb47b);

Imagem de Fundo

Define uma imagem como fundo do elemento. O caminho para a imagem é especificado dentro de `url()`. Por padrão, a imagem se repetirá para cobrir todo o elemento.

css

background: url("image.jpg");

Tamanho da Imagem de Fundo: Cover

Ajusta o tamanho da imagem de fundo para que ela cubra completamente a área do elemento, cortando as partes que excedem. Mantém a proporção da imagem.

css

background-size: cover;

Não Repetir Imagem de Fundo

Impede que a imagem de fundo se repita. Se a imagem for menor que o elemento, ela aparecerá apenas uma vez.

css

background-repeat: no-repeat;

Posição da Imagem de Fundo: Centro

Posiciona a imagem de fundo no centro horizontal e vertical do elemento. Pode ser combinado com `background-repeat: no-repeat;` para exibir uma única imagem centralizada.

css

background-position: center center;

Fundo Fixo ao Rolar

Faz com que a imagem de fundo permaneça fixa na viewport enquanto o restante do conteúdo da página rola. Cria um efeito de paralaxe.

css

background-attachment: fixed;

Modo de Mistura de Fundos

Define como as imagens de fundo (ou cores) de um elemento devem ser misturadas entre si. `multiply` multiplica as cores de fundo, resultando em cores mais escuras.

css

background-blend-mode: multiply;

Transparência do Elemento

Define o nível de opacidade (transparência) de todo o elemento, incluindo seu conteúdo. Um valor de `0.8` significa 80% opaco (20% transparente).

css

opacity: 0.8;

Cor Atual do Elemento

Define a cor de um elemento para o valor atual da propriedade `color` do próprio elemento. Útil para elementos como bordas ou preenchimentos de SVG que devem corresponder à cor do texto.

css

color: currentColor;

Cor de Preenchimento (SVG)

Define a cor de preenchimento de uma forma SVG. Aplica-se a elementos SVG como `<path>`, `<circle>`, `<rect>`, etc., preenchendo seu interior com a cor especificada.

css

fill: #333;

Cor da Borda (SVG)

Define a cor da borda (contorno) de uma forma SVG. Aplica-se a elementos SVG, desenhando um contorno com a cor especificada.

css

stroke: #666;

Filtro: Ajuste de Brilho

Aplica um filtro de brilho ao elemento. Um valor de `1.2` (ou 120%) aumenta o brilho em 20%. `1` é o valor normal, `0` é totalmente preto.

css

filter: brightness(1.2);

Filtro: Saturação

Aplica um filtro de saturação ao elemento. Um valor de `1.5` (ou 150%) aumenta a saturação das cores em 50%, tornando-as mais vibrantes. `1` é o valor normal, `0` é totalmente dessaturado (escala de cinza).

css

filter: saturate(1.5);

📐 Layout e Posicionamento

21 snippets

Esta seção aborda as propriedades CSS essenciais para controlar o layout e o posicionamento dos elementos na página, incluindo o tipo de exibição, posicionamento relativo/absoluto/fixo, e técnicas de float e clear. É a base para construir a estrutura visual de qualquer design web.

Display: Bloco

Faz com que o elemento se comporte como um elemento de bloco. Ele ocupa toda a largura disponível, força uma quebra de linha antes e depois dele e permite a aplicação de `width`, `height`, `margin` e `padding`.

css

display: block;

Display: Em Linha

Faz com que o elemento se comporte como um elemento em linha. Ele ocupa apenas a largura necessária para seu conteúdo, não força quebras de linha e ignora `width`, `height` e `margin-top`/`margin-bottom`.

css

display: inline;

Display: Em Linha com Bloco

Combina características de `inline` e `block`. O elemento se comporta como `inline` (não força quebra de linha), mas aceita `width`, `height`, `margin` e `padding` como um elemento `block`.

css

display: inline-block;

Display: Ocultar Elemento

Remove completamente o elemento do fluxo do documento. Ele não é renderizado, não ocupa espaço e não é interativo. Diferente de `visibility: hidden;`, que apenas oculta o elemento visualmente, mas mantém seu espaço.

css

display: none;

Display: Container Flexbox

Transforma o elemento em um contêiner flexível, ativando o contexto Flexbox para seus filhos diretos. Permite criar layouts de uma dimensão (linha ou coluna) de forma eficiente e responsiva.

css

display: flex;

Display: Container Grid

Transforma o elemento em um contêiner de grade, ativando o contexto CSS Grid para seus filhos diretos. Permite criar layouts bidimensionais (linhas e colunas) complexos e responsivos.

css

display: grid;

Position: Estático (Padrão)

É o valor padrão para todos os elementos. Elementos com `position: static;` são posicionados de acordo com o fluxo normal do documento e as propriedades `top`, `right`, `bottom`, `left` e `z-index` não têm efeito.

css

position: static;

Position: Relativo

O elemento é posicionado de acordo com o fluxo normal do documento, mas pode ser deslocado de sua posição original usando `top`, `right`, `bottom` e `left`. O espaço original do elemento é mantido no layout.

css

position: relative;

Position: Absoluto

O elemento é removido do fluxo normal do documento e posicionado em relação ao seu ancestral posicionado mais próximo (não `static`). Se nenhum ancestral posicionado for encontrado, ele é posicionado em relação ao `<html>`. As propriedades `top`, `right`, `bottom` e `left` controlam seu deslocamento.

css

position: absolute;

Position: Fixo

O elemento é removido do fluxo normal do documento e posicionado em relação à viewport (janela do navegador). Ele permanece na mesma posição mesmo quando a página é rolada, ideal para cabeçalhos ou menus fixos.

css

position: fixed;

Position: Sticky

O elemento é posicionado de forma relativa até que sua posição de rolagem atinja um limite especificado (definido por `top`, `right`, `bottom` ou `left`), após o qual ele se torna fixo na tela. Útil para elementos que "grudam" ao rolar.

css

position: sticky;

Coordenada: Distância do Topo

Define a distância do elemento em relação à borda superior de seu contêiner posicionado (para `absolute`, `fixed`, `relative`, `sticky`). `0` o alinha perfeitamente ao topo.

css

top: 0;

Coordenada: Distância da Direita

Define a distância do elemento em relação à borda direita de seu contêiner posicionado. `0` o alinha perfeitamente à direita.

css

right: 0;

Coordenada: Distância da Base

Define a distância do elemento em relação à borda inferior de seu contêiner posicionado. `0` o alinha perfeitamente à base.

css

bottom: 0;

Coordenada: Distância da Esquerda

Define a distância do elemento em relação à borda esquerda de seu contêiner posicionado. `0` o alinha perfeitamente à esquerda.

css

left: 0;

Z-Index: Empilhamento de Elementos

Controla a ordem de empilhamento de elementos posicionados. Elementos com um `z-index` maior aparecerão acima de elementos com um `z-index` menor. Funciona apenas em elementos com `position` diferente de `static`.

css

z-index: 100;

Float: Flutuar à Esquerda

Remove o elemento do fluxo normal do documento e o posiciona à esquerda de seu contêiner, permitindo que outros conteúdos fluam ao redor dele. Usado historicamente para layouts de múltiplas colunas.

css

float: left;

Float: Flutuar à Direita

Remove o elemento do fluxo normal do documento e o posiciona à direita de seu contêiner, permitindo que outros conteúdos fluam ao redor dele.

css

float: right;

Clear: Limpar Flutuações (Ambos)

Impede que o elemento seja posicionado ao lado de elementos flutuantes anteriores, tanto à esquerda quanto à direita. Ele força o elemento a começar em uma nova linha abaixo de todos os elementos flutuantes.

css

clear: both;

Clear: Limpar Flutuação (Esquerda)

Impede que o elemento seja posicionado ao lado de elementos flutuantes à esquerda. Ele força o elemento a começar em uma nova linha abaixo de qualquer elemento flutuante à esquerda.

css

clear: left;

Overflow: Hidden (Clearfix)

Quando aplicado a um contêiner pai, esta propriedade pode "conter" os elementos flutuantes dentro dele, evitando que o contêiner colapse. É uma técnica comum de "clearfix" para garantir que o pai envolva corretamente seus filhos flutuantes.

css

overflow: hidden;

🔧 Flexbox

24 snippets

Flexbox é um módulo de layout unidimensional do CSS projetado para distribuir espaço entre os itens de um contêiner e alinhar esses itens. É extremamente eficaz para criar layouts flexíveis e responsivos em uma única linha ou coluna, simplificando o alinhamento e a distribuição de elementos.

Criar Container Flex

Transforma o elemento em um contêiner flexível, ativando o contexto Flexbox para seus filhos diretos (itens flex). Os itens flex se organizarão em uma única linha por padrão.

css

display: flex;

Direção dos Itens: Linha (Padrão)

Define a direção principal dos itens flex para horizontal (da esquerda para a direita em idiomas LTR). Este é o comportamento padrão do Flexbox.

css

flex-direction: row;

Direção dos Itens: Coluna

Define a direção principal dos itens flex para vertical (de cima para baixo). Os itens serão empilhados um abaixo do outro.

css

flex-direction: column;

Permitir Quebra de Linha

Permite que os itens flex quebrem para a próxima linha (ou coluna, dependendo de `flex-direction`) se não houver espaço suficiente no contêiner. O padrão é `nowrap`, que tenta manter todos os itens em uma única linha/coluna.

css

flex-wrap: wrap;

Alinhamento Horizontal (Eixo Principal)

Alinha os itens flex ao longo do eixo principal (horizontal por padrão) do contêiner flex. `center` centraliza os itens. Outras opções incluem `flex-start`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

css

justify-content: center;

Alinhamento Vertical (Eixo Cruzado)

Alinha os itens flex ao longo do eixo cruzado (vertical por padrão) do contêiner flex. `center` centraliza os itens verticalmente. Outras opções incluem `flex-start`, `flex-end`, `stretch`, `baseline`.

css

align-items: center;

Justify Content: Alinhar ao Início

Alinha os itens flex ao início do eixo principal do contêiner flex. Em `row`, os itens se alinham à esquerda.

css

justify-content: flex-start;

Justify Content: Alinhar ao Fim

Alinha os itens flex ao final do eixo principal do contêiner flex. Em `row`, os itens se alinham à direita.

css

justify-content: flex-end;

Justify Content: Centralizar

Centraliza os itens flex ao longo do eixo principal do contêiner flex.

css

justify-content: center;

Justify Content: Espaçar Entre Itens

Distribui o espaço extra uniformemente entre os itens flex. O primeiro item é alinhado ao início e o último ao final do contêiner.

css

justify-content: space-between;

Justify Content: Espaçar ao Redor dos Itens

Distribui o espaço extra uniformemente ao redor dos itens flex, resultando em metade do espaço nas extremidades do contêiner e espaço total entre os itens.

css

justify-content: space-around;

Justify Content: Espaçamento Igual

Distribui o espaço extra de forma que o espaço entre cada par de itens e o espaço entre os itens e as bordas do contêiner sejam iguais.

css

justify-content: space-evenly;

Align Items: Esticar para Preencher

Estica os itens flex para preencher a altura total do contêiner flex ao longo do eixo cruzado, desde que não tenham uma altura explícita definida. Este é o comportamento padrão.

css

align-items: stretch;

Align Items: Alinhar ao Topo

Alinha os itens flex ao início do eixo cruzado do contêiner flex. Em `row`, os itens se alinham ao topo.

css

align-items: flex-start;

Align Items: Alinhar à Base

Alinha os itens flex ao final do eixo cruzado do contêiner flex. Em `row`, os itens se alinham à base.

css

align-items: flex-end;

Align Items: Centralizar Verticalmente

Centraliza os itens flex ao longo do eixo cruzado do contêiner flex. Em `row`, os itens se centralizam verticalmente.

css

align-items: center;

Align Items: Alinhar na Linha Base

Alinha os itens flex de forma que suas linhas de base de texto fiquem alinhadas ao longo do eixo cruzado.

css

align-items: baseline;

Align Content: Alinhar Linhas (com Wrap)

Quando há múltiplas linhas de itens flex (devido a `flex-wrap: wrap;`), esta propriedade alinha essas linhas como um grupo dentro do contêiner flex. `center` centraliza todas as linhas verticalmente. Similar a `justify-content` mas para o eixo cruzado e múltiplas linhas.

css

align-content: center;

Item Flexível: Crescimento Igual

Propriedade abreviada para `flex-grow: 1; flex-shrink: 1; flex-basis: 0%;`. Faz com que o item flex cresça e encolha para preencher o espaço disponível igualmente entre os outros itens flexíveis. Cada item com `flex: 1;` terá o mesmo tamanho relativo.

css

flex: 1;

Item Flexível: Crescimento Proporcional

Propriedade abreviada que faz com que o item flex cresça o dobro dos itens com `flex: 1;`. `flex-grow: 2; flex-shrink: 1; flex-basis: 0%;`.

css

flex: 2;

Capacidade de Crescer

Define a capacidade do item flex de crescer para ocupar o espaço extra disponível no contêiner. Um valor de `1` significa que ele ocupará uma parte proporcional do espaço extra.

css

flex-grow: 1;

Não Encolher

Define a capacidade do item flex de encolher quando não há espaço suficiente no contêiner. Um valor de `0` impede que o item encolha abaixo de seu `flex-basis` (ou conteúdo mínimo).

css

flex-shrink: 0;

Tamanho Base do Item

Define o tamanho inicial de um item flex antes que qualquer espaço extra seja distribuído. Pode ser um valor fixo como `200px` ou um percentual.

css

flex-basis: 200px;

Alinhamento Individual do Item

Permite sobrescrever a propriedade `align-items` do contêiner flex para um item flex individual. `center` centraliza este item específico verticalmente, independentemente de como os outros itens estão alinhados.

css

align-self: center;

🔲 CSS Grid

21 snippets

CSS Grid Layout é um sistema de layout bidimensional que permite organizar elementos em linhas e colunas, oferecendo um controle robusto sobre o posicionamento e o dimensionamento. É ideal para criar layouts de página complexos e galerias de forma eficiente e sem a necessidade de hacks ou floats.

Criar Container Grid

Transforma o elemento em um contêiner de grade, ativando o contexto CSS Grid para seus filhos diretos (itens de grade). Permite definir linhas e colunas explícitas para o layout.

css

display: grid;

Definir 3 Colunas Iguais

Define três colunas no grid, onde `1fr` significa uma fração do espaço disponível. Cada coluna ocupará uma parte igual do espaço restante do contêiner.

css

grid-template-columns: 1fr 1fr 1fr;

Colunas Fixa e Flexível

Define duas colunas: a primeira com uma largura fixa de 200 pixels e a segunda ocupando o restante do espaço disponível (`1fr`).

css

grid-template-columns: 200px 1fr;

Repetir Colunas

Uma função abreviada que cria três colunas, cada uma ocupando uma fração igual do espaço disponível. Equivalente a `1fr 1fr 1fr`.

css

grid-template-columns: repeat(3, 1fr);

Definir Linhas do Grid

Define três linhas no grid: a primeira e a última linha se ajustam automaticamente ao conteúdo (`auto`), e a linha do meio ocupa o restante do espaço disponível (`1fr`).

css

grid-template-rows: auto 1fr auto;

Espaçamento Entre Itens (Gap)

Define o espaçamento (gutter) de 20 pixels entre as linhas e colunas do grid. É uma propriedade abreviada para `grid-row-gap` e `grid-column-gap`.

css

gap: 20px;

Definir Áreas do Grid

Inicia a definição de áreas nomeadas dentro do layout do grid. Permite criar layouts visuais de forma intuitiva, atribuindo nomes a blocos de células.

css

grid-template-areas:

Área do Grid: Primeira Linha (Cabeçalho)

Define a primeira linha do grid como uma área chamada "header" que se estende por três colunas. As aspas indicam uma linha, e os nomes dentro delas representam as células.

css

  "header header header"

Área do Grid: Segunda Linha (Sidebar e Main)

Define a segunda linha do grid com três células: a primeira é uma "sidebar" e as duas seguintes são "main".

css

  "sidebar main main"

Área do Grid: Terceira Linha (Rodapé)

Define a terceira e última linha do grid como uma área chamada "footer" que se estende por três colunas. O ponto e vírgula finaliza a declaração de `grid-template-areas`.

css

  "footer footer footer";

Atribuir Elemento a uma Área

Atribui um item de grid a uma área nomeada previamente definida em `grid-template-areas`. O elemento com esta propriedade ocupará todas as células da área "header".

css

grid-area: header;

Ocupar Colunas Específicas

Faz com que um item de grid comece na linha de grade 1 e termine na linha de grade 3, ocupando, portanto, as colunas 1 e 2. O número após a barra é exclusivo.

css

grid-column: 1 / 3;

Ocupar Linhas Específicas

Faz com que um item de grid comece na linha de grade 2 e termine na linha de grade 4, ocupando, portanto, as linhas 2 e 3.

css

grid-row: 2 / 4;

Ocupar Múltiplas Colunas

Faz com que um item de grid ocupe duas colunas a partir de sua posição inicial. `span` é útil quando a posição inicial não é fixa.

css

grid-column: span 2;

Ocupar Múltiplas Linhas

Faz com que um item de grid ocupe três linhas a partir de sua posição inicial.

css

grid-row: span 3;

Posição Completa do Item

Propriedade abreviada para definir a posição de um item de grid usando `grid-row-start`, `grid-column-start`, `grid-row-end` e `grid-column-end`. Neste caso, o item começa na linha 1, coluna 1, e se estende até a linha 3 (exclusivo) e coluna 4 (exclusivo).

css

grid-area: 1 / 1 / 3 / 4;

Alinhar Itens Horizontalmente

Alinha o conteúdo de cada item de grid individualmente ao longo do eixo da linha (horizontal) dentro de sua própria célula de grid. `center` centraliza o conteúdo horizontalmente.

css

justify-items: center;

Alinhar Itens Verticalmente

Alinha o conteúdo de cada item de grid individualmente ao longo do eixo da coluna (vertical) dentro de sua própria célula de grid. `center` centraliza o conteúdo verticalmente.

css

align-items: center;

Alinhar Grid Horizontalmente

Alinha o grid inteiro (as faixas de coluna) ao longo do eixo da linha (horizontal) dentro do contêiner de grid, quando há espaço extra. `center` centraliza o grid.

css

justify-content: center;

Alinhar Grid Verticalmente

Alinha o grid inteiro (as faixas de linha) ao longo do eixo da coluna (vertical) dentro do contêiner de grid, quando há espaço extra. `center` centraliza o grid.

css

align-content: center;

Alinhar Itens e Conteúdo (Ambos)

Propriedade abreviada que define `justify-items` e `align-items` simultaneamente. `center` centraliza o conteúdo de cada item de grid tanto horizontal quanto verticalmente dentro de sua célula.

css

place-items: center;

📱 Responsividade

16 snippets

Esta seção foca nas técnicas e propriedades CSS para criar layouts que se adaptam e respondem a diferentes tamanhos de tela e dispositivos. A responsividade é crucial para garantir uma experiência de usuário consistente e acessível em qualquer plataforma, desde smartphones até monitores de desktop.

Media Query: Dispositivos Móveis

Inicia um bloco de estilos que será aplicado somente quando a largura da viewport for igual ou menor que 768 pixels. Isso é comumente usado para direcionar estilos específicos para tablets e smartphones.

css

@media (max-width: 768px) {

Ajuste para Mobile

Dentro de uma media query para dispositivos móveis, define a largura de um elemento com a classe `container` para 100%. Isso garante que o contêiner ocupe toda a largura disponível em telas menores.

css

  .container { width: 100%; }

Fechar Media Query

Fecha o bloco de estilos da media query, indicando o fim das regras CSS condicionais.

css

Media Query: Dispositivos Maiores

Inicia um bloco de estilos que será aplicado somente quando a largura da viewport for igual ou maior que 769 pixels. Isso é comumente usado para direcionar estilos específicos para desktops e telas maiores.

css

@media (min-width: 769px) {

Ajuste para Desktop

Dentro de uma media query para dispositivos maiores, define a largura de um elemento com a classe `container` para 750 pixels. Isso pode ser usado para limitar a largura do conteúdo em telas grandes.

css

  .container { width: 750px; }

Fechar Media Query

Fecha o bloco de estilos da media query, indicando o fim das regras CSS condicionais.

css

Imagem Responsiva

Define a largura máxima de uma imagem para 100% de seu contêiner. Combinado com `height: auto;`, isso garante que a imagem nunca exceda a largura de seu pai e mantenha sua proporção original ao redimensionar.

css

max-width: 100%;

Manter Proporção de Imagem

Define a altura de um elemento (geralmente uma imagem) para ajustar-se automaticamente, mantendo sua proporção original em relação à largura. Essencial para imagens responsivas.

css

height: auto;

Fonte Fluida (calc + vw)

Define o tamanho da fonte usando a função `calc()` para criar um tamanho fluido. O tamanho base é 16 pixels, e `0.5vw` (0.5% da largura da viewport) é adicionado, fazendo com que a fonte aumente ou diminua ligeiramente com o tamanho da tela.

css

font-size: calc(16px + 0.5vw);

Largura da Viewport

Define a largura do elemento para 100% da largura da viewport (janela visível do navegador). Útil para elementos que devem ocupar toda a largura da tela.

css

width: 100vw;

Altura da Viewport

Define a altura do elemento para 100% da altura da viewport (janela visível do navegador). Útil para criar seções de página inteira ou layouts "hero".

css

height: 100vh;

Largura Relativa à Viewport

Define a largura do elemento para 50% da largura da viewport. As unidades `vw` e `vh` são ideais para criar elementos que escalam diretamente com o tamanho da tela.

css

width: 50vw;

Altura Relativa à Viewport

Define a altura do elemento para 100% da altura da viewport. Garante que o elemento ocupe a altura total da tela.

css

height: 100vh;

Tamanho da Fonte Relativo à Viewport

Define o tamanho da fonte para 4% da largura da viewport. Isso faz com que o texto aumente ou diminua de tamanho de forma fluida conforme a largura da tela muda.

css

font-size: 4vw;

Margem Relativa à Viewport

Define uma margem de 2% da altura da viewport em todos os lados do elemento. Permite que o espaçamento vertical se adapte ao tamanho da tela.

css

margin: 2vh;

Largura Mínima

Define a largura mínima que o elemento pode ter, mesmo que a viewport seja menor. Isso evita que o conteúdo se torne ilegível em telas muito pequenas, forçando uma rolagem horizontal se necessário.

css

min-width: 320px;

✨ Animações e Transições

20 snippets

Esta seção explora as poderosas ferramentas do CSS para adicionar movimento e interatividade aos elementos, incluindo transições suaves entre estados, transformações 2D e 3D, e animações complexas baseadas em keyframes. Essas propriedades são essenciais para criar experiências de usuário dinâmicas e envolventes.

Transição Suave (Abreviada)

Aplica uma transição suave a todas as propriedades CSS que mudam de valor. A transição durará 0.3 segundos e usará a função de temporização `ease` (inicia e termina lentamente).

css

transition: all 0.3s ease;

Transição de Propriedade Específica

Aplica uma transição de 0.5 segundos com temporização `linear` (velocidade constante) apenas para a propriedade `color`. Outras propriedades mudarão instantaneamente.

css

transition: color 0.5s linear;

Transição com Curva de Animação Personalizada

Aplica uma transição à propriedade `transform` com uma duração de 0.3 segundos e uma função de temporização `cubic-bezier` personalizada. `cubic-bezier` permite criar curvas de aceleração e desaceleração complexas para transições mais expressivas.

css

transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Atraso na Transição

Define um atraso de 0.2 segundos antes que a transição comece a ser executada. O elemento permanecerá no estado inicial por esse período.

css

transition-delay: 0.2s;

Duração da Transição

Define a duração total da transição para 0.5 segundos. Controla o tempo que leva para a propriedade mudar de seu estado inicial para o final.

css

transition-duration: 0.5s;

Transformação 2D: Mover Horizontalmente

Move o elemento 50 pixels para a direita ao longo do eixo X. Valores negativos movem para a esquerda.

css

transform: translateX(50px);

Transformação 2D: Mover Verticalmente

Move o elemento 20 pixels para baixo ao longo do eixo Y. Valores negativos movem para cima.

css

transform: translateY(20px);

Transformação 2D: Rotacionar

Rotaciona o elemento 45 graus no sentido horário em torno de seu ponto de origem (centro por padrão). Valores negativos rotacionam no sentido anti-horário.

css

transform: rotate(45deg);

Transformação 2D: Escalar (Aumentar Tamanho)

Aumenta o tamanho do elemento em 20% (1.2 vezes seu tamanho original) em ambos os eixos X e Y. `scale(x, y)` permite escalar de forma diferente em cada eixo.

css

transform: scale(1.2);

Transformação 2D: Inclinar Horizontalmente

Inclina o elemento 15 graus ao longo do eixo X, criando um efeito de distorção. `skewY()` inclina verticalmente.

css

transform: skewX(15deg);

Transformação 3D: Rotacionar no Eixo X

Rotaciona o elemento 45 graus em torno do eixo X (horizontal), criando um efeito de inclinação para frente ou para trás.

css

transform: rotateX(45deg);

Transformação 3D: Rotacionar no Eixo Y

Rotaciona o elemento 45 graus em torno do eixo Y (vertical), criando um efeito de virar para os lados.

css

transform: rotateY(45deg);

Transformação 3D: Rotacionar no Eixo Z

Rotaciona o elemento 45 graus em torno do eixo Z (profundidade), o que é equivalente a `rotate(45deg)` em 2D.

css

transform: rotateZ(45deg);

Perspectiva 3D Combinada

Aplica uma perspectiva de 1000 pixels ao elemento antes de rotacioná-lo 45 graus no eixo X. A propriedade `perspective` (aplicada ao pai ou como uma função de `transform`) é crucial para criar a ilusão de profundidade em transformações 3D.

css

transform: perspective(1000px) rotateX(45deg);

Manter Contexto 3D

Aplicada a um elemento pai, esta propriedade garante que os filhos 3D do elemento sejam posicionados no mesmo espaço 3D, em vez de serem achatados no plano 2D. Essencial para criar cenas 3D complexas com múltiplos elementos.

css

transform-style: preserve-3d;

Definir Animação Keyframes

Inicia a definição de uma animação CSS chamada `slideIn`. Dentro deste bloco, você define os estágios (keyframes) da animação usando percentagens ou as palavras-chave `from` (0%) e `to` (100%).

css

@keyframes slideIn {

Estado Inicial da Animação

Define o estado inicial da animação (0%). Neste caso, o elemento começa 100% da sua largura fora da tela à esquerda.

css

  from { transform: translateX(-100%); }

Estado Final da Animação

Define o estado final da animação (100%). Neste caso, o elemento termina em sua posição original (sem deslocamento horizontal).

css

  to { transform: translateX(0); }

Fechar Keyframe

Fecha o bloco de definição da animação `@keyframes`.

css

Aplicar Animação

Aplica a animação `slideIn` ao elemento. A animação terá uma duração de 0.5 segundos e usará a função de temporização `ease-in-out` (inicia e termina lentamente, acelera no meio). Esta é uma propriedade abreviada que inclui `animation-name`, `animation-duration`, `animation-timing-function`, entre outros.

css

animation: slideIn 0.5s ease-in-out;

🔍 Pseudo-classes e Pseudo-elementos

20 snippets

Esta seção explora as pseudo-classes e pseudo-elementos, que permitem estilizar elementos em estados específicos (por exemplo, quando o mouse está sobre eles) ou partes de um elemento que não são representadas por tags HTML explícitas (por exemplo, a primeira letra de um parágrafo). São ferramentas poderosas para adicionar interatividade e refinamento visual sem alterar o HTML.

Pseudo-classe: Hover

Aplica estilos quando o cursor do mouse está sobre o elemento. Neste exemplo, a cor do texto muda para azul ao passar o mouse.

css

:hover { color: blue; }

Pseudo-classe: Active

Aplica estilos quando o elemento está sendo ativado (por exemplo, clicado por um mouse ou tocado em um dispositivo touchscreen). Neste exemplo, o elemento encolhe ligeiramente ao ser ativado.

css

:active { transform: scale(0.95); }

Pseudo-classe: Focus

Aplica estilos quando o elemento (geralmente um campo de formulário ou link) recebe o foco, seja por tabulação ou clique. Neste exemplo, uma borda azul é adicionada para indicar o foco.

css

:focus { outline: 2px solid blue; }

Pseudo-classe: Visited

Aplica estilos a links (<a>) que já foram visitados pelo usuário. Por razões de privacidade, as propriedades que podem ser alteradas são limitadas (principalmente `color`).

css

:visited { color: purple; }

Pseudo-classe: Link

Aplica estilos a links (<a>) que ainda não foram visitados pelo usuário. É o estado inicial de um link.

css

:link { color: blue; }

Pseudo-classe Estrutural: Primeiro Filho

Seleciona o primeiro elemento filho de seu pai. Neste exemplo, o primeiro filho de qualquer elemento pai terá o texto em negrito.

css

:first-child { font-weight: bold; }

Pseudo-classe Estrutural: Último Filho

Seleciona o último elemento filho de seu pai. Útil para remover margens ou paddings desnecessários no final de uma lista ou grupo de elementos.

css

:last-child { margin-bottom: 0; }

Pseudo-classe Estrutural: Filhos Ímpares

Seleciona todos os elementos filhos que estão em posições ímpares (1º, 3º, 5º, etc.) de seu pai. Comumente usado para criar listras em tabelas ou listas (zebra-striping).

css

:nth-child(odd) { background: #f0f0f0; }

Pseudo-classe Estrutural: Filhos Pares

Seleciona todos os elementos filhos que estão em posições pares (2º, 4º, 6º, etc.) de seu pai. Complementa o estilo de zebra-striping.

css

:nth-child(even) { background: #fff; }

Pseudo-classe Estrutural: Terceiro Filho

Seleciona o terceiro elemento filho de seu pai. O número dentro dos parênteses especifica a posição exata do filho a ser selecionado.

css

:nth-child(3) { color: red; }

Pseudo-classe de Formulário: Checked

Aplica estilos a elementos de input de rádio ou checkbox quando eles estão marcados (selecionados). Neste exemplo, o elemento aumenta de tamanho quando marcado.

css

:checked { transform: scale(1.2); }

Pseudo-classe de Formulário: Disabled

Aplica estilos a elementos de formulário que estão desabilitados (com o atributo `disabled`). Neste exemplo, o elemento fica semi-transparente para indicar que não pode ser interagido.

css

:disabled { opacity: 0.5; }

Pseudo-classe de Formulário: Enabled

Aplica estilos a elementos de formulário que estão habilitados (sem o atributo `disabled`). Neste exemplo, o cursor muda para um ponteiro para indicar que o elemento é interativo.

css

:enabled { cursor: pointer; }

Pseudo-classe de Formulário: Required

Aplica estilos a campos de formulário que possuem o atributo `required`, indicando que são de preenchimento obrigatório. Neste exemplo, uma borda vermelha é adicionada.

css

:required { border: 2px solid red; }

Pseudo-classe de Formulário: Valid

Aplica estilos a campos de formulário cujo conteúdo é considerado válido de acordo com suas regras de validação (por exemplo, um email bem formatado em um campo `type="email"`).

css

:valid { border-color: green; }

Pseudo-elemento: Antes do Conteúdo

Insere conteúdo gerado por CSS antes do conteúdo real de um elemento. O valor da propriedade `content` é obrigatório. Comumente usado para ícones, aspas ou marcadores decorativos.

css

::before { content: "→"; }

Pseudo-elemento: Depois do Conteúdo

Insere conteúdo gerado por CSS depois do conteúdo real de um elemento. Similar a `::before`, mas posiciona o conteúdo no final.

css

::after { content: "←"; }

Pseudo-elemento: Primeira Linha

Aplica estilos à primeira linha de texto de um elemento de bloco. A "primeira linha" é determinada pela largura do elemento e não pelo HTML. Neste exemplo, a primeira linha fica em negrito.

css

::first-line { font-weight: bold; }

Pseudo-elemento: Primeira Letra

Aplica estilos à primeira letra do texto de um elemento de bloco. Comumente usado para criar efeitos de "drop cap" ou letras capitulares, aumentando o tamanho da primeira letra.

css

::first-letter { font-size: 2em; }

Pseudo-elemento: Texto Selecionado

Aplica estilos ao texto que o usuário selecionou (destacou) em um documento. Neste exemplo, o fundo do texto selecionado ficará amarelo. As propriedades que podem ser alteradas são limitadas.

css

::selection { background: yellow; }

🚀 Propriedades Avançadas

20 snippets

Esta seção explora propriedades CSS mais avançadas que permitem criar efeitos visuais sofisticados, como filtros de imagem, sombras, gradientes complexos e recortes de elementos. Essas ferramentas são ideais para designers e desenvolvedores que buscam adicionar um toque moderno e criativo às suas interfaces.

Filtro: Desfoque (Blur)

Aplica um efeito de desfoque gaussiano ao elemento. Um valor de `5px` indica que os pixels serão desfocados em um raio de 5 pixels. Valores maiores resultam em mais desfoque.

css

filter: blur(5px);

Filtro: Brilho

Ajusta o brilho do elemento. Um valor de `1.2` (ou 120%) aumenta o brilho em 20%. `1` é o brilho normal, `0` torna o elemento totalmente preto.

css

filter: brightness(1.2);

Filtro: Contraste

Ajusta o contraste do elemento. Um valor de `1.5` (ou 150%) aumenta o contraste em 50%. `1` é o contraste normal, `0` torna o elemento cinza.

css

filter: contrast(1.5);

Filtro: Escala de Cinza

Converte as cores do elemento para uma escala de cinza. Um valor de `100%` remove completamente a saturação das cores, tornando-o em preto e branco. `0%` mantém as cores originais.

css

filter: grayscale(100%);

Filtro: Efeito Sépia

Aplica um efeito sépia ao elemento, dando-lhe um tom marrom-avermelhado antigo. Um valor de `50%` aplica metade do efeito total.

css

filter: sepia(50%);

Filtro: Rotação de Matiz

Rotaciona as cores do elemento no círculo de cores. `90deg` desloca a matiz em 90 graus, alterando as cores de forma dramática. `0deg` ou `360deg` não tem efeito.

css

filter: hue-rotate(90deg);

Sombra Suave em Caixa

Aplica uma sombra suave ao redor da caixa do elemento. Os valores são: deslocamento X (0), deslocamento Y (2px), raio de desfoque (4px) e cor (`rgba(0,0,0,0.1)` - preto com 10% de opacidade).

css

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Sombra Média em Caixa

Aplica uma sombra de intensidade média à caixa do elemento, com maior deslocamento Y e raio de desfoque, e 20% de opacidade.

css

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

Sombra Forte em Caixa

Aplica uma sombra mais proeminente à caixa do elemento, com maior deslocamento, desfoque e 30% de opacidade, criando um efeito de elevação mais acentuado.

css

box-shadow: 0 8px 16px rgba(0,0,0,0.3);

Sombra no Texto

Aplica uma sombra ao texto do elemento. Os valores são: deslocamento X (2px), deslocamento Y (2px), raio de desfoque (4px) e cor (`rgba(0,0,0,0.3)`).

css

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

Sombra Interna em Caixa

Aplica uma sombra interna (inset) à caixa do elemento, criando um efeito de profundidade ou de elemento "pressionado". O termo `inset` é adicionado antes dos outros valores.

css

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Gradiente Linear Diagonal

Aplica um gradiente linear que se estende em um ângulo de 45 graus, transicionando da cor `#ff7e5f` para `#feb47b`. O ângulo pode ser especificado em `deg`, `grad`, `rad` ou `turn`.

css

background: linear-gradient(45deg, #ff7e5f, #feb47b);

Gradiente Radial Básico

Aplica um gradiente radial com forma de círculo, começando com a cor `#ff7e5f` no centro e transicionando para `#feb47b` nas bordas.

css

background: radial-gradient(circle, #ff7e5f, #feb47b);

Gradiente Cônico

Aplica um gradiente cônico que gira em torno de um ponto central, criando um efeito de "fatia de pizza". `from 0deg` define o ponto de partida da rotação. As cores são distribuídas angularmente.

css

background: conic-gradient(from 0deg, #ff7e5f, #feb47b, #ff7e5f);

Gradiente Linear Repetido

Cria um padrão de gradiente linear que se repete. Neste exemplo, ele cria listras de 10px em `#ff7e5f` e 10px em `#feb47b`, repetindo-se em um ângulo de 45 graus.

css

background: repeating-linear-gradient(45deg, #ff7e5f, #ff7e5f 10px, #feb47b 10px, #feb47b 20px);

Clip Path: Recorte Circular

Recorta o elemento em uma forma circular. `circle(50%)` cria um círculo com raio de 50% do menor lado do elemento, centralizado. O conteúdo fora do caminho de recorte é invisível.

css

clip-path: circle(50%);

Clip Path: Recorte Poligonal

Recorta o elemento em uma forma poligonal definida por uma lista de coordenadas de pontos. Neste exemplo, cria uma forma de diamante.

css

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Clip Path: Recorte Elíptico

Recorta o elemento em uma forma elíptica. `ellipse(rx ry at x y)` define os raios horizontal e vertical e a posição do centro da elipse.

css

clip-path: ellipse(50% 40% at 50% 50%);

Máscara de Imagem

Aplica uma imagem como máscara para o elemento. A imagem da máscara (geralmente um PNG com transparência ou SVG) define quais partes do elemento são visíveis e quais são transparentes.

css

mask-image: url("mask.png");

Backdrop Filter: Desfoque do Fundo

Aplica um efeito de filtro à área de fundo *atrás* do elemento. Neste exemplo, o conteúdo visível através do elemento será desfocado em 5 pixels, criando um efeito de vidro fosco. Requer suporte do navegador e geralmente é usado com um fundo semi-transparente no elemento.

css

backdrop-filter: blur(5px);

🎨 CSS Custom Properties (Variáveis)

17 snippets

As CSS Custom Properties, também conhecidas como variáveis CSS, permitem definir valores reutilizáveis em uma folha de estilos. Elas facilitam a manutenção, promovem a consistência no design e possibilitam a criação de temas dinâmicos, tornando o CSS mais flexível e poderoso.

Início da Declaração Global de Variáveis

O seletor `:root` representa o elemento raiz do documento (o elemento `<html>`). Declarar variáveis aqui as torna acessíveis globalmente em todo o documento CSS.

css

:root {

Declaração de Variável: Cor Primária

Declara uma variável CSS chamada `--primary-color` e atribui a ela o valor hexadecimal `#3498db` (um tom de azul). Nomes de variáveis CSS começam com dois hífens (`--`).

css

  --primary-color: #3498db;

Declaração de Variável: Cor Secundária

Declara uma variável CSS chamada `--secondary-color` e atribui a ela o valor `#2ecc71` (um tom de verde).

css

  --secondary-color: #2ecc71;

Declaração de Variável: Tamanho Base da Fonte

Declara uma variável CSS para definir o tamanho base da fonte, facilitando a consistência tipográfica em todo o projeto.

css

  --font-size-base: 16px;

Declaração de Variável: Unidade de Espaçamento

Declara uma variável CSS para definir uma unidade de espaçamento, útil para criar um sistema de espaçamento consistente e baseado em uma grade.

css

  --spacing-unit: 8px;

Fim da Declaração de Variáveis

Fecha o bloco de declaração de variáveis CSS dentro do seletor `:root`.

css

Uso de Variável para Cor

Aplica o valor da variável `--primary-color` à propriedade `color`. A função `var()` é usada para acessar o valor de uma custom property.

css

color: var(--primary-color);

Uso de Variável para Tamanho de Fonte

Aplica o valor da variável `--font-size-base` à propriedade `font-size`, garantindo que o texto use o tamanho base definido.

css

font-size: var(--font-size-base);

Uso de Variável para Margem

Aplica o valor da variável `--spacing-unit` à propriedade `margin`, usando a unidade de espaçamento consistente.

css

margin: var(--spacing-unit);

Cálculo com Variável

Utiliza a função `calc()` para realizar operações matemáticas com variáveis CSS. Neste caso, o padding é definido como o dobro do valor de `--spacing-unit`, resultando em `16px`.

css

padding: calc(var(--spacing-unit) * 2);

Variável com Valor Padrão (Fallback)

Usa a variável `--primary-color`. Se a variável não estiver definida, o valor de fallback `#333` (cinza escuro) será usado. Isso aumenta a robustez do CSS.

css

color: var(--primary-color, #333);

Variável com Fallback Explícito

Usa a variável `--font-size-base` com um valor de fallback de `16px` caso a variável não seja encontrada ou esteja indefinida.

css

font-size: var(--font-size-base, 16px);

Fallback Aninhado de Variáveis

Demonstra o uso de fallbacks aninhados. Tenta usar `--bg-color`. Se não estiver definida, tenta `--white`. Se `--white` também não estiver definida, usa o valor final `#fff`.

css

background: var(--bg-color, var(--white, #fff));

Media Query para Modo Escuro

Inicia um bloco de estilos que será aplicado se o sistema operacional do usuário estiver configurado para o modo escuro. Permite criar temas dinâmicos que se adaptam às preferências do usuário.

css

@media (prefers-color-scheme: dark) {

Variável de Cor para Modo Escuro

Dentro da media query de modo escuro, redefine o valor da variável `--primary-color` para um tom de azul mais claro, adequado para fundos escuros.

css

  --primary-color: #5dade2;

Variável de Fundo para Modo Escuro

Define uma variável `--bg-color` para um tom de cinza muito escuro, que será usado como cor de fundo no modo escuro.

css

  --bg-color: #1a1a1a;

Fechar Media Query

Fecha o bloco de estilos da media query, encerrando as regras condicionais para o modo escuro.

css

Cheatsheets relacionados

Ver todos os cheatsheets

javascript128 snippets

Preview

const nome = "João"

intermediate

JS Moderno (ES6+): O Essencial

Pare de escrever código legado. Domine Arrow Functions, Async/Await e Destructuring que todo dev sênior usa hoje.

html154 snippets

Preview

<!DOCTYPE html>

advanced

HTML5: Tags Semânticas & SEO

O Google odeia <div>. Use a estrutura semântica correta para colocar seu site no topo das buscas sem gastar com anúncios.

Ver todos os cheatsheets