CSS | backdrop-filterを使ったデザイン集
backdrop-filterを使ったCSSデザインサンプル集です。
backdrop-filterの基本
cssのbackdrop-filterは、指定したHTML要素の下にあるHTML要素の重なりあう部分に対してフィルターをかける事ができるプロパティです。
HTML要素が重なる設計が必要で、主にpositionを指定されている要素であったり、background-imageで指定した画像に対しても有効です。
また、フィルター効果があるのは重なりあうHTML要素ですので、指定しているHTML要素は透過されている必要があります。
backdrop-filterはを指定した要素にはフィルターはかかりませんので、内包するテキストにもフィルターがかかってしまう、というデメリットは事はありません。
サイドメニュー
backdrop-filterを利用してサイドメニュー的なものを作成した時のデザインです。
サンプルでは、カラーバリエーションの切り替えボタン的ものを用意しました。
See the Pen CSS | Rotate character by character by yochans (@yochans) on CodePen.
HTMLは、ページ全体またはブロック単位とする「.container」。
その中にサンプルとしてわかりやすくする為に<img>タグ、backdrop-filterを指定する「.area」というHTML要素を設置しています。
<div class="container">
<img class="background-image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
<div class="area">
<ul>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>Python</li>
</ul>
</div>
</div>「.container」に「position: relative;」を「position: absolute;」を指定した要素の基準点とします。
「.area」に「position: absolute;」を指定して左上隅に設置、「backdrop-filter」を指定して下にある「.container」および画像に対してフィルターをかけています。
.container{
position: relative;
width: 500px;
max-width: 100%;
margin: 10px auto;
}
.background-image{
width: 100%;
vertical-align: top;
}
.area{
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
font: 16px sans-serif;
color: #FFF;
}「.area」の「background」は完全に透過させずにrgbaで色を付けていますが、「transparent」の指定などで完全な透過としても機能します。
サイドメニュー（ちょっとリッチに）
outlineを利用して、透過色のインラインボーダーっぽくしてちょっとだけリッチにしてみました。
See the Pen CSS | backdrop-filter design 02 by yochans (@yochans) on CodePen.
<div class="container">
<img class="background-image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
<div class="area">
<ul>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>Python</li>
</ul>
</div>
</div>outlineのサイズ分をtop、left、width、heightで調節していますが、outlineでborder-boxみたいな事できるのであればもっとシンプルに記述できそうですね。
.container{
position: relative;
width: 500px;
max-width: 100%;
margin: 10px auto;
}
.background-image{
width: 100%;
vertical-align: top;
}
.area{
position: absolute;
top: 6%;
left: 3%;
width: 30%;
height: 88%;
background: rgba(255, 0, 0, 0.5);
backdrop-filter: blur(5px);
font: 16px sans-serif;
color: #FFF;
outline: 5px solid rgba(255, 0, 0, 0.5);
outline-offset: 2px;
}見出し・タイトル
見出しやタイトルに向いていそうなbackdrop-filterプロパティを利用したCSSデザインです。
位置が変わっただけでは面白くないですので、丸くしてみました。
See the Pen CSS | backdrop-filter design 02 by yochans (@yochans) on CodePen.
<div class="container">
<img class="background-image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
<div class="area">
<p>ONE NOTES</p>
</div>
</div>「.area」の角を丸くしているのは、左下辺と右下辺だけです。
はみ出させて「overflow: hidden;」で隠してるのかな？と30分前に自分で書いたコードに困惑してしまいました。
.container{
position: relative;
width: 500px;
max-width: 100%;
margin: 10px auto;
}
.background-image{
width: 100%;
vertical-align: top;
}
.area{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40%;
border-radius: 0 0 50% 50%;
background: rgba(255, 105, 180, 0.4);
backdrop-filter: blur(5px);
}
.area p{
margin-top: 40px;
font: 20px sans-serif;
font-weight: bold;
color: #FFF;
text-align: center;
}リボン
リボン風にしたデザインです。
backdrop-filterが必要かどうかわかりませんが、重なる部分が微妙にぼけてると印象は結構違うかもしれません。
See the Pen CSS | backdrop-filter design 04 by yochans (@yochans) on CodePen.
<div class="container">
<img class="background-image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
<div class="area">
<p>ONE NOTES</p>
</div>
</div>CSSのリボンのサイズや角度、位置設定は雑に書いています。
多分、普通はもっとキレイに書けるはず。
.container{
position: relative;
width: 500px;
max-width: 100%;
margin: 10px auto;
overflow: hidden;
}
.background-image{
width: 100%;
vertical-align: top;
}
.area{
position: absolute;
top: 15%;
left: -15%;
width: 50%;
height: 15%;
background: rgba(255, 105, 180, 0.4);
backdrop-filter: blur(5px);
transform: rotate(-45deg);
}
.area p{
margin-top: 5px;
font: 20px sans-serif;
font-weight: bold;
color: #FFF;
text-align: center;
}テキストを境界にしたデザイン
テキスト（フォント）に対してbackdrop-filterは、どう使えるのか模索してみた産物です。
テキスト以外の部分にbackdrop-filterをかけています。
その逆も一応可能でしたが、見た目的に全然パッとしませんでしたので、やめました。
See the Pen CSS | backdrop-filter design 04 by yochans (@yochans) on CodePen.
<div class="container">
<div class="area">
<p>ONE</p>
<p>NOTE</p>
</div>
</div>「background-clip: text;」を利用する為に、このサンプルでは<img>タグではなく「background-image」で画像を表示しています。
2度画像ファイルを読み込んでいますが、おそらく現状のCSSではそうするしかなさそうでした。
「.container」でフィルターのかかっていない画像を表示して、「.area」で上からテキスト部分を残した部分にフィルターをかけたものを重ねています。
.container{
width: 500px;
max-width: 100%;
margin: 10px auto;
background-image: url(https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.area{
background-image: url(https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
backdrop-filter: brightness(0.2);
}
.area p{
width: 100%;
margin: 0;
padding: 5px;
font-size: 140px;
font-weight: bold;
text-align: center;
color: transparent;
line-height: 1em;
}