Dev NotesCascading Style Sheets (Tipo a maquiagem do seu site)

Propriedades CSS3 mais Comuns

Agora a gente vai dar uma olhada nas propriedades mais usadas do CSS3, aquelas que a gente mais encontra por aí pra dar um visual bacana pros nossos elementos HTML.

Sumário:

  1. Layout e Caixa - O Jeito que os Elementos se Comportam - Essas propriedades são as que a gente mais usa pra arrumar os elementos na página e controlar o espaço que eles ocupam.
  2. Dimensões e Espaçamentos - O Tamanho e o Espaço dos Elementos - Agora vamos falar sobre como controlar o tamanho dos nossos elementos e os espaços ao redor e dentro deles.
  3. Bordas e Sombras - O Estilo das Bordas e Sombras - Agora a gente vai dar um toque nas bordas e nas sombras dos elementos pra deixar tudo mais charmoso!
  4. Tipografia - O Estilo do Texto - Quer dar um talento nas letras do seu site? As opções abaixo te ajudam a controlar como a parada toda aparece!
  5. Cores e Fundo - Dando um Show de Cores e Fundos! - Quer deixar seu site com a sua cara? Aqui você encontra as ferramentas pra brincar com as cores e os fundos dos elementos.
  6. Flexbox - Arrumando a Casa com o Flexbox! - Quer deixar os elementos do seu site bem alinhadinhos e responsivos? O Flexbox é a ferramenta certa pra isso!
  7. Grid - Organizando Tudo com o Poder do Grid! - Quer criar layouts complexos e responsivos com facilidade? O Grid é tipo um superpoder pra organizar os elementos do seu site!
  8. Animações e Transições - Dando Vida ao Seu Site com Animações e Transições! - Quer que os elementos do seu site se movam, mudem de cor suavemente ou façam alguma mágica? As animações e transições são a chave pra isso!
  9. Transformações - Fazendo a Mágica Acontecer com Transformações! - Quer dar uma girada, uma esticada ou até mudar a perspectiva dos seus elementos? As transformações te dão esse poder!
  10. Interatividade e Cursor - Deixando o Site Mais Interativo (e Controlando o Mouse!) - Quer mudar a carinha do cursor do mouse ou decidir se dá pra clicar em algum elemento? Essas propriedades te ajudam!
  11. Listas - Organizando as Listas com Estilo! - Quer dar um visual diferente para os seus itens de lista? Com essas propriedades você controla os marcadores e a aparência.
  12. Colunas - Dividindo o Conteúdo em Colunas! - Quer apresentar seu texto em um formato de colunas, tipo jornal ou revista? Essas propriedades te ajudam a fazer isso!
  13. Outras Propriedades - Mais Poder para o Seu CSS! - Aqui você encontra mais algumas propriedades CSS que podem te ajudar a dar um toque especial nos seus elementos.

Layout e Caixa - O Jeito que os Elementos se Comportam

Essas propriedades são as que a gente mais usa pra arrumar os elementos na página e controlar o espaço que eles ocupam.

