Comment appliquer des filtres Instagram sur des images Web

Beaucoup 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. Et si vous voulez utiliser les filtres Instagram sur les images Web, en dehors de l'application, comme des photos que vous souhaitez afficher sur votre blog ou sur votre site Web personnel?

Eh bien, vous pouvez utiliser CSSGram, une petite bibliothèque qui vous permet de éditez 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, tout le processus est effectué via CSS.

Comment ça marche

Pour générer l’effet, CSSGram utilise Filtres CSS et Mode de fusion CSS, Fondamentalement, en mélangeant 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é.

 ._1977 position: relative;  ._1977: after content: "; display: block; height: 100%; width: 100%; haut: 0; gauche: 0; position: absolu; 

Et voici le filtre CSS et le mélange ajoutés:

 ._1977 -webkit-filter: contraste (1.1) luminosité (1.1) saturé (1.3); filtre: contraste (1.1) luminosité (1.1) saturé (1.3);  ._1977: après arrière-plan: rgba (243, 106, 188, 0,3); mode mix-blend: écran;  

Comment utiliser

Nous ne pouvons pas ajouter la classe de filtre directement à l’élément d’image, elle doit être ajoutée au conteneur ou à la classe parente, par exemple avec

 @import 'vendor / cssgram'; 

 .ma-classe … @extend% _1977;