Meta tags:
description=Referência agrupada das principais propriedades CSS3, organizada por módulo (Animação, Flexbox, Grid, Transforms e mais) com links para capítulos completos.;

Headings (most frequently used words):

de, propriedades, css3, layout, como, usar, esta, referência, lista, referências, relacionadas, prática, uma, nota, sobre, prefixos, fornecedor, vs, css2, que, mudou, animação, fundo, borda, cor, transparência, efeitos, filtro, flexible, box, fonte, grid, multi, coluna, contorno, texto, transform, transição, formatação, visual,

Text of the page (most frequently used words):
grid (71), border (59), para (50), column (45), flex (35), css (34), text (34), color (29), #propriedades (28), background (27), box (25), animation (25), font (24), propriedade (23), width (22), transform (21), uma (21), css3 (20), transition (20), overflow (20), image (19), style (19), template (18), gap (17), aprender (16), layout (16), align (15), shadow (15), radius (15), linha (15), row (15), auto (14), descrição (14), columns (13), elemento (13), abreviação (13), break (13), colunas (13), define (13), left (12), top (12), keyframes (12), offset (12), por (12), size (11), decoration (11), mais (11), ease (11), copiar (11), wrap (11), right (11), bottom (11), como (10), padding (10), content (10), das (10), que (10), quando (10), rule (10), item (10), eixo (10), position (10), flexbox (9), filter (9), clip (9), borda (9), com (9), espaço (9), card (9), coluna (9), animação (9), todos (8), hover (8), longo (8), space (8), justify (8), tamanho (8), start (8), end (8), itens (8), items (8), stroke (8), html (7), page (7), margin (7), são (7), blur (7), sem (7), perspective (7), word (7), texto (7), line (7), last (7), número (7), count (7), imagem (7), guia (6), efeitos (6), hidden (6), padrão (6), height (6), sintaxe (6), out (6), all (6), quanto (6), antes (6), origin (6), rotate (6), onde (6), estilo (6), linhas (6), outline (6), entre (6), fill (6), rows (6), reverse (6), direction (6), opacity (6), imagens (6), type (6), variant (6), w3docs (5), referência (5), url (5), controla (5), sombras (5), use (5), transição (5), timing (5), function (5), duration (5), delay (5), animações (5), largura (5), repeat (5), areas (5), display (5), canto (5), mode (5), list (5), módulos (5), child (5), formatter (5), sobre (4), code (4), generator (4), editor (4), prática (4), javascript (4), quais (4), visuais (4), transições (4), qual (4), visible (4), none (4), css2 (4), before (4), after (4), aplica (4), property (4), múltiplas (4), valores (4), visibility (4), deg (4), transforms (4), pode (4), usado (4), solid (4), cor (4), alinhamento (4), span (4), flow (4), stretch (4), fonte (4), center (4), shrink (4), grow (4), basis (4), único (4), transparência (4), arredonda (4), cantos (4), bordas (4), cada (4), você (4), prefixos (4), suporte (4), navegadores (4), nth (4), first (4), json (3), encoder (3), quizzes (3), exercícios (3), php (3), lista (3), esta (3), seguintes (3), estado (3), página (3), precisa (3), capítulos (3), vertical (3), both (3), scroll (3), sizing (3), caixa (3), tempo (3), início (3), rgba (3), btn (3), está (3), backface (3), navegador (3), também (3), normal (3), white (3), nowrap (3), ellipsis (3), adicionou (3), todas (3), rem (3), automaticamente (3), modelo (3), começa (3), nome (3), contêiner (3), layouts (3), completo (3), filtro (3), brightness (3), quatro (3), arredondados (3), fundo (3), the (3), hero (3), fundos (3), instantâneos (3), ciclo (3), filtros (3), gradientes (3), abaixo (3), procure (3), módulo (3), spacing (3), range (3), max (3), letter (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), referências (2), relacionadas (2), usar (2), this (2), seletores (2), family (2), válidas (2), estilização (2), suaves (2), brilho (2), contraste (2), drop (2), gráficos (2), bidimensional (2), unidimensional (2), definitivo (2), movimento (2), recursos (2), pelo (2), usuário (2), requer (2), horizontal (2), resize (2), quase (2), modernos (2), adiciona (2), sombra (2), visual (2), curva (2), steps (2), cubic (2), bezier (2), linear (2), leva (2), mudanças (2), focus (2), active (2), independentes (2), ocorrem (2), steelblue (2), filhos (2), plano (2), preserve (2), ponto (2), aplicado (2), centro (2), funções (2), posição (2), transformado (2), face (2), dentro (2), inline (2), cortar (2), inter (2), decoração (2), dashed (2), dotted (2), underline (2), única (2), código (2), comprimento (2), tab (2), heading (2), with (2), quebra (2), contorno (2), positivo (2), negativo (2), não (2), ideal (2), quantas (2), etc (2), conteúdo (2), dividido (2), article (2), body (2), multi (2), distribui (2), explícitas (2), minmax (2), substituído (2), moderno (2), termina (2), trilhas (2), criadas (2), implicitamente (2), especifica (2), area (2), footer (2), header (2), fit (2), responsive (2), fontes (2), condensed (2), adjust (2), ordem (2), order (2), alinha (2), principal (2), around (2), between (2), relação (2), aos (2), irmãos (2), extra (2), direção (2), ser (2), self (2), transversal (2), flexible (2), saturate (2), contrast (2), img (2), superior (2), direito (2), esquerdo (2), fatias (2), source (2), nove (2), slice (2), rounded (2), estende (2), além (2), outset (2), regiões (2), inferior (2), shape (2), cover (2), default (2), needed (2), pelos (2), play (2), state (2), regra (2), name (2), iteration (2), alternate (2), slide (2), translatex (2), flexíveis (2), baseados (2), cores (2), prefixo (2), sempre (2), moz (2), webkit (2), ainda (2), fornecedor (2), link (2), capítulo (2), properties (2), linguagem (2), introdução (2), links (2), unicode (2), rendering (2), skip (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), feature (2), empty (2), counter (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, decorativa, moderna, outros, baseado, assim, souber, estes, cobrem, usados, profundidade, torna, redimensionável, seja, diferente, determina, incluem, excluem, projetos, definem, redor, interna, inset, spread, formatação, velocidade, fim, aguardar, começar, orientadas, simples, escrever, movimentos, loop, etapas, interação, dodgerblue, smooth, animam, valor, outro, duração, especificada, muda, renderizados, achatados, flat, torno, transformação, suas, variantes, matrix, skew, scale, translate, fuga, distância, observador, menores, efeito, dramático, pai, traseira, visível, voltada, longe, essencial, virada, cartão, back, 180, rotatey, 600, flip, movem, rotacionam, escalam, inclinam, elementos, afetar, fluxo, documento, quebrar, palavra, inquebrável, evitar, padronizado, quebras, palavras, keep, sinalizado, mostrar, método, justificação, ativo, character, wavy, double, desenhadas, through, overline, sublinhado, sobrelinhado, tachado, última, bloco, justificado, caractere, tabulação, blocos, espaços, pre, subtle, title, truncate, long, titles, controle, refinada, decorações, afasta, fora, contrário, margens, afeta, cria, couberem, abrange, espessura, régua, divisória, balanceadas, preenchidas, sequencialmente, balance, breaks, ddd, shorthand, 400, two, definida, semelhante, jornal, comprimentos, porcentagens, unidades, áreas, nomeadas, usando, arte, ascii, baseada, strings, antigo, prefira, posicionados, preenchem, dense, ultrapassam, explícito, atribui, área, nomeada, sua, 200, sidebar, main, named, 240, three, sistema, posiciona, simultaneamente, tornando, grids, componentes, complexos, seleciona, variante, condensada, expandida, família, ultra, expanded, preserva, aparente, primeira, escolha, disponível, ajustando, substituta, corresponder, proporção, altera, modificar, dom, evenly, quebram, encolhe, escasso, cresce, inicial, livre, distribuído, substitui, consulte, 300, classic, centered, lida, espaçamento, svg, sepia, invert, hue, grayscale, modal, backdrop, projetada, diretamente, necessário, inteiro, seus, invisível, totalmente, opaco, canal, nos, hsla, raios, diferir, gradiente, divide, esticadas, repetidas, arredondadas, repeated, stretched, usa, dividida, aceita, raio, círculo, dois, elipse, 999, badge, pill, button, baseadas, exigiam, truques, preencher, caber, completamente, contain, origem, até, reaches, edge, fills, crop, jpg, estendeu, suportar, dimensionamento, recorte, camadas, intermediários, passa, easing, pausa, retoma, útil, botões, alternância, running, paused, nomeia, aplicar, vezes, reproduzida, infinite, após, término, backwards, forwards, dura, 500ms, reprodução, atraso, meio, sub, declaração, banner, 100, from, minimal, example, permitem, descrever, transita, série, vinculam, controlam, personalizada, múltiplos, cobria, fundamental, posicionamento, construiu, essa, base, capacidades, estavam, ausentes, muito, limitadas, anteriormente, mudou, listadas, nunca, hoje, dia, escreva, apenas, precisar, oferecer, legado, liste, último, ela, sobreponha, demais, always, unprefixed, older, prefixes, were, during, experimental, phase, enquanto, eram, experimentais, lançavam, encontrá, los, bases, antigas, nota, alcançaram, estável, momentos, diferentes, maioria, segura, mas, verifique, adições, recentes, exemplo, certas, utilizá, las, produção, atenção, dos, tem, seu, próprio, completa, padrões, demos, executáveis, clique, ver, detalhes, títulos, espelham, então, effects, transitions, encontre, grupo, novo, comece, aprofundar, individuais, índice, rápida, introduzidas, significativamente, estendidas, organizadas, pertencem, vivo, evolução, recente, cascading, sheets, vez, lançamento, monolítico, podem, implementar, lançar, separadamente, novas, conjunto, original, oferecendo, necessidade, agrupada, principais, organizada, completos, zoom, index, writing, will, change, widows, user, select, bidi, orientation, indent, ink, combine, upright, table, linecap, dashoffset, dasharray, speak, outside, scrollbar, behavior, quotes, pointer, events, place, orphans, distance, mix, media, lines, clamp, isolation, initial, import, hyphens, hanging, punctuation, weight, numeric, ligatures, east, asian, caps, alternates, language, override, kerning, values, settings, float, cells, cursor, reset, increment, clear, charset, caret, caption, side, collapse, block, bleed, attachment, appearance, visited, valid, target, selection, scope, root, required, write, placeholder, optional, not, lang, invalid, indeterminate, fullscreen, enabled, disabled, dir, checked, selectors, guides, nomes, tabelas, class, uso, basic, entrar, pesquisar, formatters, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
late areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propriedades css3 referência agrupada das principais propriedades css3 organizada por módulo animação flexbox grid transforms e mais com links para capítulos completos css3 é a evolução mais recente da linguagem cascading style sheets em vez de ser um único lançamento monolítico o css3 é dividido em módulos independentes animações flexbox grid layout fundos e bordas transforms filtros e mais que os navegadores podem implementar e lançar separadamente cada módulo adicionou novas propriedades ao conjunto original do css2 oferecendo cantos arredondados gradientes sombras animações layouts flexíveis e baseados em grid além de filtros visuais sem necessidade de imagens ou javascript esta página é um índice de referência rápida das propriedades introduzidas ou significativamente estendidas no css3 organizadas pelo módulo ao qual pertencem cada linha leva a um capítulo completo com sintaxe valores e exemplos ao vivo se você é novo na linguagem comece pelos capítulos introdução ao css e sintaxe css antes de se aprofundar em propriedades individuais como usar esta referência encontre uma propriedade por grupo os títulos abaixo espelham os módulos do css3 então se você precisa de uma propriedade de layout procure em flexible box layout ou grid layout para movimento procure em animation ou transitions para efeitos visuais procure em filter effects ou transform properties clique para ver detalhes cada propriedade tem link para seu próprio capítulo com a lista completa de valores padrões e demos executáveis atenção ao suporte dos navegadores os módulos css3 alcançaram suporte estável e sem prefixo em momentos diferentes a maioria das propriedades abaixo é segura em todos os navegadores modernos mas sempre verifique o suporte para adições mais recentes por exemplo certas propriedades column antes de utilizá las em produção uma nota sobre prefixos de fornecedor enquanto os módulos css3 ainda eram experimentais os navegadores lançavam propriedades com prefixos de fornecedor como webkit moz ms e o você ainda pode encontrá los em bases de código mais antigas older code prefixes were needed during the experimental phase box webkit transform rotate 15 deg moz transform rotate 15 deg transform rotate 15 deg always list the unprefixed property last copiar para as propriedades listadas abaixo você quase nunca precisa de prefixos hoje em dia escreva o nome padrão sem prefixo use prefixos apenas quando precisar oferecer suporte a um navegador legado e sempre liste a propriedade padrão por último para que ela sobreponha as demais css3 vs css2 o que mudou o css2 cobria o modelo de caixa fundamental cores fontes e posicionamento o css3 construiu sobre essa base com as seguintes capacidades que estavam ausentes ou muito limitadas anteriormente cantos arredondados e imagens de borda border radius border image sombras box shadow text shadow gradientes e múltiplos fundos background size background clip layouts flexíveis e baseados em grid flexbox flex align items grid grid grid template columns transforms 2d e 3d transform perspective transições suaves de estado transition animações por keyframes animation keyframes texto em múltiplas colunas column count column gap filtros visuais filter blur brightness contrast transparência personalizada opacity lista de propriedades css3 propriedades de animação as animações por keyframes permitem descrever como um elemento transita por uma série de instantâneos de estilo a regra keyframes define os instantâneos as propriedades animation as vinculam e controlam em um elemento minimal animation example keyframes slide in from transform translatex 100 opacity 0 to transform translatex 0 opacity 1 banner animation slide in 0 4 s ease out both copiar propriedade descrição animation abreviação que define todas as sub propriedades de animação em uma única declaração animation delay especifica quando uma animação começa positivo atraso negativo início no meio do ciclo animation direction controla a direção de reprodução normal reverse alternate ou alternate reverse animation duration define quanto tempo dura um ciclo de animação ex 0 4s 500ms animation fill mode define o estilo do elemento antes do início e ou após o término da animação forwards backwards both animation iteration count quantas vezes a animação é reproduzida um número ou infinite animation name nomeia a regra keyframes a aplicar animation play state pausa paused ou retoma running uma animação útil para botões de alternância animation timing function curva de easing para cada ciclo ease linear ease in out cubic bezier steps keyframes at rule define os instantâneos de estilo intermediários keyframes pelos quais uma animação passa propriedades de fundo o css3 estendeu os fundos para suportar dimensionamento regiões de recorte e múltiplas imagens em camadas em um único elemento responsive hero with background size hero background image url img hero jpg background size cover fills the box crop as needed background position center background clip border box default image reaches border edge copiar propriedade descrição background clip controla até onde o fundo se estende border box padding box ou content box background origin define a origem para background position border box padding box ou content box background size define o tamanho da imagem de fundo um comprimento auto cover preencher pode cortar ou contain caber completamente propriedades de borda o css3 adicionou cantos arredondados e bordas baseadas em imagens recursos que antes exigiam truques com imagens rounded button btn border radius 6 px border 2 px solid steelblue pill shape badge border radius 999 px copiar propriedade descrição border bottom left radius arredonda o canto inferior esquerdo aceita um raio círculo ou dois elipse border bottom right radius arredonda o canto inferior direito border image usa uma imagem como borda dividida em nove regiões border image outset o quanto a imagem de borda se estende além da caixa de borda border image repeat se as bordas da imagem são stretched esticadas repeated repetidas ou rounded arredondadas border image slice divide a imagem fonte em nove fatias quatro cantos quatro bordas centro border image source o url da imagem ou gradiente usado como borda border image width largura das fatias da imagem de borda pode diferir do border width do css border radius abreviação para os quatro raios de canto border top left radius arredonda o canto superior esquerdo border top right radius arredonda o canto superior direito cor e transparência propriedade descrição opacity define a transparência de um elemento inteiro e seus filhos de 0 invisível a 1 totalmente opaco para transparência por canal use rgba ou hsla nos valores de color background color efeitos de filtro a propriedade filter aplica efeitos gráficos blur brilho contraste sombra projetada etc diretamente no css sem editor de imagens necessário card hover img filter brightness 1 1 saturate 1 2 transition filter 0 2 s ease modal backdrop filter blur 4 px copiar propriedade descrição filter aplica uma ou mais funções de filtro blur brightness contrast drop shadow grayscale hue rotate invert opacity saturate sepia e url filtro svg flexible box layout flexbox é um modelo de layout unidimensional distribui itens ao longo de um único eixo linha ou coluna e lida com alinhamento espaçamento e quebra de linha automaticamente classic centered card card grid display flex flex wrap wrap gap 1 rem justify content center align items stretch card flex 1 1 300 px grow shrink basis copiar para um guia completo consulte o guia definitivo do flexbox propriedade descrição align content alinha as linhas de um contêiner flex ao longo do eixo transversal quando há espaço extra flex start flex end center space between space around stretch align items alinhamento padrão no eixo transversal para todos os itens flex de um contêiner align self substitui align items para um único item flex flex abreviação para flex grow flex shrink e flex basis flex basis o tamanho inicial de um item flex antes de o espaço livre ser distribuído flex direction direção do eixo principal row row reverse column ou column reverse flex flow abreviação para flex direction e flex wrap flex grow o quanto um item flex cresce em relação aos irmãos quando há espaço extra flex shrink o quanto um item flex encolhe em relação aos irmãos quando o espaço é escasso flex wrap se os itens flex quebram para múltiplas linhas nowrap wrap wrap reverse justify content alinha itens ao longo do eixo principal flex start flex end center space between space around space evenly justify items alinhamento padrão no eixo inline para todos os itens de grid também usado em grid order altera a ordem visual de um item flex ou grid sem modificar a ordem no dom propriedades de fonte propriedade descrição font size adjust preserva o tamanho aparente do texto quando a fonte de primeira escolha não está disponível ajustando o tamanho da fonte substituta para corresponder à proporção x height font stretch seleciona uma variante condensada ou expandida de uma família de fontes ex condensed expanded ultra condensed grid layout css grid é um sistema de layout bidimensional posiciona itens em linhas e colunas simultaneamente tornando o ideal para layouts de página e grids de componentes complexos three column responsive grid layout display grid grid template columns repeat auto fit minmax 240 px 1 fr gap 1 5 rem named template areas page display grid grid template areas header header sidebar main footer footer grid template columns 200 px 1 fr grid template rows auto 1 fr auto copiar propriedade descrição grid abreviação para todas as propriedades do contêiner grid grid area atribui um item de grid a uma área nomeada ou especifica sua posição de linha coluna como abreviação grid auto columns define o tamanho da coluna para trilhas criadas implicitamente quando os itens ultrapassam o grid explícito grid auto flow controla como os itens posicionados automaticamente preenchem o grid row column dense grid auto rows define o tamanho da linha para trilhas criadas implicitamente grid column abreviação para grid column start e grid column end grid column end onde um item termina ao longo do eixo de coluna número de linha span ou nome grid column gap espaço entre colunas substituído por column gap no css moderno grid column start onde um item começa ao longo do eixo de coluna grid gap abreviação para row gap e column gap nome antigo prefira gap grid row abreviação para grid row start e grid row end grid row end onde um item termina ao longo do eixo de linha grid row gap espaço entre linhas substituído por row gap no css moderno grid row start onde um item começa ao longo do eixo de linha grid template abreviação para grid template rows grid template columns e grid template areas grid template areas define áreas de modelo nomeadas usando uma sintaxe de arte ascii baseada em strings grid template columns define o número e o tamanho das colunas explícitas comprimentos porcentagens unidades fr repeat minmax grid template rows define o número e o tamanho das linhas explícitas propriedades de layout multi coluna o layout multi coluna distribui o conteúdo automaticamente por um número ou largura definida de colunas semelhante ao layout de um jornal two column article body article body columns 2 400 px shorthand column count column width column gap 2 rem column rule 1 px solid ddd h2 column span all heading breaks out of columns copiar propriedade descrição column count número de colunas em que o conteúdo é dividido column fill se as colunas são balanceadas balance ou preenchidas sequencialmente auto column gap espaço entre as colunas também usado em flexbox e grid column rule abreviação para a linha divisória entre as colunas estilo largura cor column rule color cor da linha entre as colunas column rule style estilo de linha da régua solid dashed dotted etc column rule width espessura da linha entre as colunas column span se um elemento abrange uma coluna none ou todas as colunas all column width largura ideal da coluna o navegador cria quantas colunas couberem columns abreviação para column count e column width propriedades de contorno propriedade descrição outline offset afasta o contorno da borda do elemento positivo para fora negativo para dentro ao contrário das margens não afeta o layout propriedades de texto o css3 adicionou controle sobre overflow de texto quebra sombras e estilização refinada de decorações truncate long titles with ellipsis card title white space nowrap overflow hidden text overflow ellipsis subtle heading shadow h1 text shadow 1 px 2 px 4 px rgba 0 0 0 0 25 copiar propriedade descrição tab size largura de um caractere de tabulação em pre e blocos de código número de espaços ou comprimento text align last alinhamento da última ou única linha em um bloco de texto justificado text decoration color cor do sublinhado sobrelinhado ou tachado text decoration line quais linhas de decoração são desenhadas underline overline line through ou none text decoration style estilo da linha de decoração solid double dotted dashed ou wavy text justify método de justificação usado quando text align justify está ativo auto inter word inter character text overflow como o texto inline em overflow é sinalizado clip cortar ou ellipsis mostrar ...