Sådan anvendes Instagram-filtre på webbilleder

Mange elsker at bruge Instagram og de filtre, der følger med appen, for at gøre deres fotos mere interessante og smukke. Indtil videre er brugen af ​​disse filtre begrænset til brug i appen. Hvad hvis du vil brug Instagram-filtre på webbilleder, uden for appen, som billeder, du vil sætte op i din personlige blog eller hjemmeside?

Nå, du kan bruge CSSGram, et lille bibliotek, der giver dig mulighed for Rediger dine fotos med filtre, der ligner det, du kan finde på Instagram-appen. I modsætning til Photoshop, hvor redigeringer er manuelle eller færdige via Photoshop-handlinger, med CSSGram, gøres hele processen via CSS.

Hvordan det virker

For at generere effekten bruger CSSGram CSS-filtre og CSS-blandingstilstand, i bund og grund blending effekten til det punkt, hvor det efterligner dit ønskede Instagram filter. Virkningerne påføres billedbeholderen via pseudo-elementer. Lad os se, hvordan dette gøres med dette "1977" eksempel:

Her er pseudo-elementet tilføjet.

 ._1977 position: relative;  .1977: efter indhold: "; display: blok; højde: 100%; bredde: 100%; top: 0; venstre: 0; position: absolut; 

Og dette er CSS-filteret og blandingen tilføjet:

 ._1977 -webkit-filter: kontrast (1.1) lysstyrke (1,1) mættet (1.3); filter: kontrast (1,1) lysstyrke (1,1) mættet (1,3);  .1977: efter baggrund: rgba (243, 106, 188, 0,3); mix-blend-mode: skærm;  

Sådan bruges

Vi kan ikke tilføje filterklassen direkte til billedelementet, det skal tilføjes til beholderen eller forældrenes klasse, for eksempel med

 @import 'sælger / cssgram'; 

 .min klasse ... @extend% _1977;