CSSgram - CSS フィルターと CSS ブレンド モードを使用して Instagram スタイルを実装する filters_html/css_WEB-ITnose

1. はじめに

CSSgram は、CSS フィルターと CSS ブレンド モードを組み合わせて、色やグラデーションをオーバーレイすることで Instagram スタイルの画像フィルターを実装する、シンプルで使いやすい CSS ライブラリです。写真のシミュレーション フィルターを使用すると、画像処理にかかる時間を大幅に節約でき、オンラインで画像を「いじる」楽しみが増えます。

2. 互換性

このライブラリは主に CSS フィルターと CSS ブレンド モードに基づいており、ブラウザーの互換性は主にこれら 2 つの機能に依存します。

Google Chrome: 43+

Mozilla Firefox: 38+
Opera: 32+
Safari: 8+
Internet Explorer: いいえ
互換性の詳細については、「使用できますか」を参照してください。

3.

の使用

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

3.1 CSS クラスの使用

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

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

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

利用可能なフィルター クラス

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

SASS を使用している場合は、このライブラリの scss ファイルをダウンロードし、プロジェクトにインポートして、継承を使用できます。

scss フォームでライブラリをダウンロードします

1. @import 'vendor/cssgram';のように、このライブラリをメインの scss ファイルにインポートします
2. フィルターを適用する必要があるセレクターで @extend % などの継承を使用しますaden

3.       <figure class="viz--beautiful">        <img src="../img.png">      </figure>

         // Sass      .viz--beautiful { @extend %aden; }

もちろん、エフェクトを 1 つだけ使用する場合は、そのうちの 1 つをダウンロードしてインポートするだけで済みます (例: scss/aden.scss)。

最後に、このライブラリの github ホスティング アドレス https://github.com/una/CSSgram を添付します。これが皆さんのお役に立てれば幸いです。

4. 声明

著作権声明: この記事はブロガーのオリジナル記事であり、ブロガーの許可なく複製することはできません。