filter: blur brightness contrast grayscale
Aplique efeitos de filtro fotográfico aos elementos usando as funções da propriedade CSS filter.
filter: blur brightness contrast grayscale é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
A propriedade filter do CSS
A propriedade filter aplica efeitos gráficos aos elementos — de modo semelhante às camadas de ajuste do Photoshop — sem editar a imagem original.
filter: blur()
Aplica um desfoque gaussiano. O argumento é o raio do desfoque.
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
Ajusta o brilho. 1 = original, 0 = preto, 2 = duas vezes mais brilhante.
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
Ajusta o contraste. 1 = original, 0 = cinza uniforme, valores acima de 1 aumentam o contraste.
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
Converte para tons de cinza. 0 = cores completas, 1 (ou 100%) = completamente cinza.
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
Ajusta a saturação das cores. 0 = cinza, 1 = original, acima de 1 = cores vivas.
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
Gira a matiz por um determinado ângulo — desloca todas as cores ao redor do círculo cromático.
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
Aplica um tom sépia quente e retrô. 0 = original, 1 = sépia completo.
<div class="vintage"></div>
filter: drop-shadow()
Como box-shadow, mas acompanha a forma real renderizada do elemento, incluindo as áreas transparentes. Ideal para imagens PNG irregulares.
<div class="icon">★</div>
Combinando vários filtros
Encadeie várias funções de filtro separando-as com espaços. Elas são aplicadas da esquerda para a direita:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filter cria um contexto de empilhamento
Aplicar filter a um elemento cria um novo contexto de empilhamento. Isso pode fazer com que position: fixed dos elementos filhos se comporte como position: absolute — um erro comum.
Verificação rápida
Qual função de filtro do CSS aplica um desfoque gaussiano a um elemento?
Recapitulação
A propriedade filter aplica ajustes fotográficos: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() e drop-shadow(). Encadeie várias funções usando espaços. Lembre-se de que filter cria um contexto de empilhamento, o que pode afetar elementos filhos com posicionamento fixo.
Perguntas Frequentes
A aula “filter: blur brightness contrast grayscale” é grátis?
Sim — o texto completo de “filter: blur brightness contrast grayscale” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “filter: blur brightness contrast grayscale”?
Aplique efeitos de filtro fotográfico aos elementos usando as funções da propriedade CSS filter. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “filter: blur brightness contrast grayscale”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- filter: blur brightness contrast grayscale
- backdrop-filter para Efeito de Vidro Fosco
- mix-blend-mode para Mesclagem de Camadas
- Propriedade isolation