Filtros CSS

by Marcos vini

HTML

<div id='fotos'>
<div class="photo grayscale"></div>
<div class="photo sepia"></div>
<div class="photo blur"></div>
<div class="photo saturate"></div>
<div class="photo contrast"></div>
<div class="photo brightness"></div>
<div class="photo hue-rotation"></div>
<div class="photo invert"></div>
<div class="photo opacity"></div>
<div class="photo drop-shadow"></div>
</div>

CSS

/* credit to https://unsplash.com/@luiskcortes */
.photo {
  --source: url(https://i0.statig.com.br/bancodeimagens/dk/ua/ly/dkualysqu8fn9n4qj15lfu2n5.jpg);
  position: relative;
  width: 250px;
  height: 150px;
  float:left;
  background-image: var(--source);
  background-repeat: no-repeat;
  background-size: 100%;
}

.photo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: var(--source);
  background-repeat: no-repeat;
  background-size: 100%;

 
  z-index: 0;
  mix-blend-mode: lighten;
  background-blend-mode: hard-light;
  background-color: #c2c2c2;
}
.grayscale{
  -webkit-filter : grayscale(1) contrast(1.2);
   filter: grayscale(1) contrast(1.2);
}
.sepia{
    -webkit-filter: sepia(100%); 
            filter: sepia(100%); 
}
.blur{
  -webkit-filter: blur(3px); 
            filter: blur(3px); 
}
.saturate{
    -webkit-filter: saturate(50%); 
            filter: saturate(50%); 
}
.contrast{
  -webkit-filter: contrast(50%); 
            filter: contrast(50%); 
}
.brightness {
    -webkit-filter: brightness(50%); 
            filter: brightness(50%); 
}
.hue-rotation{
   -webkit-filter: hue-rotate(45deg); 
            filter: hue-rotate(45deg); 
}
.invert {
    -webkit-filter: invert(100%); 
            filter: invert(100%); 
}
.opacity {
    -webkit-filter: opacity(50%); 
            filter: opacity(50%); 
}
.drop-shadow {
    -webkit-filter: drop-shadow(10px 10px 5px #000); 
            filter: drop-shadow(10px 10px 5px #000); 
}
#fotos{
  width:500px;
}

JavaScript

////////////////////////////////////////////////////////
////////////////////Legenda ///////////////////////////

//grayscale
//aplicar um filtro preto e branco nas imagens e pode ir de 0 a 1 ou de 0% a 100%.*/

//Sepia
//aplicar um filtro aspecto de foto envelhecida*/

//Blur
//aplicar um filtro aspecto desfocada*/

//Saturate
//aplicar um filtro que define a intensidade de uma cor dissolução */

//Contrast
//aplicar um filtro que define a intensidade de uma cor mais intensa*/

//Brightness
//aplicar um filtro que diminuir o brilho da imagem */

//Hue-rotation
//aplicar um filtro que roda a paleta de cores da imagem */

//Invert
//aplicar um filtro que inverte as cores da imagem */

//Opacity
//Define a opacidade da imagem */

//Drop-shadow
//projeta sombra na imagem */