Les filtres Css - FAQ CSS

Comment appliquer un filtre en Css?

Appliquer la propriété filter grâce aux feuilles de style Css

filter : blur(10px);
filter : brightness(50%);
filter : drop-shadow(20px 20px 20px #000) sepia(20%);

Comment appliquer un filtre Css pour faire un effet de flou gaussien?

Appliquer un effet de flou gaussien grâce aux filtres Css

filter : blur(10px);

Comment appliquer un filtre Css pour changer la luminosité?

Appliquer un effet de luminosité grâce aux filtres Css

filter : brightness(50%);

Comment appliquer un filtre Css pour changer le contraste?

Appliquer un effet de contraste grâce aux filtres Css

filter : contrast(20%);

Comment appliquer un filtre Css pour faire une ombre portée?

Appliquer un effet d'ombre portée Css grâce aux filtres Css

filter : drop-shadow(5px 10px 2px #ccc);

Ombre portée : drop-shadow vs ombre portée : box-shadow

Vous pouvez aussi utiliser une autre méthode pour appliquer un effet d'ombre portée Css sur une image ou un élément (X)HTML en Css, vous devez utiliser la propriété Css box-shadow.

box-shadow : 5px 10px 0 0 #ccc;

Cependant la propriété Css box-shadow ne tiens pas compte de la transparence et ne s'applique qu'à l'élément sur lequel elle est spécifiée :

Exemples de filtres Css d'ombre portée Css

Appliquer un effet d'ombre portée Css colorée

Pour faire un effet d'ombre portée reprenant les couleurs de l'élément qui fait l'ombre, vous devez utiliser le filtre blur.
Le concept consiste à dupliquer l'élément qui fait l'ombre, lui appliquer le filtre blur puis le décaler par rapport à l'élément initiale

<div class="ombre-coloree">
  <img src="/img/exemple/filter-image.jpg">
</div>

.ombre-coloree{
  position:relative;
  display:inline-block;
}
.ombre-coloree img{position:relative; z-index:2}
.ombre-coloree:after{
  display:block;
  content:url("/img/exemple/filter-image.jpg");
  position:absolute;
  top: calc(50% + 8px);
  left: calc(50% + 10px);
  z-index: 1; 
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  -webkit-filter: blur(10px);
  filter: blur(10px);
  opacity: 0.85;   
}

Comment appliquer un filtre Css pour faire une ombre portée sur un texte?

Appliquer un effet d'ombre portée Css sur un texte grâce aux filtres Css

text-shadow : 3px 3px 3px green;
filter : drop-shadow(3px 3px 3px green);

Comment appliquer un filtre Css pour faire un effet de niveaux de gris?

Appliquer un effet de niveaux de gris grâce aux filtres Css

filter : grayscale(200%);

Comment appliquer un filtre Css pour faire un effet d'opacité?

Appliquer un effet d'opacité grâce aux filtres Css

filter : opacity(50%);

filtre opacity vs propriété opacity

Il existe aussi une propriété Css opacity qui applique aussi un effet d'opacité.

opacity : .5;

Exemples de filtres Css d'opacité

Appliquer un format de couleur transparente en Css

Il est possible en Css de faire des couleurs avec des alpha ou transparence. Deux formats sont autorisés le format de couleur Css RGBA et le format de couleur Css HSLA. Vous trouverez plus d'informations dans les cours sur les couleurs en Css.

color : rgba(255, 105, 180, .5);
border-color : hsla(260, 60%, 65%, .6);
background-color : rgba(0, 0, 128, 0.3);

Convertisseur RGV, HSL, Hexadécimal et transparence

Comment appliquer un filtre Css pour faire un effet de saturation?

Appliquer un effet de saturation grâce aux filtres Css

filter : saturate(50%);

Comment appliquer un filtre Css pour faire un effet sépia?

Appliquer un effet sépia grâce aux filtres Css

filter : sepia(250%);

Comment appliquer un filtre Css pour inverser les couleurs?

Appliquer un effet d'inversion de couleurs grâce aux filtres Css

filter : invert(50%);

Comment appliquer un filtre Css pour faire une rotation de la teinte?

Appliquer un effet de rotation de la teinte grâce aux filtres Css

filter : hue-rotate(10deg);