CSS3

Cartões · 55

Box Model (Modelo de Caixa)

div { width: 200px; padding: 10px; border: 2px solid black; margin: 15px; } - Define o espaçamento interno, borda e margem ao redor do conteúdo.

box-sizing: border-box

* { box-sizing: border-box; } - Faz com que padding e borda sejam incluídos na largura e altura totais do elemento.

display: flex

.container { display: flex; } - Transforma o elemento em contêiner flexível, alinhando seus itens filhos diretamente em linha.

justify-content (Flexbox)

.container { display: flex; justify-content: center; } - Alinha os itens filhos ao centro ao longo do eixo principal (horizontal por padrão).

align-items (Flexbox)

.container { display: flex; align-items: center; } - Alinha os itens verticalmente no centro ao longo do eixo transversal.

flex-direction

.container { display: flex; flex-direction: column; } - Altera a direção dos itens flexíveis para empilhamento vertical.

flex-wrap

.container { display: flex; flex-wrap: wrap; } - Permite que os itens quebrem para a próxima linha quando não houver espaço.

flex-grow

.item { flex-grow: 1; } - Permite que o item se expanda para preencher proporcionalmente o espaço restante no contêiner.

gap

.container { display: flex; gap: 20px; } - Define o espaçamento uniforme entre os elementos filhos sem margens manuais.

display: grid

.grid { display: grid; } - Ativa o layout bidimensional baseado em colunas e linhas.

grid-template-columns

.grid { grid-template-columns: 1fr 2fr 1fr; } - Cria três colunas proporcionais usando a unidade de fração fr.

grid-template-rows

.grid { grid-template-rows: 100px auto; } - Define a primeira linha com 100px fixos e a segunda ajustada ao conteúdo.

repeat() e auto-fit em Grid

.grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } - Cria colunas responsivas que se adaptam sem media queries.

grid-column

.item { grid-column: span 2; } - Faz com que o elemento ocupe duas colunas consecutivas na grade.

position: relative

.card { position: relative; top: 10px; } - Desloca o elemento em relação à sua posição normal sem alterar o fluxo do documento.

position: absolute

.modal { position: absolute; top: 0; left: 0; } - Posiciona o elemento em relação ao ancestral posicionado mais próximo.

position: fixed

.menu { position: fixed; top: 0; width: 100%; } - Fixa o elemento na janela do navegador, mesmo durante a rolagem.

position: sticky

header { position: sticky; top: 0; } - Alterna entre relativo e fixo dependendo da rolagem da página.

z-index

.topo { z-index: 10; position: relative; } - Define a ordem de sobreposição no eixo Z para elementos posicionados.

border-radius

.avatar { border-radius: 50%; } - Arredonda os cantos do elemento, tornando-o circular se for quadrado.

box-shadow

.card { box-shadow: 0 4px 8px rgba(0,0,0,0.2); } - Aplica sombra externa com deslocamento X, Y, desfoque e cor com opacidade.

text-shadow

