個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ

記事を読む

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない

記事を読む

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45

今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ

記事を読む

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr

記事を読む

超簡単!CSSで上下左右センターにする方法

超簡単!CSSで上下左右センターにする方法

超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ

記事を読む

ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」

CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav

記事を読む

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む

HTMLメールの無料テンプレートをお探しなら「無料で利用できるオープンソースなHTMLメールテンプレートコレクションサイト」

HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」

HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール

記事を読む

月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12

ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし

記事を読む

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos

記事を読む