
きっかけ
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のプロパティが欲しいです。