背景にガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」

これまでのfilterプロパティでは要素全体、子要素までフィルターの処理がかかっていましたが、backdrop-filterでは背景のみにfilter処理ができます。backdrop-filterの異なる値でそれぞれの処理がどのようになるかを画像サンプルで紹介しています。
環境
- OS windows10 64bit
- chrome 86.0.4240.198
backdrop-filter
backdrop-filterの値には以下の種類が用意されています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* <filter-function> 値 */ /* デフォルト */ backdrop-filter: none; /* ぼかし */ backdrop-filter: blur(2px); /* 明るさ */ backdrop-filter: brightness(150%); /* コントラスト */ backdrop-filter: contrast(200%); /* ドロップシャドウ */ backdrop-filter: drop-shadow(4px 4px 4px #000); /* グレースケール */ backdrop-filter: grayscale(100%); /* 色相反転 */ backdrop-filter: hue-rotate(120deg); /* 階調反転 */ backdrop-filter: invert(70%); /* 透明度 */ backdrop-filter: opacity(50%); /* セピア */ backdrop-filter: sepia(90%); /* 彩度 */ backdrop-filter: saturate(3); |
サンプルコード
実際に同じ条件で各値のbackdrop-filterを設定したサンプルコードです。サンプルコードの後の表示結果を確認してください。
デフォルトとして、透明度50%の白背景を設定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<section> <style> .fileterwrap { width: 46%; max-width: 300px; margin-right: 2%; margin-left: 2%; margin-bottom: 10px; background-image: url(https://mebee.info/wp-content/uploads/2021/01/photo20210115-e1610709095830.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; display: grid; place-items: center; height: 200px; float: left; } .filetersample { background-color: rgba(255, 255, 255, 0.5); border-radius: 2px; font-family: sans-serif; text-align: center; line-height: 1; max-width: 90%; padding: 20px 15px; font-weight: bold; font-family: 'ConsolasRegular'; } /* デフォルト */ .none { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ぼかし */ .blur { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* 明るさ */ .brightness { backdrop-filter: brightness(150%); -webkit-backdrop-filter: brightness(150%); } /* コントラスト */ .contrast { backdrop-filter: contrast(200%); -webkit-backdrop-filter: contrast(200%); } /* ドロップシャドウ */ .drop-shadow { backdrop-filter: drop-shadow(4px 4px 4px #000); -webkit-backdrop-filter: drop-shadow(4px 4px 4px #000); } /* グレースケール */ .grayscale { backdrop-filter: grayscale(100%); -webkit-backdrop-filter: grayscale(100%); } /* 色相反転 */ .hue-rotate { backdrop-filter: hue-rotate(120deg); -webkit-backdrop-filter: hue-rotate(120deg); } /* 階調反転 */ .invert { backdrop-filter: invert(70%); -webkit-backdrop-filter: invert(70%); } /* 透明度 */ .opacity { backdrop-filter: opacity(50%); -webkit-backdrop-filter: opacity(50%); } /* セピア */ .sepia { backdrop-filter: sepia(90%); -webkit-backdrop-filter: sepia(90%); } /* 彩度 */ .saturate { backdrop-filter: saturate(3); -webkit-backdrop-filter: saturate(3); } </style> <div class="fileterwrap"> <div class="none filetersample"> <p>backdrop-filter: none</p> </div> </div> <div class="fileterwrap"> <div class="blur filetersample"> <p>backdrop-filter: blur(3px)</p> </div> </div> <div class="fileterwrap"> <div class="brightness filetersample"> <p>backdrop-filter: brightness(150%);</p> </div> </div> <div class="fileterwrap"> <div class="contrast filetersample"> <p>backdrop-filter: contrast(200%);</p> </div> </div> <div class="fileterwrap"> <div class="drop-shadow filetersample"> <p>backdrop-filter: drop-shadow(4px 4px 10px blue);</p> </div> </div> <div class="fileterwrap"> <div class="grayscale filetersample"> <p>backdrop-filter: grayscale(100%);</p> </div> </div> <div class="fileterwrap"> <div class="hue-rotate filetersample"> <p>backdrop-filter: hue-rotate(120deg);</p> </div> </div> <div class="fileterwrap"> <div class="invert filetersample"> <p>backdrop-filter: invert(70%);</p> </div> </div> <div class="fileterwrap"> <div class="opacity filetersample"> <p>backdrop-filter: opacity(50%);</p> </div> </div> <div class="fileterwrap"> <div class="sepia filetersample"> <p>backdrop-filter: sepia(90%);</p> </div> </div> <div class="fileterwrap"> <div class="saturate filetersample"> <p>backdrop-filter: saturate(3);</p> </div> </div> </section> |
ブラウザ上で表示した結果
backdrop-filter: none
backdrop-filter: blur(3px)
backdrop-filter: brightness(150%);
backdrop-filter: contrast(200%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(100%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(50%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(3);
-
前の記事
C# ラムダ演算子で文字列を1文字ずつに分解する 2021.01.16
-
次の記事
Alpine.jsを使ってhoverで表示されるツールチップを作成する 2021.01.16
コメントを書く