Cum să aplicați filtrele Instagram pe imagini Web
Mulți iubesc folosind Instagram și filtrele care vin împreună cu aplicația, pentru a face fotografiile mai interesante și frumoase. Până în prezent, utilizarea acestor filtre este limitată la utilizarea în interiorul aplicației. Dacă vrei utilizați filtrele Instagram pe imagini web, în afara aplicației, cum ar fi fotografiile pe care doriți să le puneți în blogul personal sau pe site-ul dvs. web?
Poți folosi CSSGram, o mică bibliotecă care îți permite editați fotografiile cu filtre similare cu cele pe care le puteți găsi în aplicația Instagram. Spre deosebire de Photoshop unde editările sunt manuale sau realizate prin acțiuni Photoshop, cu CSSGram, întregul proces este realizat prin CSS.
Cum functioneaza
Pentru a genera efectul, CSSGram utilizează Filtrele CSS și Modul de amestecare CSS, în mod esențial, amestecarea efectelor cu punctul în care imitează filtrul dorit Instagram. Efectele sunt aplicate în containerul imaginii, prin intermediul pseudo-elementelor. Să vedem cum se face acest lucru cu acest exemplu "1977":
Iată pseudo-elementul adăugat.
._1977 poziție: relativă; ._1977: după content: "; afișare: bloc; înălțime: 100%; lățime: 100%; top: 0; stânga: 0;
Și acesta este filtrul CSS și Blend a adăugat:
._1977 -webkit-filter: contrast (1.1) luminozitatea (1.1) saturate (1.3); filtru: contrast (1.1) luminozitate (1.1) saturați (1.3); ._1977: după fond: rgba (243, 106, 188, 0.3); mix-mode-mode: ecran;
Cum să utilizați
Nu putem adăuga clasa de filtrare direct la elementul de imagine, ci trebuie adăugată la clasa container sau părinte, de exemplu cu
Codul va arăta astfel:
Nu uitați să includeți biblioteca CSSgram (obțineți-o aici) în documentul dvs. HTML.
Am creat demo-ul imaginilor înainte și după adăugarea filtrului și rezultatul este foarte frumos. În prezent, în bibliotecă sunt incluse 13 filtre. Mai jos puteți vedea diferențele dintre imaginea originală și imaginea de sub filtre "1977","Aden" și "Umbrelă".
Consultați pictograma pen
Dacă sunteți interesat doar să utilizați oricare dintre stiluri, puteți încărca fișiere individuale CSS în consecință.
Utilizarea SCSS
Dacă doriți să adăugați filtre la clasa curentă a containerului de imagini fără o schimbare de nume, puteți face acest lucru extindând efectul de filtru în fișierele SCSS. Iată cum să faceți acest lucru.
Mai întâi descărcați fișierul sursă SCSS și importați fișierul SCSS.
@import "vânzător / cssgram";
Să presupunem că aveți schema HTML ca mai jos:
Apoi, în stil.scss, extindeți filtrul astfel:
.clasa mea ... @extend% _1977;
Mai multe mesaje instagram
- 40 Instrumente și aplicații pentru a vă supraîncărca contul Instagram
- 20 de aplicații utile pentru a obține cele mai multe din Instagram
- 10 sfaturi și trucuri utile pentru Instagram trebuie să știți
