Guia Joudacasa de CSS

Como codar com CSS

background-color: #ff4757;

Fundo de uma cor

color: #54a0ff;

Texto Colorido

background: linear-gradient;

Gradiente de fundo

background: radial-gradient;

Gradiente de fundo circular

background: conic-gradient;

border: 3px solid white;

Linha Reta

border: 3px dashed yellow;

Linha com Tracinhos

border: 8px groove;

Efeito Esculpido

border: 8px ridge;

Efeito Montanha

border: 8px inset;

Para Dentro

border: 8px outset;

Para Fora

border-radius: 25px;

Canto Arredondado

border-radius: 50%;

box-shadow: 10px 10px...

Sombra de Bloco

box-shadow: Multiplas;

text-shadow: Neon;

Texto Neon

text-shadow: 3D;

Efeito 3D

-webkit-text-stroke;

Só Contorno

text-decoration: wavy;

Onda

filter: blur(3px);

Visão embaçada

filter: grayscale(100%);

🎨 Preto e branco

filter: sepia(100%);

📜 Antigo

filter: invert(100%);

Invertido

filter: hue-rotate(90deg);

Troca Cor

filter: brightness(200%);

Super Brilho

transform: scale(1.2);

Cresce no mouse

transform: rotate(-10deg);

Desenho inclinado

transform: perspective;

Viro de Lado

transform: skewX(30deg);

Efeito Paralelogramo

animation: pular;

animation: girar;

animation: balanço;

Balançando