h1 { text-shadow: 2px 2px 4px #000; } - Adiciona sombra ao texto para destacar a tipografia sobre fundos variados.

linear-gradient()

.hero { background: linear-gradient(to right, #ff7e5f, #feb47b); } - Cria uma transição gradual de cores em direção horizontal.

radial-gradient()

.circulo { background: radial-gradient(circle, #fff, #000); } - Aplica um degradê que se irradia a partir do centro.

opacity

.item { opacity: 0.5; } - Torna o elemento e todos os seus filhos 50% transparentes.

Cores RGBA

.overlay { background-color: rgba(0, 0, 0, 0.7); } - Aplica cor preta com canal alfa de 70% sem afetar o texto filho.

Cores HSL / HSLA

.btn { background-color: hsla(210, 100%, 50%, 0.8); } - Define cor por matiz (graus), saturação, luminosidade e transparência.

Variáveis CSS (Custom Properties)

:root { --cor-primaria: #3498db; } a { color: var(--cor-primaria); } - Declara e consome variáveis reutilizáveis nativas.

transition

.btn { transition: background-color 0.3s ease; } - Suaviza a mudança de cor de fundo durante 300 milissegundos.

transform: translate()

.box { transform: translate(50px, 100px); } - Move o elemento nos eixos X e Y sem acionar repintura completa do layout.

transform: scale()

.card:hover { transform: scale(1.05); } - Aumenta o tamanho do elemento em 5% no estado hover.

transform: rotate()

.icone { transform: rotate(45deg); } - Gira o elemento no sentido horário no ângulo especificado.

transform-origin

.ponteiro { transform-origin: bottom center; } - Altera o ponto pivô de onde a rotação ou escala é aplicada.

@keyframes

@keyframes piscar { from { opacity: 1; } to { opacity: 0; } } - Cria uma animação customizada definindo quadros de início e fim.

animation

.loader { animation: piscar 1s infinite alternate; } - Executa a animação 'piscar' continuamente em ciclos alternados.

Media Query (@media)

@media (max-width: 768px) { nav { display: none; } } - Oculta a navegação quando a tela for de 768px ou menor.

Unidade rem

p { font-size: 1.2rem; } - Define o tamanho relativo ao font-size configurado no elemento raiz (html).

Unidade em

span { font-size: 0.8em; } - Define o tamanho proporcional ao tamanho da fonte do elemento pai.

Unidades de Viewport (vw / vh)

.banner { height: 100vh; width: 100vw; } - Ajusta altura e largura para preencher 100% da área visível do navegador.

calc()

.sidebar { width: calc(100% - 250px); } - Realiza cálculos matemáticos combinando unidades diferentes no valor da propriedade.

clamp()

h1 { font-size: clamp(1.5rem, 4vw, 3rem); } - Estabelece um valor dinâmico com limites mínimo e máximo pré-definidos.

min() e max()

.caixa { width: min(90%, 1200px); } - Seleciona dinamicamente o menor valor entre uma porcentagem e um limite fixo.

overflow

.painel { overflow: hidden; } - Corta e oculta qualquer conteúdo que ultrapasse os limites da caixa.

text-overflow: ellipsis

p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - Insere reticências (...) ao final de texto longo que transborda.

object-fit: cover

img { width: 100%; height: 200px; object-fit: cover; } - Recorta a imagem para cobrir a área mantendo sua proporção original.

cursor: pointer

button { cursor: pointer; } - Muda o ponteiro do mouse para a mãozinha de clique ao passar pelo elemento.

user-select: none

.icone { user-select: none; } - Impede que o usuário selecione acidentalmente o texto do elemento.

pointer-events: none

.badge { pointer-events: none; } - Ignora qualquer interação de clique do mouse sobre o elemento.

Pseudoclasse :hover

a:hover { text-decoration: underline; } - Aplica estilo somente enquanto o cursor está posicionado sobre o link.

Pseudoclasse :focus

input:focus { outline: 2px solid blue; } - Adiciona destaque visual quando o campo de entrada recebe o foco de digitação.

Pseudoclasse :nth-child()

li:nth-child(even) { background-color: #f0f0f0; } - Aplica estilos alternados a elementos pares em uma lista ordenada.

Pseudoelemento ::before

.aviso::before { content: '★ '; color: gold; } - Insere conteúdo visual decorativo antes do texto original via CSS.

Pseudoelemento ::after

.link::after { content: ' →'; } - Adiciona caractere ou ícone decorativo imediatamente após o texto do elemento.

backdrop-filter

.vidro { backdrop-filter: blur(10px); background: rgba(255,255,255,0.2); } - Aplica desfoque aos elementos posicionados atrás da caixa.

scroll-behavior: smooth

html { scroll-behavior: smooth; } - Habilita rolagem suave em links que apontam para âncoras na mesma página.