マイベストプロ青森
  1. マイベストプロ TOP
  2. マイベストプロ青森
  3. 青森のビジネス
  4. 青森の制作・クリエイティブ
  5. 瀧澤満
  6. コラム一覧
  7. backdrop-filterでホームページの写真にPhotoshopのようなエフェクトを追加

コラム

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

2020年6月30日

テーマ:ホームページ css

コラムカテゴリ:ビジネス

コラムキーワード: WEBマーケティング 基礎



こんにちは!
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=c


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を思い出したら、是非使ってみてください。

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

この記事を書いたプロ

瀧澤満

パノラマコンテンツ活用で個性が光るウェブサイトを制作するプロ

瀧澤満(北の国ウェブ工房)

Share

瀧澤満プロへの
お問い合わせ

マイベストプロを見た
と言うとスムーズです

お電話での
お問い合わせ
0178-32-0265

勧誘を目的とした営業行為の上記電話番号によるお問合せはお断りしております。

瀧澤満

北の国ウェブ工房

担当瀧澤満(たきさわみつる)

地図・アクセス

瀧澤満のソーシャルメディア

twitter
Twitter
2020-07-01

瀧澤満プロのコンテンツ