cssFiltersは、写真にフィルタを加えるためのCSSを出力することができるWEBサービスです。プレビューを見ながら写真をフィルタ加工し、プレビュー通りのフィルタをかけるCSSコードを出力することができます。
cssFiltersの使い方
cssFiltersにアクセスして、ベースとなるフィルタを選択します。
右側のメモリを操作して、フィルタを微調整していきます。
「CSS CODE」のタブに移動すると、CSSコードがコピーできます。
画像のマークアップは以下のようにしてあげればOKです。
1 2 3 | <figure class="filter"> <img src="..."></figure> |
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | .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まで出力してくれるのはありがたいですね。
サイトの画像にちょっとしたフィルタをかけたい時に、ぜひご活用ください。