2020年7月

backdrop-filterでホームページの写真にPhotoshopのようなエフェクトを追加

backdrop-filter

こんにちは!雪乃です。

CSSのbackdrop-filterプロパティは、写真に様々なエフェクト(効果)をつけることができます。同じCSSのfilterプロパティと似ていますが、backdrop-filterは、内側のテキストやその他の要素を変更することなく、背景の要素だけにエフェクト(効果)のぼかしなどを適用することができます。

文章で説明してもわかりにくいのですが、今回はbackdrop-filterで何が出来るかご紹介します。

backdrop-filterの使い方

backdrop-filterプロパティを記述するだけで、エフェクト(効果)を追加できます。

div {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

ぼかし

各種ブラウザ対応状況

FireFox以外のほとんどの主要ブラウザでは使用できす。下記のリンク先をご確認ください。

対応ブラウザ

参考:https://caniuse.com/#feat=css-backdrop-filter

10種類のbackdrop-filterのエフェクト(効果)

backdrop-filterでは以下のようなエフェクト(効果)がかけられます。

blur ぼかし pxで指定
brightness 明るさ %で指定
contrast コントラスト %で指定
grayscale モノトーン %で指定
invert 階調反転 %で指定
hue-rotate 色相 degで指定
opacity 不透明度 %で指定
sepia セピア調 %で指定
saturate 彩度 %で指定
drop-shadow ドロップシャドウ pxで指定

ぼかし:blur

div {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

エフェクト(効果)適用画像

明るさ:brightness

div {
backdrop-filter:brightness(170%);
-webkit-backdrop-filter:brightness(170%);
}

エフェクト(効果)適用画像

コントラスト:contrast

div {
backdrop-filter: contrast(200%);
-webkit-backdrop-filter: contrast(200%);
}

エフェクト(効果)適用画像

モノトーン:grayscale

div {
backdrop-filter: grayscale(200%);
-webkit-backdrop-filter: grayscale(200%);
}

エフェクト(効果)適用画像

階調反転:invert

div {
backdrop-filter: invert(70%);
-webkit-backdrop-filter: invert(70%);
}

エフェクト(効果)適用画像

色相:hue-rotate

div {
backdrop-filter: hue-rotate(120deg);
-webkit-backdrop-filter: hue-rotate(120deg);
}

エフェクト(効果)適用画像

不透明度:opacity

div {
backdrop-filter: opacity(65%);
-webkit-backdrop-filter: opacity(65%);
}

エフェクト(効果)適用画像

セピア調:sepia

div {
backdrop-filter: sepia(65%);
-webkit-backdrop-filter: sepia(65%);
}

エフェクト(効果)適用画像

彩度:saturate

div {
backdrop-filter: saturate(50%);
-webkit-backdrop-filter: saturate(50%);
}

エフェクト(効果)適用画像

ドロップシャドウ:drop-shadow

div {
backdrop-filter: drop-shadow(4px 4px 10px black);
-webkit-backdrop-filter: drop-shadow(4px 4px 10px black);
}

まとめ

以上が、backdrop-filterを使ったエフェクト(効果)のかけ方となります。主要なブラウザはほとんどないのが対応していますので、Photoshopや画像編集ソフトがなくてもお手軽にエフェクト(効果)がかけられるので、とても便利ですね。ホームページを制作した際に、簡単なエフェクト(効果)を写真にかけたいなと思って今回のbackdrop-filterを思い出したら、是非使ってみてください。

使い方次第で、半透明のガラスのような表現もできますよ。

ブログ内検索

お気に入りリンク

タグクラウド

5月 adobe amazon avi cms flv mt premiere pro twitter WebA Web制作 wordpress wp wpカスタマイズ かぜ さくら つぶやき ひざが痛い カスタマイズ ゴールデンウィーク サイト フォトギャラリー ブログ ブログ作成 プール メタボ 五所川原市 写真 切り株 友人のレストラン 太宰治 家庭菜園 弘前公園 投稿 斜陽館 映像 映像編集 本屋 痛風 老健 腰痛 芦野公園 花見 金木