CSS3 すりガラス効果

体 {
    最小高さ: 100vh;
    ボックスのサイズ: 境界線ボックス;
    マージン: 0;
    パディングトップ: calc(50vh - 6em);
    フォント: 150%/1.6 セリフ;
    背景: url("iphone.jpg") 0 中央に固定;
    背景サイズ: カバー;
}
主要 {
    マージン: 0 自動;
    パディング: 1em;
    最大幅: 30em;
    境界線の半径: .3em;
    ボックスシャドウ: 0 0 0 1px hsla(0,0%,100%,.3) インセット、
                0 .5em 1em rgba(0, 0, 0, 0.6);
    テキストシャドウ: 0 1px 1px hsla(0,0%,100%,.3);
    背景: hsla(0,0%,100%,.3);
}

<メイン>……</メイン>

体 {
    …
    背景: url("iphone.jpg") 0 中央に固定;
    背景サイズ: カバー;
}
主要 {
    …
    背景: hsla(0,0%,100%,.3);
}

主要 {
    …
    -webkit-filter: ぼかし(3px);
    フィルター: ぼかし(3px);
}

主要 {
    位置: 相対的;
    …
}
メイン::前{
    コンテンツ： '';
    位置: 絶対;
    上: 0; 右: 0; 下: 0; 左: 0;
    Zインデックス: -1;
    -webkit-filter: ぼかし(20px);
    フィルター: ぼかし(20px);
    背景: rgba(255,0,0,.5);
}

主要 {
    …
    オーバーフロー: 非表示;
}
メイン::前{
    …
    マージン: -30px;
}