Css_html/css_WEB-ITnose を使用して画像に Instagram フィルターを追加する

CSSgram

InstagramフィルターライブラリをサポートするSass/CSSフレームワーク

画像デモ

DEMO2

これは何ですか

Cssgramは、CSSを使用して写真にInstagram風のフィルターを追加するライブラリです。私たちが行うことは、さまざまな描画モード、色、またはグラデーションを変更して画像に効果を適用することです。これは、画像処理が少なくなり、より興味深い効果が得られることを意味します。

フィルター効果を作成するために疑似クラス (つまり、::before と ::after) を使用するため、画像の外側にタグのレイヤーをラップする必要があります。画像をラップするには、figure タグを使用することをお勧めします。

使い方

CSSgramを使用するには、次の2つの方法があります:

CSSクラスを使用する

画像に簡単に様々なフィルターを追加できるクラスを使用する

1 CSS外部リンクを使用する

<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

※以下の方法も可能です圧縮された CSS ファイルを直接ダウンロードします。

次に、ローカル参照:

`

`

次に、要素にクラスを追加して有効にします

ケース:

<!-- HTML --><figure class="aden">  <img  src="/static/imghwm/default1.png"  data-src="../img.png"  class="lazy" alt="Css_html/css_WEB-ITnose を使用して画像に Instagram フィルターを追加する" ></figure>

次に、外部スタイルを導入します (例: )

現在提供されているフィルター

HTML を直接使用できます:

• アデン: class="aden"

• レイエス: class="reyes"

• パーペチュア: class="perpetua"

• インクウェル: class="inkwell"

• トースター: class="トースター"

• ウォールデン: class="walden"

• ハドソン: class="ハドソン"

• ギンガム: class="gingham"

• メイフェア: class= "公正な"

• ローファイ: class="lofi"

• ブルックリン"

• ナッシュビル: class="nashville"

• ラーク: class="lark"

• 月: クラス= "月"

• クラレンドン: class="clarendon"

• ウィロー: class="willow"

• *

• Sass @extend または @mixin
• ご希望の場合はCSS の名前付けをカスタマイズするには、.scss ファイルをプロジェクトにインポートします。 @extend を使用して、定義したいスタイルにこれらのフィルターを適用できます。

  scss/ ディレクトリの内容をダウンロードします
* @import を使用して、ファイル scss/cssgram.scss をメイン ファイル (つまり、 main.scss) に導入します (例: main.scss)。 * 必要なスタイルで展開します (例: @extend %aden または mixins @include aden() を使用します。

例:

@import 'vendor/cssgram';

または、ミックスインを使用します (より便利です)

<!-- HTML --><figure class="viz--beautiful">  <img  src="/static/imghwm/default1.png"  data-src="../img.png"  class="lazy" alt="Css_html/css_WEB-ITnose を使用して画像に Instagram フィルターを追加する" ></figure>// Sass.viz--beautiful {  @extend %aden;}

もちろん、特定のエフェクトのみを使用する場合は、対応する scss ファイル (scss/aden.scss) をインポートするだけで済みます。

1. 現在利用可能なエフェクト

   Scssで使用
   Extends

Aden: @extend %aden

Reyes: @extend %reyes

Perpet ua: @extend %perpetua

Inkwell : @extend %inkwell

• トースター: @extend %toaster

• ウォールデン: @extend %walden

• ハドソン: @extend %hudson

• ギンガム: %ギンガム終了

• メイフェア : @ extend %mayfair

• ローファイ: @extend %lofi

• ブルックリン: @extend %brooklyn

• ナッシュビル: @extend %nashville

• ラーク: @extend %lark

• 月: @extend %moon

• クラレンドン: @extend %clarendon

• ウィロー: @extend %willow

ミックスイン(さらに多くの CSS を追加できます) 3滤镜进来)

• アデン: @include aden()

• レイエス: @include reyes()

• パーペトゥア: @include perpetua()

• インクウェル: @include inkwell()

• トースター: @include トースター( )

• ウォールデン: @include walden()

• ハドソン: @include hudson()

• ギンガム: @include gingham()

• メイフェア @メイフェアを含める()

• Lo -fi: @include lofi()

• X-Pro II: @include xpro2()

• 1977: @include _1977()

• ブルックリン: @include brooklyn()

• ナッシュビル: @include nashville()

• ヒバリ: @include lark()

月: @include Moon()
クラレンドン: @include clarendon()
ウィロー: willow() を含める
さらに多くの阅读： https://github.com/JackPu/CSSgram