個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」

CSSで今後、ますます注目度が高まるであろうCSSフィルタ。
なにせお手軽にエフェクトをかけられるのに、効果もありそうですから。
CSSフィルタのプロパティにはいくつかありますが、今回ご紹介するのはfilterプロパティです。
そのfilterプロパティを手軽に試せて、コードをコピペして利用できるサービスをご紹介します。
filterプロパティってなんだ?という方をはじめ、今後利用してみようといった方のご参考になれば幸いです。

画像のURLを読み込むだけでCSSのfilterプロパティを試せてコードをコピペできる「CSS Filters Playground」

CSS-Filters-Demo00
CSS Filters Playground」は画像のURLを読み込むだけでCSSフィルタのfilterプロパティを手軽に試せて、コードをコピペできるサービスです。
画像(image)だけでなく、iframeやVideoにも対応しています。
CSS-Filters-Demo02

各プロパティの値は、クリックすると自由に変更することも可能です。

grayscale=グレースケール
sepia=セピア調のフィルタ
saturate=彩度
hue-rotate=色相回転
invert=反転
opacity=透明度
brightness=明るさ。
contrast=コントラスト
blur=ぼかし
tint=セピア+色相回転
contrast+saturation+sepia=コントラスト+色相回転+セピア

使い方

使い方はいたって簡単で、CSS Filters Playgroundにいって右上にある歯車マークをクリックすると、画像のURLを入力するボックスが現れます。

CSS-Filters-Demo04

そこに、filterプロパティを試したい画像のURLを入力し、再度、歯車マークをクリックすればOKです。

CSS Filters Playground

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 1

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む

CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

CSSスプライトを誰でも簡単に、しかも見やすく生成できてしまうツールのご紹介です。 CSSスプライ

記事を読む

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

背景画像をサッとつくれる便利ツール20選

背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目

記事を読む

全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121

2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン

記事を読む

これは魅力的!CSSだけで実装できる画像ホバーエフェクト20

これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22

CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。

記事を読む

見ている人を魅了するcodrops作成のマウスオーバーエフェクト21

ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21

CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ

記事を読む