Sass および CSS の Instagram フィルター ライブラリ: CSSgram_html/css_WEB-ITnose

簡単に言うと、CSSgram は CSS で直接 Instagram のようなフィルターを使用して写真を編集するためのライブラリです。画像に色やグラデーションのシミュレーションを重ねてフィルターを実装すると、画像処理時間を大幅に節約でき、オンラインで画像を「遊ぶ」楽しみが高まります。

1. 互換性

このライブラリは主に CSS フィルターと CSS ブレンド モードに基づいており、ブラウザーの互換性は主にこれら 2 つの機能に依存します。
Google Chrome: 43+
Mozilla Firefox: 38+
Opera: 32+
Safari: 8+
Internet Explorer: いいえ
互換性の詳細については、「使用できますか」を参照してください。

2.

の使用

このライブラリを使用するには、CSS クラスを使用する方法と SASS @extends を使用する方法の 2 つがあります。

3.1 CSS クラスの使用

CSSgram ライブラリをダウンロードします。

このライブラリをプロジェクトにリンクします。
64d8f09f914130a9ea3a57645c12b2c4

フィルター名のクラスを画像要素に追加します (このライブラリはフィルター効果を実装するために疑似クラス セレクターを使用するため)したがって、フィルタ クラスは img ではなくコンテナ要素 (できれば Figure タグ) に追加する必要があります。

<figure class="aden"> <img src="../img.png"> </figure>

利用可能なフィルター クラス
CSSgram によって提供されるフィルター クラスは次のとおりです:
Aden:class="aden"
Reyes:class="reyes"
Perpetua:class="perpetua"
Inkwell:class="inkwell"
Toaster: class="トースター"
ウォールデン:class="ウォールデン"
ハドソン:class="ハドソン"
ギンガム:class="ギンガム"
メイフェア:class="メイフェア"
ローファイ:クラス="ロフィ"
X- Pro II:class="xpro2"
1977:class="_1977"
Brooklyn:class="brooklyn"

プロジェクトのホームページ: http://www.open-open.com/lib/view/home /1446038847710