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

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

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

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

スポンサードリンク

cssFiltersの使い方

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

フィルタの選択

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

フィルタの微調整

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

CSSのコピー

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


<figure class="filter">
  <img src="...">
</figure>


.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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です