【CSS】iOS風すりガラスエフェクトを背景に実装｜Fire fox、IE11対応｜backdrop-filter

特定エリアだけ背景がぼやけて表示されるCSSについてのご紹介です。
「backdrop-filter: blur(12px)」を使えば特定エリアの背景のみをぼかす（blur）させることができます。
でも2021年3月現在、ブラウザの対応状況があんまりよくない！
Can I Use | backdrop-filter
「ie11」は仕方ないにしても「FireFox」…対応して欲しいよ。
スマホのおかげで「Safari」と「Chrome」のシェアがすごいから、主にこの２つのブラウザに対応して、それ以外（「FireFox」「EDGE」「Opera」「ie11」）は見えれば良いかなぁくらいでOKとして、CSSを書いてみます！
下記のCSSでiOS風のすりガラスエフェクトを「Safari」と「Chrome」に表示して、対応していないブラウザと「ie11」は背景色を濃くして対応します！

CSS

.filter {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background: rgba(255,255,255,.1);
}
//  [ backdrop-filter ] が効かないブラウザへの対応
@supports not (backdrop-filter: blur(30px)) {
  .filterArea {
    background: rgba(255,255,255,.8);
  }
}
// 上の [ @supports ] はie11には効かないので、ie11は個別に対応
@media all and (-ms-high-contrast: none) {
  .filterArea {
    background: rgba(255,255,255,.8);
  }
}

このiOS風すりガラスの表現を使って、iPhoneの上からヒュッと出てくる。。。なんて言うんだろ。ウィジェット？ウィジット？分かんない。その「上からヒュッ！」をデモで作ってみたのでFirefoxやie11でも確認してみてね！

iPhoneの「上からヒュッ！」デモ

このデモを自分でも実装したい人がもしいてくれたら、下のリンクを押すとiPhoneのスクショ画像をダウンロードできます。
さらに画像と同じ階層にHTMLとCSSのファイルを作ってコピペしたら完成です！
「backdrop-fillter」の勉強にもなるので、よかったらお使いください。

デモの画像ダウンロード

iPhoneのスクショ画像をダウンロード

デモのHTML

<div class="demo">
  <img src="ppp.jpg" alt="" />
  <div class="filterArea">
    <ul>
      <li>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li><span></span></li>
      <li><span></span></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  <span></span>
</div>
</div>

デモのCSS

.demo {
	position: relative;
	width: 100%;
	max-width: 378px;
	margin: 30px auto;
	display: block;
	color: #505050;
	overflow: hidden;
	border: 14px solid #252525;
	border-radius: 45px;
}
.demo::after {
	content: "";
	position: absolute;
	z-index: 100;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 53%;
	height: 22px;
	display: block;
	border-radius: 0 0 18px 18px;
	background: #252525;
}
.demo > img {
	display: block;
	width: 100%;
}
.filterArea {
	position: absolute;
	z-index: 10;
	top: -100%;
	left: 0;
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.1);
	text-align: center;
	-webkit-animation: iphone 1s linear infinite;
	animation: iphone 3s linear infinite;
}
@-webkit-keyframes iphone {
	00% {}
	30% {top: -100%;}
	40% {top: 0%;}
	90% {top: 0%;}
	100% {top: -100%;}
}
@keyframes iphone {
	00% {}
	30% {top: -100%;}
	40% {top: 0%;}
	90% {top: 0%;}
	100% {top: -100%;}
}
.filterArea ul {
	display: block;
	padding: 80px 34px 0;
	letter-spacing: -.4em;
	font-size: 0;
	text-align: left;
}
.filterArea li {
	position: relative;
	letter-spacing: -.4em;
	font-size: 0;
	display: inline-block;
	border-radius: 20px;
	background: rgba(0,0,0,.6);
	vertical-align: top;
	box-shadow: 0 -6px 12px rgba(0,0,0,.05) inset;
	margin-bottom: 12px;
	overflow: hidden;
	text-align: center;
}
.filterArea li:nth-of-type(1) {
	width: 48%;
	margin-right: 4%;
	padding: 14px 0;
}
.filterArea li:nth-of-type(1) span {
	letter-spacing: normal;
	border-radius: 200px;
	width: 54px;
	height: 54px;
	background: #1378fc;
	display: inline-block;
	margin-right: 13px;
}
.filterArea li:nth-of-type(1) span:nth-of-type(1),
.filterArea li:nth-of-type(1) span:nth-of-type(2) {
	margin-bottom: 13px;
}
.filterArea li:nth-of-type(1) span:nth-of-type(2),
.filterArea li:nth-of-type(1) span:nth-of-type(4) {
	margin-right: 0;
}
.filterArea li:nth-of-type(1) span:nth-of-type(1) {
	background: rgba(255,255,255,.3);
}
.filterArea li:nth-of-type(1) span:nth-of-type(2) {
	background: #4ed869;
}
.filterArea li:nth-of-type(2) {
	width: 48%;
	height: 149px;
}
.filterArea li:nth-of-type(3) {
	width: 22%;
	margin-right: 4%;
	height: 66px;
}
.filterArea li:nth-of-type(4) {
	width: 22%;
	margin-right: 4%;
	height: 66px;
}
.filterArea li:nth-of-type(5) {
	width: 22%;
	margin-right: 4%;
	height: 140px;
}
.filterArea li:nth-of-type(6) {
	width: 22%;
	height: 140px;
}
.filterArea li:nth-of-type(5) span, .filterArea li:nth-of-type(6) span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60%;
	background: rgba(255,255,255,1);
}
.filterArea li:nth-of-type(6) span {
	height: 30%;
}
.filterArea li:nth-of-type(7) {
	width: 48%;
	margin-right: 4%;
	height: 66px;
	margin-top: -76px;
	display: block;
}
.filterArea li:nth-of-type(8), .filterArea li:nth-of-type(9), .filterArea li:nth-of-type(10), .filterArea li:nth-of-type(11), .filterArea li:nth-of-type(12), .filterArea li:nth-of-type(13), .filterArea li:nth-of-type(14), .filterArea li:nth-of-type(15), .filterArea li:nth-of-type(16), .filterArea li:nth-of-type(17) {
	width: 22%;
	margin-right: 4%;
	height: 66px;
}
.filterArea li:nth-of-type(11) {
	margin-right: 0;
}
.filterArea > span {
	position: absolute;
	bottom: 11px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: block;
	width: 140px;
	height: 5px;
	border-radius: 12px;
	background: rgba(255,255,255,.5);
}
@supports not (backdrop-filter: blur(30px)) {
	.filterArea {
		background: rgba(255,255,255,.8);
	}
	.filterArea > span {
		background: rgba(0,0,0,.4);
	}
}
@media all and (-ms-high-contrast: none) {
	.filterArea {
		background: rgba(255,255,255,.8);
	}
	.filterArea > span {
		background: rgba(0,0,0,.4);
	}
}