写真にフィルタを加えるためのCSSを出力できるWEBサービス「cssFilters」

写真にフィルタを加えるためのCSSを出力できるWEBサービス「cssFilters」

スポンサードリンク
写真にフィルタを加えるためのCSSを出力できるWEBサービス「cssFilters」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 大量にアクセスを呼び込みザクザク稼げてしまう21世紀最強の無料ツールを発見!!
  • このエントリーをはてなブックマークに追加

cssFiltersは、写真にフィルタを加えるためのCSSを出力することができるWEBサービスです。プレビューを見ながら写真をフィルタ加工し、プレビュー通りのフィルタをかけるCSSコードを出力することができます。

cssFiltersの使い方

cssFiltersにアクセスして、ベースとなるフィルタを選択します。

フィルタの選択

右側のメモリを操作して、フィルタを微調整していきます。

フィルタの微調整

「CSS CODE」のタブに移動すると、CSSコードがコピーできます。

CSSのコピー

画像のマークアップは以下のようにしてあげればOKです。

HTML
<figure class="filter">
<img src="...">
</figure>
CSS
.filter {
position: relative;
-webkit-filter: contrast(110%) brightness(110%) saturate(147%);
filter: contrast(110%) brightness(110%) saturate(147%);
}
.filter::before {
content: "";
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
mix-blend-mode: screen;
background: rgba(243, 106, 188, 0.3);
}

CSSは一例です。

あとがき

直感的に操作して、CSSまで出力してくれるのはありがたいですね。

サイトの画像にちょっとしたフィルタをかけたい時に、ぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。