Comment appliquer des filtres Instagram sur des images Web

Comment appliquer des filtres Instagram sur des images WebBeaucoup aiment utiliser Instagram et les filtres fournis avec l'application pour rendre leurs photos plus intéressantes et plus belles. Jusqu'à présent cependant, l'utilisation de ces filtres est restreinte à l'utilisation dans l'application. Que faire si vous souhaitez utiliser des filtres Instagram sur des images Web , en dehors de l'application, comme des photos que vous souhaitez afficher sur votre blog ou votre site Web personnel?
Eh bien, vous pouvez utiliser CSSGram , une petite bibliothèque qui vous permet d’ éditer vos photos avec des filtres similaires à ceux que vous pouvez trouver sur l’application Instagram . Contrairement à Photoshop où les modifications sont manuelles ou effectuées via des actions Photoshop, avec CSSGram, l'ensemble du processus est effectué via CSS.

Comment ça marche

Pour générer l'effet, CSSGram utilise des filtres CSS et le mode de fusion CSS , en fusionnant les effets au point d'imiter le filtre Instagram souhaité. Les effets sont appliqués au conteneur d'images, via des pseudo-éléments. Voyons comment cela se fait avec cet exemple "1977":
Voici le pseudo-élément ajouté.
1
2
3
4
5
6
7
8
9
dix
11
12
._1977{
  position: relative;
}
._1977:after{
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
Et voici le filtre CSS et le mélange ajoutés:
1
2
3
4
5
6
7
8
._1977 {
  -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);
  filter: contrast(1.1) brightness(1.1) saturate(1.3);
}
._1977:after {
  background: rgba(243, 106, 188, 0.3);
  mix-blend-mode: screen;
}

Comment utiliser


Nous ne pouvons pas ajouter la classe de filtre directement à l'élément image, elle doit être ajoutée au conteneur ou à la classe parent, par exemple avec <figure>un conteneur.
LIS : Comment insérer des sauts de ligne sur Instagram
Le code ressemblera à ceci:
1
2
3
<figure class="_1977">
    <img src="images.jpg">
</figure>
N'oubliez pas d'inclure la bibliothèque CSSgram (obtenez-la ici ) dans votre document HTML.
1
<link rel="stylesheet" href="path/to/cssgram.css">
J'ai créé la démo d'images avant et après l'ajout du filtre et le résultat est très agréable. Il y a 13 filtres inclus dans la bibliothèque pour le moment. Ci-dessous, vous pouvez voir les différences entre l'image d'origine et l'image sous les filtres " 1977 ", " Aden " et " Gingham ".
Voir le stylo rOKPmW
Si vous souhaitez simplement utiliser l'un de ces styles, vous pouvez charger les fichiers CSS individuels en conséquence.

Utiliser SCSS

Si vous souhaitez ajouter les filtres à votre classe de conteneur d'image actuelle sans changer de nom, vous pouvez le faire en étendant l'effet de filtre dans vos fichiers SCSS. Voici comment le faire.
Tout d'abord, téléchargez le fichier source SCSS et importez votre fichier SCSS.
1
@import 'vendor/cssgram';
Supposons que vous ayez la structure HTML comme ci-dessous:
1
2
3
<div class="my-class">
    <img src="images.jpg">
</div>
Comment appliquer des filtres Instagram sur des images Web

Ensuite, dans votre style.scss, étendez le filtre comme suit:
1
2
3
4
.my-class {
    ...
    @extend %_1977;
}
Back To Top