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

CSSで今後、ますます注目度が高まるであろうCSSフィルタ。
なにせお手軽にエフェクトをかけられるのに、効果もありそうですから。
CSSフィルタのプロパティにはいくつかありますが、今回ご紹介するのはfilterプロパティです。
そのfilterプロパティを手軽に試せて、コードをコピペして利用できるサービスをご紹介します。
filterプロパティってなんだ?という方をはじめ、今後利用してみようといった方のご参考になれば幸いです。
画像のURLを読み込むだけでCSSのfilterプロパティを試せてコードをコピペできる「CSS Filters Playground」
「CSS Filters Playground」は画像のURLを読み込むだけでCSSフィルタのfilterプロパティを手軽に試せて、コードをコピペできるサービスです。
画像(image)だけでなく、iframeやVideoにも対応しています。
各プロパティの値は、クリックすると自由に変更することも可能です。
grayscale=グレースケール
sepia=セピア調のフィルタ
saturate=彩度
hue-rotate=色相回転
invert=反転
opacity=透明度
brightness=明るさ。
contrast=コントラスト
blur=ぼかし
tint=セピア+色相回転
contrast+saturation+sepia=コントラスト+色相回転+セピア
使い方
使い方はいたって簡単で、CSS Filters Playgroundにいって右上にある歯車マークをクリックすると、画像のURLを入力するボックスが現れます。
そこに、filterプロパティを試したい画像のURLを入力し、再度、歯車マークをクリックすればOKです。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100
HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ
-
-
グラフィックデザイナーのためのオンラインポートフォリオ作成方法
グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない
-
-
名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45
今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ
-
-
ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る
ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr
-
-
超簡単!CSSで上下左右センターにする方法
超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ
-
-
ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」
CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav
-
-
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に
-
-
HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」
HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール
-
-
月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12
ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし
-
-
動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見
動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos