Compre um adesivo e ajude o Em Busca do Código a continuar.
Filtros em imagens com CSS3 - Vídeo aula 74
Neste vídeo configuramos cinco tipos diferentes de filtros utilizando CSS3.
Vemos: blur, brightness, contrast, grayscale e sepia.
Código fonte HTML:
<!DOCTYPE html>
<html>
<head>
<title>filtros parte 1</title>
<link rel="stylesheet" href="cssfiltrosimg.css">
</head>
<body>
<figure>
<img src="imagem.png"></img>
<figcaption>Original</figcaption>
</figure>
<figure class="filtro1">
<img src="imagem.png"></img>
<figcaption>blur</figcaption>
</figure>
<figure class="filtro2">
<img src="imagem.png"></img>
<figcaption>brightness</figcaption>
</figure>
<figure class="filtro3">
<img src="imagem.png"></img>
<figcaption>contrast</figcaption>
</figure>
<figure class="filtro4">
<img src="imagem.png"></img>
<figcaption>grayscale</figcaption>
</figure>
<figure class="filtro5">
<img src="imagem.png"></img>
<figcaption>sepia</figcaption>
</figure>
</body>
</html>
Código fonte CSS:
img {
width: 20%;
}
.filtro1 {
filter: blur(2px); /*pixels*/
}
.filtro2 {
filter: brightness(2);
}
.filtro3 {
filter: contrast(2); /*pixels ou porcentagem (regras especificas)*/
}
.filtro4 {
filter: grayscale(2);
}
.filtro5 {
filter: sepia(2);
}
Assista ao vídeo:
VIDEO
Compre um adesivo e ajude o Em Busca do Código a continuar.
Desde 2015 Em Busca do Código
Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.