1行でおしゃれに！半透明な背景にモザイクをかける「backdrop-filter」

2019年1月2日2020年5月5日

プログラミング

iPhoneで、背景にブラーかかってるやつよくあるじゃないですか。

こーゆーのとか、

こーゆーのとか。

これをサイトで使えたらよくないすか？

良いですよね！！！って事で使ってみましょう。

使い方

-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);

この二行です。ベンダープレフィックス除けば一行です。タイトル詐欺です。許してください。なんでもs（略

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=yes" />
    <title>Backdrop-filter sample</title>
    <style>
        h1{
            background-color: #cdedfa;
            border-bottom: 4px solid #0062A9;
            border-radius: 6px;
        }
    
        .layer{
            position: fixed;
            background-color: rgba(255, 255, 255, 0.6);
            top: 0;
            height: 100vh;
            width: 33vw;
        }
        
        .layer.no-blur{
            right: 33vw;
        }
        
        .layer.blur{
            right: 0;
            -webkit-backdrop-filter: blur(4px);/* これ！！これ！！これ！！ 大事な事だから3回言いました！ */
            backdrop-filter: blur(4px);
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>モザイクモザイクモザイク</h1>
        <p>
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </p>
        <p>
            ボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケボケ
        </p>
    </div>
    <div class="layer no-blur">
        <p>
            メニューとかメニューとかメニューとか
        </p>
    </div>
    <div class="layer blur">
        <p>
            メニューとかメニューとかメニューとか
        </p>
    </div>
</body>
</html>