Ako používať filtre Instagram na webových obrázkoch
Veľa lásky používa Instagram a filtre, ktoré prichádzajú s app, aby ich fotografie zaujímavejšie a krásnejšie. Zatiaľ však používanie týchto filtrov je obmedzené na používanie vo vnútri aplikácie. Čo ak chcete použite filtre Instagram na webových obrázkoch, mimo aplikácie, napríklad fotografie, ktoré chcete umiestniť na svojom osobnom blogu alebo webových stránkach?
No, môžete použiť CSSGram, malú knižnicu, ktorá vám umožní upravte svoje fotografie pomocou filtrov, ktoré sú podobné tým, ktoré nájdete v aplikácii Instagram. Na rozdiel od Photoshopu, kde sú úpravy manuálne alebo vykonané pomocou akcií programu Photoshop, pomocou CSSGram, celý proces prebieha cez CSS.
Ako to funguje
Na vytvorenie efektu využíva CSSGram Filtre CSS a Režim kombinácie CSS, v podstate miešanie efektov do miesta, kde napodobňuje váš požadovaný filter Instagram. Efekt sa aplikuje na kontajner s obrázkami pomocou pseudo-elementov. Pozrime sa, ako sa to robí s týmto príkladom "1977":
Tu je pridaný pseudo-element.
._1977 pozícia: relatívna; ._1977: po content: "; zobrazenie: blok; výška: 100%; šírka: 100%; hore: 0; vľavo: 0;
A toto je filter CSS a Blend pridané:
._1977 -webkit-filter: kontrast (1.1) jas (1.1) nasýtený (1.3); filter: kontrast (1.1) jas (1.1) nasýtený (1.3); ._1977: po pozadí: rgba (243, 106, 188, 0.3); mix-blend-mode: obrazovka;
Ako použiť
Triedu filtra nemôžeme pridať priamo k prvku obrázka, musí sa pridať do kontajnera alebo do nadradenej triedy, napríklad pomocou
Kód bude vyzerať takto:
Nezabudnite zahrnúť do dokumentu HTML aj knižnicu CSSgram (získate ju tu).
Vytvoril som demo obrázkov pred a po pridaní filtra a výsledok je veľmi pekný. V súčasnosti je v knižnici k dispozícii 13 filtrov. Nižšie uvidíte rozdiely medzi pôvodným obrázkom a obrázkom pod filtrom "1977","Aden"a"bavlnený odev".
Pozrite sa na pero rOKPmW
Ak máte záujem používať niektorý z týchto štýlov, môžete načítať jednotlivé súbory CSS.
Použitie SCSS
Ak chcete pridať filtre do svojej aktuálnej triedy kontajnerov s obrázkami bez zmeny mena, môžete tak urobiť rozšírením filtračného efektu vo vnútri súborov SCSS. Tu je postup, ako to urobiť.
Najskôr si stiahnite zdrojový súbor SCSS a importujte súbor SCSS.
@import 'dodávateľ / cssgram';
Predpokladajme, že máte HTML štruktúru ako nižšie:
Potom vo vašom štýle style.scss rozšírte filter takto:
.moja trieda ... @extend% _1977;
Ďalšie príspevky služby Instagram
- 40 Nástroje a aplikácie na naplnenie účtu Instagram
- 20 užitočných aplikácií na maximálne využitie programu Instagram
- 10 Užitočné tipy a triky Instagram, ktoré by ste mali vedieť
