Kako uporabiti Instagram filtre za spletne slike
Mnogi radi uporabljajo Instagram in filtre, ki prihajajo z aplikacijo, da bodo njihove fotografije bolj zanimive in lepe. Doslej je uporaba teh filtrov omejena na uporabo znotraj aplikacije. Kaj, če hočeš uporabite Instagram filtre na spletnih slikah, zunaj aplikacije, kot so fotografije, ki jih želite postaviti v svoj osebni spletni dnevnik ali spletno mesto?
Lahko uporabite CSSGram, majhno knjižnico, ki vam omogoča uredite fotografije s filtri, ki so podobni tistim, ki jih najdete v aplikaciji Instagram. Za razliko od Photoshopa, kjer so popravki ročni ali izvedeni preko Photoshopovih dejanj, s CSSGramom celoten proces poteka prek CSS.
Kako deluje
Za ustvarjanje učinka uporablja CSSGram Filtri CSS in Način mešanja CSS, v bistvu mešanje učinkov do točke, kjer posnema vaš želeni Instagram filter. Učinki se nanašajo na vsebnik slik preko psevdoelementov. Oglejmo si, kako je to storjeno s tem primerom "1977":
Tukaj je dodan psevdoelement.
._1977 position: relative; Po content: "; prikaz: blok; višina: 100%; širina: 100%; vrh: 0; levo: 0; položaj: absolutno;
In to je CSS filter in Blend je dodal:
._1977 -webkit-filter: kontrast (1.1) svetlost (1.1) nasičena (1.3); filter: kontrast (1.1) svetlost (1.1) nasičena (1.3); ._1977: po ozadje: rgba (243, 106, 188, 0.3); način mešanja: zaslon;
Kako uporabiti
Filtra filtra ne moremo dodati neposredno v element slike, ga je treba dodati na vsebnik ali nadrejeni razred, na primer z
Koda bo izgledala takole:
Ne pozabite vključiti knjižnice CSSgram (dobite jo tukaj) v vaš HTML dokument.
Ustvaril sem demo slike pred in po dodajanju filtra, rezultat pa je zelo lep. Trenutno je v knjižnici vključenih 13 filtrov. Spodaj lahko vidite razlike med izvirno sliko in sliko pod filtri.1977","Aden"in"Gingham".
Glejte Pen rOKPmW
Če vas zanima samo uporaba kateregakoli sloga, lahko ustrezno naložite posamezne datoteke CSS.
Uporaba SCSS
Če želite filtre dodati trenutnemu razredu vsebnikov slik brez spremembe imena, lahko to storite tako, da razširite učinek filtra znotraj datotek SCSS. Tukaj je, kako to storiti.
Najprej prenesite izvorno datoteko SCSS in uvozite datoteko SCSS.
@import "prodajalec / cssgram";
Recimo, da imate strukturo HTML, kot je spodaj:
Nato v vašem slogu.scss razširite filter tako:
.moj razred … @extend% _1977;
Več mest v Instagramu
- 40 Orodja in aplikacije, da polnite svoj račun v Instagramu
- 20 Koristne aplikacije za največjo možno uporabo Instagrama
- 10 Koristni Instagram nasveti in triki, ki jih morate poznati
