Web画像にInstagramフィルタを適用する方法

多くの人がInstagramとアプリに付属のフィルタを使って自分の写真をより面白くて美しくすることを愛しています。しかしこれまでのところ、これらのフィルタの使用はアプリ内での使用に制限されています。あなたがしたい場合はどうなります Web画像にInstagramのフィルタを使用する, あなたがあなたの個人的なブログやウェブサイトに載せたい写真のように、アプリの外で?

さて、あなたはCSSGramを使うことができます。 Instagramのアプリで見つけることができるものに似ているフィルタであなたの写真を編集してください. 編集が手動で行われるPhotoshopとは異なり、CSSGramでは、プロセス全体がCSSを介して行われます。.

使い方

効果を生み出すために、CSSGramは利用します CSSフィルタ そして CSSブレンドモード, 基本的に、必要なInstagramフィルターを模倣する程度に効果をブレンドします。効果は疑似要素を介して画像コンテナに適用されます。この1977年の例でこれがどのように行われるかを調べてみましょう。

これが追加された擬似要素です。.

 ._1977 役職：相対; content： "; display：block; height：100％; width：100％; top：0; left：0; position：absolute; 

そしてこれはCSSフィルタであり、Blend氏はこれを追加した。

 .1977 -webkit-filter：コントラスト（1.1）明るさ（1.1）飽和（1.3）;フィルタ：コントラスト（１．１）輝度（１．１）飽和（１．３）。 1977年以降：背景：rgba（243、106、188、0.3）。ミックスブレンドモード：スクリーン。  

使い方

フィルタクラスをimage要素に直接追加することはできません。コンテナクラスまたは親クラスに追加する必要があります。例えば、

 @import 'vendor / cssgram'; 

 .my-class …@extend％_1977;