PropriedadeDescriçãoValor PadrãoValores Possíveis
displayEssa propriedade é super importante! Ela define como o elemento se comporta no layout, tipo se ele ocupa a linha inteira (`block`), só o espaço necessário (`inline`), ou uma mistura dos dois (`inline-block`). Tem outras opções mais avançadas como `flex` e `grid` pra layouts complexos.Por padrão, elementos como `<div>` são `block` e `<span>` são `inline`.
  • 'inline' (ocupa só o espaço necessário);
  • 'block' (ocupa a linha inteira);
  • 'inline-block' (mistura os dois);
  • 'flex' (flexível, ótimo pra layouts responsivos);
  • 'grid' (pra layouts em grade);
  • 'inline-flex' (flexível, mas ocupa só o espaço necessário);
  • 'inline-grid' (grade, mas ocupa só o espaço necessário);
  • 'none' (não aparece na página);

    • Exemplo:

    1div {
2	display: flex;
3}
    visibilityCom essa propriedade, você pode mostrar ou esconder um elemento. A diferença de `display: none` é que o elemento ainda ocupa espaço na página, mesmo invisível.`visible` (o elemento aparece).
  • 'visible' (o elemento aparece);
  • 'hidden' (o elemento não aparece, mas ainda ocupa espaço);
  • 'collapse' (só funciona em tabelas, o elemento desaparece e não ocupa espaço);

    • Exemplo:

    1div {
2	visibility: hidden;
3}
    overflowEssa propriedade entra em ação quando o conteúdo de um elemento é maior do que o espaço disponível. Ela diz o que fazer com o que 'sobra'.`visible` (o que sobrar vaza pra fora).
  • 'visible' (o que sobrar vaza pra fora);
  • 'hidden' (o que sobrar é cortado);
  • 'scroll' (aparece uma barra de rolagem se o conteúdo for maior);
  • 'auto' (o navegador decide se precisa de barra de rolagem ou não);
  • 'clip' (corta o conteúdo que sobrar, mas não mostra barra de rolagem);

    • Exemplo:

    1div {
2	overflow: hidden;
3}
    box-sizingEssa propriedade muda a forma como a largura e a altura de um elemento são calculadas. Com `border-box`, o `padding` e a `border` são incluídos na largura e altura que você define, o que geralmente facilita a vida!`content-box` (largura e altura só do conteúdo).
  • 'content-box' (só o conteúdo);
  • 'border-box' (inclui o padding e a border na largura e altura);

    • Exemplo:

    1div {
2	box-sizing: border-box;
3}
    positionEssa propriedade define como o elemento é posicionado na página. Tem várias opções, desde o posicionamento normal (`static`) até posicionamentos mais controlados como `relative`, `absolute`, `fixed` (que fica fixo na tela mesmo rolando a página), e `sticky` (que gruda ao rolar).`static` (posição normal).
  • 'static' (posição normal);
  • 'relative' (posição relativa ao normal);
  • 'absolute' (posição absoluta em relação ao pai);
  • 'fixed' (posição fixa na tela);
  • 'sticky' (posição grudada ao rolar);

    • Exemplo:

    1div {
2	position: relative;
3}
    top / right / bottom / leftEssas propriedades só funcionam se o `position` não for `static`. Elas dizem a distância do elemento das bordas da tela ou do elemento pai (dependendo do tipo de `position`).`auto` (o navegador decide).
  • 'auto' (o navegador decide);
  • valores em px, %, etc.;

    • Exemplo:

    1div {
2	top: 10px;
3	right: 20px;
4	bottom: 30px;
5	left: 40px;
6}
    z-indexQuando você tem elementos sobrepostos (com `position: absolute` ou `fixed`, por exemplo), o `z-index` define qual deles fica na frente. Elementos com `z-index` maior ficam por cima.`auto` (a ordem de aparição no HTML decide).
  • 'auto' (sem controle);
  • valores inteiros (quanto maior, mais em cima);

    • Exemplo:

    1div {
2	z-index: 1;
3}

    Dimensões e Espaçamentos - O Tamanho e o Espaço dos Elementos

    Agora vamos falar sobre como controlar o tamanho dos nossos elementos e os espaços ao redor e dentro deles.

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    width / heightEssas duas são básicas: `width` define a largura do elemento e `height` define a altura. Você pode usar pixels, porcentagens (relativo ao pai), e outras unidades mais modernas como `em`, `rem`, `vh`, `vw`.`auto` (o navegador tenta se virar sozinho).
  • 'auto' (o navegador decide);
  • valores em px, %, em, rem, vh, vw, min-content, max-content, fit-content;

    • Exemplo:

    1div {
2	width: 100px;
3	height: 100px;
4}
    max-width / max-height / min-width / min-heightÀs vezes, a gente quer limitar o tamanho de um elemento. `max-width` e `max-height` definem o tamanho máximo que ele pode atingir, e `min-width` e `min-height` definem o tamanho mínimo.`none` (sem limite).
  • 'none' (sem limite);
  • valores em px, %, em, rem, vh, vw, min-content, max-content, fit-content;

    • Exemplo:

    1div {
2	max-width: 100px;
3	max-height: 100px;
4	min-width: 50px;
5	min-height: 50px;
6}
    margin / padding`margin` é o espaço que fica FORA do elemento, tipo uma 'folga' dele em relação aos outros. `padding` é o espaço DENTRO do elemento, entre a borda e o conteúdo.`0` (sem espaço).
  • 'auto' (o navegador decide);
  • '0' (sem espaço);
  • valores em px, %, em, rem, vh, vw;

    • Exemplo:

    1div {
2	margin: 10px;
3	padding: 10px;
4}

    Bordas e Sombras - O Estilo das Bordas e Sombras

    Agora a gente vai dar um toque nas bordas e nas sombras dos elementos pra deixar tudo mais charmoso!

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    borderEssa propriedade é um curinga pra definir de uma vez a espessura, o estilo e a cor da borda do elemento.`none` (sem borda).
  • 'none' (sem borda);
  • valores em px, em, rem;
  • 'solid' (sólida);
  • 'dotted' (pontilhada);
  • 'dashed' (tracejada);
  • 'double' (dupla);
  • 'groove' (relevo);
  • 'ridge' (relevo invertido);
  • 'inset' (afundada);
  • 'outset' (saliência);
  • 'hidden' (invisível, mas ocupa espaço);

    • Exemplo:

    1div {
2	border: 1px solid black;
3}
    border-radiusCom essa propriedade, você arredonda os cantos do elemento, deixando ele com um visual mais moderno e suave.`0` (cantos retos).
  • '0' (cantos retos);
  • valores em px, %, em, rem;

    • Exemplo:

    1div {
2	border-radius: 10px;
3}
    box-shadowEssa propriedade adiciona uma sombra ao redor do elemento, dando uma sensação de profundidade ou destaque.`none` (sem sombra).
  • 'none' (sem sombra);
  • valores em px, em, rem;
  • 'inset' (sombra interna);
  • 'outset' (sombra externa);
  • 'blur' (desfoque);
  • 'spread' (espalhamento);
  • 'color' (cor da sombra);
  • 'offset-x' (deslocamento horizontal);
  • 'offset-y' (deslocamento vertical);

    • Exemplo:

    1div {
2	box-shadow: 10px 10px 5px grey;
3}

    Tipografia - O Estilo do Texto

    Quer dar um talento nas letras do seu site? As opções abaixo te ajudam a controlar como a parada toda aparece!

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    font-familyEssa aqui define qual a 'cara' da letra (o tipo de fonte mesmo).Times New Roman (a clássica)
  • 'Nome da Fonte' (ex: Arial, Verdana);
  • 'serif' (serifada);
  • 'sans-serif' (sem serifa);
  • 'monospace' (letras todas do mesmo tamanho);
  • 'cursive' (letras de mão);
  • 'fantasy' (fontes de fantasia);
  • 'system-ui' (a fonte do sistema);
  • 'emoji' (fontes de emoji);
  • 'math' (fontes matemáticas);

    • Exemplo:

    1div {
2	font-family: Arial, sans-serif;
3}
    font-sizeCom essa você escolhe o tamanho da letra, pra não ficar nem muito miúda, nem gigante.medium (16 pixels)
  • 'xx-small' (9px);
  • 'x-small' (10px);
  • small' (12px);
  • medium' (16px);
  • large' (18px);
  • x-large' (24px);
  • xx-large' (32px);
  • valores em px, %, em, rem;

    • Exemplo:

    1div {
2	font-size: 16px;
3}
    font-weightAqui você controla se a letra vai ser mais fininha ou mais grossa (tipo negrito).normal (a letra padrão)
  • 'normal' (normal);
  • 'bold' (negrito);
  • 'bolder' (mais negrito);
  • 'lighter' (mais fino);
  • valores numéricos (100, 200, 300, 400, 500, 600, 700, 800, 900);

    • Exemplo:

    1div {
2	font-weight: bold;
3}
    text-alignEssa propriedade alinha o texto: pode ser na esquerda, na direita, no centro ou justificado.start (geralmente à esquerda)
  • 'start' (começo);
  • 'end' (fim);
  • 'left' (à esquerda);
  • 'right' (à direita);
  • center' (no meio);
  • 'justify' (justificado);

    • Exemplo:

    1div {
2	text-align: center;
3}
    text-decorationAqui você adiciona uns efeitos no texto, tipo sublinhado ou tachado.none (sem efeito)
  • 'none' (sem efeito);
  • 'underline' (sublinhado);
  • 'overline' (sublinhado em cima);
  • 'line-through' (tachado);
  • 'blink' (pisca-pisca);

    • Exemplo:

    1div {
2	text-decoration: underline;
3}

    Cores e Fundo - Dando um Show de Cores e Fundos!

    Quer deixar seu site com a sua cara? Aqui você encontra as ferramentas pra brincar com as cores e os fundos dos elementos.

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    colorEssa aqui muda a cor da letra, do texto.depende do navegador (geralmente preto)
  • 'Nome da cor' (ex: red, blue);
  • 'rgb()' (cores RGB, ex: rgb(255, 0, 0));
  • 'rgba()' (cores RGB com opacidade, ex: rgba(255, 0, 0, 0.5));
  • 'hex' (código hexadecimal, ex: #ff0000);
  • 'hsl()' (cores HSL, ex: hsl(0, 100%, 50%));
  • 'hsla()' (cores HSL com opacidade, ex: hsla(0, 100%, 50%, 0.5));
  • 'currentColor' (herda a cor do elemento pai);

    • Exemplo:

    1div {
2	color: red;
3}
    background-colorEssa define a cor de fundo do elemento.transparent (sem cor)
  • 'Nome da cor' (ex: red, blue);
  • 'rgb()' (cores RGB, ex: rgb(255, 0, 0));
  • 'rgba()' (cores RGB com opacidade, ex: rgba(255, 0, 0, 0.5));
  • 'hex' (código hexadecimal, ex: #ff0000);
  • 'hsl()' (cores HSL, ex: hsl(0, 100%, 50%));
  • 'hsla()' (cores HSL com opacidade, ex: hsla(0, 100%, 50%, 0.5));
  • 'currentColor' (herda a cor do elemento pai);

    • Exemplo:

    1div {
2	background-color: blue;
3}
    background-imageAqui você coloca uma imagem pra usar como fundo.none (sem imagem de fundo)
  • 'none' (sem imagem);
  • 'url('caminho/da/imagem.jpg')' (imagem de fundo);
  • 'linear-gradient()' (gradiente linear);
  • 'radial-gradient()' (gradiente radial);
  • 'repeating-linear-gradient()' (gradiente linear repetido);
  • 'repeating-radial-gradient()' (gradiente radial repetido);
  • 'conic-gradient()' (gradiente cônico);
  • 'image-set()' (conjunto de imagens);
  • 'image()' (imagem genérica);

    • Exemplo:

    1div {
2	background-image: url('imagem.jpg');
3}
    background-sizeCom essa você controla o tamanho da imagem de fundo.auto (a imagem aparece no tamanho original)
  • 'auto' (tamanho original);
  • 'cover' (cobre todo o elemento);
  • 'contain' (cabe dentro do elemento);
  • valores em px, %;

    • Exemplo:

    1div {
2	background-size: cover;
3}
    background-repeatEssa aqui diz se a imagem de fundo vai se repetir (tipo um papel de parede).repeat (a imagem se repete tanto na horizontal quanto na vertical)
  • 'no-repeat' (não se repete);
  • 'repeat' (se repete tanto na horizontal quanto na vertical);
  • 'repeat-x' (se repete só na horizontal);
  • 'repeat-y' (se repete só na vertical);
  • 'space' (se repete, mas com espaço entre as imagens);
  • 'round' (se repete, mas as imagens se ajustam pra caber no espaço);

    • Exemplo:

    1div {
2	background-repeat: no-repeat;
3}

    Flexbox - Arrumando a Casa com o Flexbox!

    Quer deixar os elementos do seu site bem alinhadinhos e responsivos? O Flexbox é a ferramenta certa pra isso!

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    displayEssa propriedade transforma um elemento em um 'pai flexível', pra você poder organizar os 'filhos' dele.'block' (ocupa a largura toda) ou 'inline' (ocupa só o necessário) - depende do elemento
  • 'flex' (pai flexível);
  • 'inline-flex' (pai flexível, mas ocupa só o espaço necessário);
  • 'none' (não aparece na página);

    • Exemplo:

    1div {
2	display: flex;
3}
    flexEssa aqui define como os 'filhos' vão se comportar no espaço disponível dentro do 'pai'.0 1 auto (não cresce, encolhe se precisar, e o tamanho inicial é automático)
  • 'none' (não cresce nem encolhe);
  • 'auto' (cresce e encolhe automaticamente);
  • '<growth> <shrink> <base>' (cresce, encolhe e define o tamanho inicial);
  • '1' (cresce e encolhe igualmente);
  • '0' (não cresce nem encolhe);
  • '1 0 auto' (cresce, não encolhe, e o tamanho inicial é automático);
  • '1 1 50%' (cresce e encolhe igualmente, e o tamanho inicial é 50%);

    • Exemplo:

    1div {
2	flex: 1 1 50%;
3}
    justify-contentEssa alinha os itens na horizontal (ao longo do eixo principal do Flexbox).'flex-start' (os itens ficam no começo)
  • 'flex-start' (começo);
  • 'flex-end' (fim);
  • 'center' (no meio);
  • 'space-between' (espaço entre os itens);
  • 'space-around' (espaço ao redor dos itens);
  • 'space-evenly' (espaço igual entre os itens);
  • 'start' (começo);
  • 'end' (fim);
  • 'left' (à esquerda);
  • 'right' (à direita);

    • Exemplo:

    1div {
2	justify-content: center;
3}

    Grid - Organizando Tudo com o Poder do Grid!

    Quer criar layouts complexos e responsivos com facilidade? O Grid é tipo um superpoder pra organizar os elementos do seu site!

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    displayEssa propriedade transforma um elemento em um 'pai grid', pra você poder posicionar os 'filhos' dele em células.'block' (ocupa a largura toda) ou 'inline' (ocupa só o necessário) - depende do elemento
  • 'grid' (pai grid);
  • 'inline-grid' (pai grid, mas ocupa só o espaço necessário);
  • 'none' (não aparece na página);

    • Exemplo:

    1div {
2	display: grid;
3}
    grid-template-columns / grid-template-rowsAqui você define quantas colunas e quantas linhas o seu grid vai ter e qual o tamanho delas.none (sem colunas ou linhas definidas)
  • 'none' (sem colunas ou linhas definidas);
  • 'auto' (o navegador decide o tamanho);
  • 'min-content' (o menor tamanho possível);
  • 'max-content' (o maior tamanho possível);
  • 'fit-content' (cabe o conteúdo);
  • 'repeat()' (repete o tamanho definido);
  • 'fr' (frações do espaço disponível);
  • 'valores em px, %' (tamanhos fixos);
  • 'minmax()' (mínimo e máximo);
  • 'auto-fit' (se adapta ao espaço disponível);
  • 'auto-fill' (preenche o espaço disponível);

    • Exemplo:

    1div {
2	grid-template-columns: 100px 100px;
3	grid-template-rows: 100px 100px;
4}
    grid-gapEssa define o espaço entre as colunas e as linhas do seu grid.0 (sem espaço)
  • '0' (sem espaço);
  • valores em px, %;

    • Exemplo:

    1div {
2	grid-gap: 10px;
3}

    Animações e Transições - Dando Vida ao Seu Site com Animações e Transições!

    Quer que os elementos do seu site se movam, mudem de cor suavemente ou façam alguma mágica? As animações e transições são a chave pra isso!

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    animationEssa propriedade é tipo um maestro que controla toda a animação do elemento: nome, duração, como ela acontece, se repete, etc.none (sem animação)
  • 'none' (sem animação);
  • '<nome da animação> <duração> <função> <atraso> <iterações> <direção> <modo>';
  • 'Nome da animação' (ex: myAnimation);
  • 'duração' (ex: 2s, 500ms);
  • 'função' (ex: ease-in, linear);
  • 'atraso' (ex: 1s, 0.5s);
  • 'iterações' (ex: infinite, 1, 2);
  • 'direção' (ex: normal, reverse, alternate);
  • 'modo' (ex: forwards, backwards, both);

    • Exemplo:

    1div {
2	animation: myAnimation 2s ease-in-out 1s infinite alternate both;
3}
    transitionEssa propriedade cria um efeito suave quando alguma coisa muda no elemento (tipo cor, tamanho, etc.).none (sem animação)
  • 'none' (sem animação);
  • '<propriedade> <duração> <função> <atraso>';
  • 'all' (todas as propriedades);
  • '<propriedade>' (ex: color, background-color);
  • '<duração>' (ex: 2s, 500ms);
  • '<função>' (ex: ease-in, linear);
  • '<atraso>' (ex: 1s, 0.5s);

    • Exemplo:

    1div {
2	transition: all 0.3s ease-in-out;
3}

    Transformações - Fazendo a Mágica Acontecer com Transformações!

    Quer dar uma girada, uma esticada ou até mudar a perspectiva dos seus elementos? As transformações te dão esse poder!

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    transformEssa aqui é a principal! Com ela você pode girar, mover, escalar, inclinar e fazer outras transformações nos seus elementos.none (sem transformação)
  • 'none' (sem transformação);
  • 'matrix()' (matriz de transformação);
  • 'matrix3d()' (matriz 3D);
  • 'translate()' (mover);
  • 'translate3d()' (mover 3D);
  • 'translateX()' (mover na horizontal);
  • 'translateY()' (mover na vertical);
  • 'translateZ()' (mover na profundidade);
  • 'scale()' (escalar);
  • 'scale3d()' (escalar 3D);
  • 'scaleX()' (escalar na horizontal);
  • 'scaleY()' (escalar na vertical);
  • 'scaleZ()' (escalar na profundidade);
  • 'rotate()' (girar);
  • 'rotate3d()' (girar 3D);
  • 'rotateX()' (girar na horizontal);
  • 'rotateY()' (girar na vertical);
  • 'rotateZ()' (girar na profundidade);
  • 'skew()' (inclinar);
  • 'skewX()' (inclinar na horizontal);
  • 'skewY()' (inclinar na vertical);
  • 'perspective()' (definir perspectiva);

    • Exemplo:

    1div {
2	transform: rotate(45deg);
3}
    perspectiveEssa define a distância do observador para dar um efeito 3D nas transformações.none (sem perspectiva)
  • none;
  • valores em px;

    • Exemplo:

    1div {
2	perspective: 1000px;
3}

    Interatividade e Cursor - Deixando o Site Mais Interativo (e Controlando o Mouse!)

    Quer mudar a carinha do cursor do mouse ou decidir se dá pra clicar em algum elemento? Essas propriedades te ajudam!

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    cursorEssa define qual o ícone do mouse vai aparecer quando você passar por cima do elemento.'auto' (o navegador decide qual o melhor cursor)
  • 'auto' (automático);
  • 'default' (a setinha normal);
  • 'none' (cursor invisível);
  • 'context-menu' (menu de contexto);
  • 'help' (ponto de interrogação);
  • 'pointer' (mãozinha de link);
  • 'progress' (indicador de carregamento);
  • 'wait' (ampulheta ou similar);
  • 'cell' (cursor de célula de tabela);
  • 'crosshair' (mira);
  • 'text' (cursor de texto);
  • 'vertical-text' (cursor de texto vertical);
  • 'alias' (indicador de atalho);
  • 'copy' (indicador de cópia);
  • 'move' (setas em cruz);
  • 'no-drop' (proibido soltar);
  • 'not-allowed' (proibido);
  • 'grab' (mão aberta);
  • 'grabbing' (mão fechada);
  • 'all-scroll' (setas em todas as direções);
  • 'col-resize' (seta de redimensionar coluna);
  • 'row-resize' (seta de redimensionar linha);
  • 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize' (setas de redimensionamento em direções específicas);
  • 'zoom-in' (lupa de zoom in);
  • 'zoom-out' (lupa de zoom out);

    • Exemplo:

    1div {
2	cursor: pointer;
3}
    pointer-eventsEssa propriedade diz se o elemento pode ser o alvo de eventos do mouse (cliques, passar por cima, etc.).'auto' (o elemento reage aos eventos do mouse normalmente)
  • 'auto' (normal);
  • 'none' (o elemento ignora os eventos do mouse, é como se ele não estivesse lá);

    • Exemplo:

    1div {
2	pointer-events: none;
3}

    Listas - Organizando as Listas com Estilo!

    Quer dar um visual diferente para os seus itens de lista? Com essas propriedades você controla os marcadores e a aparência.

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    list-style-typeEssa define qual o tipo de marcador que vai aparecer antes de cada item da lista (bolinha, número, etc.).'disc' (um círculo preenchido) para listas não ordenadas
  • 'disc' (círculo preenchido);
  • 'circle' (círculo vazio);
  • 'square' (quadrado);
  • 'decimal' (números: 1, 2, 3...);
  • 'decimal-leading-zero' (números com zero à esquerda: 01, 02, 03...);
  • 'lower-roman' (algarismos romanos minúsculos: i, ii, iii...);
  • 'upper-roman' (algarismos romanos maiúsculos: I, II, III...);
  • 'lower-greek' (letras gregas minúsculas);
  • 'lower-latin' ou 'lower-alpha' (letras latinas minúsculas: a, b, c...);
  • 'upper-latin' ou 'upper-alpha' (letras latinas maiúsculas: A, B, C...);
  • 'armenian' (numeração armênia);
  • 'georgian' (numeração georgiana);
  • 'none' (sem marcador);

    • Exemplo:

    1div {
2	list-style-type: square;
3}

    Colunas - Dividindo o Conteúdo em Colunas!

    Quer apresentar seu texto em um formato de colunas, tipo jornal ou revista? Essas propriedades te ajudam a fazer isso!

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    columnsEssa propriedade é um atalho para definir tanto o número de colunas quanto a largura mínima de cada uma.'auto' (o navegador decide o número e a largura)
  • 'auto' (o navegador decide);
  • valores numéricos;
  • 'column-width' (largura mínima);
  • 'column-count' (número de colunas);
  • 'column-gap' (espaço entre as colunas);
  • 'column-rule' (linha entre as colunas);
  • 'column-rule-width' (largura da linha);
  • 'column-rule-style' (estilo da linha);
  • 'column-rule-color' (cor da linha);
  • 'column-span' (se o elemento ocupa mais de uma coluna);
  • 'column-fill' (como o conteúdo é distribuído entre as colunas);
  • 'column-break-inside' (quebra de coluna dentro do elemento);
  • 'column-break-before' (quebra de coluna antes do elemento);
  • 'column-break-after' (quebra de coluna depois do elemento);

    • Exemplo:

    1div {
2	columns: 2 100px;
3}

    Outras Propriedades - Mais Poder para o Seu CSS!

    Aqui você encontra mais algumas propriedades CSS que podem te ajudar a dar um toque especial nos seus elementos.

    PropriedadeDescriçãoValor PadrãoValores Possíveis
    opacityEssa define o quão transparente ou opaco um elemento é.1 (totalmente opaco)
  • 0 (totalmente transparente);
  • qualquer valor entre 0 e 1;

    • Exemplo:

    1div {
2	opacity: 0.5;
3}
    filterEssa aplica efeitos visuais como desfoque, brilho, contraste, etc.nenhum filtro aplicado
  • 'none' (sem filtro);
  • 'blur()' (desfoque);
  • 'brightness()' (brilho);
  • 'contrast()' (contraste);
  • 'drop-shadow()' (sombra);
  • 'grayscale()' (escala de cinza);
  • 'hue-rotate()' (rotação de cores);
  • 'invert()' (inverter cores);
  • 'opacity()' (opacidade - similar à propriedade 'opacity');
  • 'saturate()' (saturação de cores);
  • 'sepia()' (efeito sépia);

    • Exemplo:

    1div {
2	filter: blur(5px);
3}
    clip-pathEssa define uma área de recorte para o elemento, como um molde.none (nenhum recorte)
  • none;
  • formas geométricas (círculo, elipse, polígono);
  • usando SVG;
  • valores em px, %, etc.;

    • Exemplo:

    1div {
2	clip-path: circle(50%);
3}
    backface-visibilityEssa decide se a parte de trás de um elemento (quando ele é girado em 3D) fica visível ou não.'visible' (a parte de trás é visível)
  • 'visible' (visível);
  • 'hidden' (invisível);

    • Exemplo:

    1div {
2	backface-visibility: hidden;
3}
    will-changeEssa é uma dica para o navegador sobre quais propriedades do elemento vão mudar, pra ele se preparar e otimizar a performance.'auto' (o navegador tenta adivinhar)
  • 'auto' (automático);
  • 'none' (nenhuma dica);
  • propriedades CSS que podem mudar (ex: transform, opacity, scroll-position);

    • Exemplo:

    1div {
2	will-change: transform;
3}
    transition-timing-functionEssa define como a velocidade da transição vai mudar ao longo do tempo (mais rápido no começo, no fim, etc.).'ease' (começa e termina mais lento)
  • 'ease' (começa e termina mais lento);
  • 'linear' (velocidade constante);
  • 'ease-in' (começa lento);
  • 'ease-out' (termina lento);
  • 'ease-in-out' (começa e termina lento);
  • 'step-start' (começa de uma vez);
  • 'step-end' (termina de uma vez);
  • 'steps(<n>)' (divide a animação em n etapas);
  • 'steps(<n>, <direction>)' (divide a animação em n etapas com direção);
  • 'steps(<n>, <position>)' (divide a animação em n etapas com posição);
  • 'steps(<n>, <position>, <direction>)' (divide a animação em n etapas com posição e direção);
  • 'steps()' (para criar animações em etapas);
  • 'cubic-bezier()' (função de Bezier cúbica personalizada);

    • Exemplo:

    1div {
2	transition-timing-function: ease-in-out;
3}