Kā lietot Instagram filtrus tīmekļa attēlos

Daudzi mīl, izmantojot Instagram un filtrus, kas nāk ar lietotni, lai padarītu viņu fotogrāfijas interesantākas un skaistākas. Līdz šim šo filtru izmantošana ir ierobežota lietošanai lietotnē. Ko darīt, ja vēlaties izmantot Instagram filtrus tīmekļa attēlos, ārpus lietotnes, piemēram, fotogrāfijas, kuras vēlaties ievietot savā personīgajā emuārā vai tīmekļa vietnē?

Nu, jūs varat izmantot CSSGram - nelielu bibliotēku, kas ļauj jums rediģējiet fotoattēlus ar filtriem, kas ir līdzīgi tai, ko jūs varat atrast Instagram lietotnē. Atšķirībā no Photoshop, kur rediģēšana ir manuāla vai veikta, izmantojot Photoshop darbības, ar CSSGram viss process tiek veikts, izmantojot CSS.

Kā tas strādā

Lai radītu efektu, CSSGram izmanto CSS filtri un CSS maisījuma režīms, būtībā sajaucot efektus līdz vietai, kur tas atdarina vēlamo Instagram filtru. Ietekme tiek piemērota attēla konteineram, izmantojot pseidoelementus. Apskatīsim, kā tas tiek darīts ar šo "1977. Gada" piemēru:

Šeit ir pievienots pseidoelements.

 ._1977 amats: radinieks;  ._1977: pēc saturs: "; displejs: bloks; augstums: 100%; platums: 100%; augšā: 0; pa kreisi: 0; pozīcija: absolūta; 

Un tas ir CSS filtrs un Blend pievienots:

 ._1977 -webkit filtrs: kontrasts (1,1) spilgtums (1.1) piesātināts (1.3); filtrs: kontrasta (1.1) spilgtums (1.1) piesātināts (1.3);  ._1977: pēc fons: rgba (243, 106, 188, 0,3); mix-blend-mode: ekrāns;  

Kā izmantot

Mēs nevaram pievienot filtru klasi tieši attēla elementam, tas ir jāpievieno konteineram vai vecāku klasei, piemēram, ar

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;