Jak aplikovat filtry Instagram na webové obrázky

Mnozí milují pomocí Instagram a filtry, které přicházejí s aplikací, aby se jejich fotografie více zajímavé a krásné. Použití těchto filtrů je však do aplikace omezeno. Co když chceš použít filtry Instagram na webových snímcích, mimo aplikaci, jako jsou fotografie, které chcete umístit do svého osobního blogu nebo webové stránky?

No, můžete použít CSSGram, malou knihovnu, která vám umožní upravte své fotografie pomocí filtrů, které jsou podobné tomu, co najdete v aplikaci Instagram. Na rozdíl od Photoshopu, kde jsou úpravy prováděny ručně nebo pomocí akcí Photoshopu, pomocí CSSGram, celý proces probíhá přes CSS.

Jak to funguje

Pro generování efektu CSSGram využívá CSS filtry a CSS režim prolnutí, v podstatě míchání efektů do bodu, kdy napodobuje požadovaný Instagram filtr. Účinky se aplikují na obrazový kontejner přes pseudoprvky. Podívejme se, jak se to dělá s tímto příkladem "1977":

Zde je přidán pseudo-element.

 ._1977 pozice: relativní;  ._1977: after content: "; zobrazit: blok; výška: 100%; šířka: 100%; horní: 0; vlevo: 0; pozice: absolutní; 

A to je CSS filtr a přidána Blend:

 ._1977 -webkit-filter: kontrast (1.1) jas (1.1) nasycený (1.3); filtr: kontrast (1.1) jas (1.1) nasycený (1.3);  .1919: po pozadí: rgba (243, 106, 188, 0,3); mix-blend-mode: obrazovka;  

Jak používat

Nelze přidat třídu filtrů přímo do obrazového prvku, musí být přidán do kontejneru nebo nadřazené třídy, například pomocí

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;