Како да примените Инстаграм филтере на Веб слике

Многи воле да користе Инстаграм и филтере који долазе са апликацијом, како би њихове фотографије биле интересантније и лепше. До сада, међутим, коришћење ових филтера је ограничено на употребу унутар апликације. Шта ако желиш користите Инстаграм филтере на веб сликама, изван апликације, као што су фотографије које желите да поставите у свој лични блог или веб локацију?

Па, можете користити ЦССГрам, малу библиотеку која вам омогућава уредите фотографије помоћу филтера који су слични ономе што можете да пронађете на Инстаграм апликацији. За разлику од Пхотосхопа где су измене ручне или се обављају преко Пхотосхопа, са ЦССГрамом, цео процес се обавља преко ЦСС-а.

Како то ради

Да бисте генерисали ефекат, ЦССГрам користи ЦСС филтери и ЦСС режим мешања, у суштини уклапање ефеката до тачке где опонаша ваш жељени Инстаграм филтер. Ефекти се примењују на контејнер слике, преко псеудо-елемената. Хајде да проверимо како се ово ради са овим "1977" примером:

Ево доданог псеудо-елемента.

 ._1977 поситион: релативе;  ._1977: афтер цонтент: "; дисплаи: блоцк; хеигхт: 100%; ширина: 100%; горе: 0; лево: 0; позиција: апсолутна; 

А ово је ЦСС филтер и Бленд је додао:

 ._1977 -вебкит-филтер: контраст (1.1) осветљеност (1.1) засићење (1.3); филтер: контраст (1.1) осветљеност (1.1) засићење (1.3);  ._1977: афтер бацкгроунд: ргба (243, 106, 188, 0.3); мик-бленд-моде: екран;  

Како се користи

Не можемо директно додати класу филтера елементу слике, она се мора додати у контејнер или родитељску класу, на пример са

 @импорт 'вендор / цссграм'; 

 .ми-цласс … @ектенд% _1977;