きっかけ

iOS7って半透明のレイヤーの透過した部分だけぼかしがかかりますよね。

CSSでも同じことができないかなと思って調べました。

結論

現在のCSSではできない模様。

擬似的に実現

CSSにはblurというプロパティがあるのですが、このblurはコンテンツ全体にぼかしをかけます。

重なったレイヤーの透過した部分にだけぼかしをかける、といったことはできません。

なので、このblurをうまく使って一部だけのぼかしを擬似的に実現します。

デモ

See the Pen スクロールして重なった部分だけぼかし by SUGAWARA Hiroshi (@5000164) on CodePen

このデモは-webkit-のベンダープレフィックスがついているのであしからず。

実装方法

  まず、HTMLで同じ内容のコンテンツを2つ用意します。

次に、CSSで2つのコンテンツがきれいにくっつくように指定します。
ポイントはoverflow-x: hidden;とoverflow-y: scroll;です。
そうしたら、同じ内容のコンテンツの片方にblurをかけます。
その次は、2つのコンテンツの表示位置を同じ高さに合わせます。
ここではbeforeの擬似要素を使って高さを合わせています。
最後に、JavaScriptでスクロールを同期すれば完了です。

まとめ

  スクロールの制御もJavaScriptでやってしまうと相性がいいのかも知れないと思いました。

とりあえず、半透明のレイヤーの透過した部分にだけぼかしをかけるというCSSのプロパティが欲しいです。