TEXTURE / 077
Frosted glass
すりガラス
半透明の面の背後をぼかし、すりガラスのように見せます。
実際のHTML・CSSで描かれた見本です。
ひとつ試すなら
重なりと透け方を観察する
こんなときに
背景を感じさせながら情報を重ねたい場面。
仕組みと使い方
filterは要素自身、backdrop-filterは背後に作用します。
対応状況は使用する機能と端末により異なります。公式資料も参照してください。
表現名には通称や説明のための名称を含みます。デモと掲載コードはこの図鑑のオリジナルです。作者について
実装コードを見る
<style>
.sample{width:100%;height:100%;min-height:190px;display:grid;place-items:center;position:relative;overflow:hidden;box-sizing:border-box;font-family:Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;color:#20211d;background:#f1f0e9;padding:22px}.sample *{box-sizing:border-box}.sample button,.sample input,.sample summary{font:inherit}.sample button,.sample summary,.sample label{touch-action:manipulation}.sample :focus-visible{outline:3px solid #6050bf;outline-offset:5px}.sample small{font-size:10px;line-height:1.5}.sample .editable{margin:0}.sample svg{max-width:100%;height:auto}
.sample{background:#b7a6dc}.sample .orb{position:absolute;width:125px;height:125px;border-radius:50%;background:var(--accent,#c9f537);left:12%;top:12%}.sample .glass{width:185px;height:115px;padding:22px;background:#ffffff30;border:1px solid #ffffffa0;border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:27px;font-weight:700;line-height:1.2}
</style>
<div class="sample">
<div class="orb"></div><div class="glass">good<br><small>BACKDROP BLUR</small></div>
</div>