web-dev-qa-db-ja.com

iOS 7のCSSを使ったぼやけたオーバーレイ効果は？

Appleのオーバーレイは単なる透明性以上のものと思われます。 CSSとおそらくJSでこの効果を達成する方法について何かアイデアはありますか？

More than just transparency

javascriptcssuser-interfaceblur
160
Lumpy

CSS3でも可能です。

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

ここでの例=> jsfiddle

146
Cana

あなたは私に試してもらいたかったので、私はそうしました、ここで例をチェックしてください：

http://codepen.io/Edo_B/pen/cLbrt

使用方法

  1. HWアクセラレーテッドCSSフィルタ
  2. クラス割り当てと矢印キーイベントのJS
  3. Images CSS Clipプロパティ

それでおしまい。

また、キャンバスを使用して現在のDOMをコピーしてぼかしている場合は、どの画面でもこれを動的に実行できると思います。

47
Edo Ben Shitrit

[編集]将来の（モバイル）Safari 9では、まさにこれのために-webkit-backdrop-filterがあるでしょう。 this ペンをご覧ください。

私は過去4週間このことについて考え、この解決策を思い付きました。

ライブデモ

[編集]私は CSS-Tricks についてもっと綿密な記事を書いた

この手法では CSS Regions を使用しているため、現時点ではブラウザのサポートは最適ではありません。 （ http://caniuse.com/#feat=css-regions ）

この手法の重要な部分は、CSSリージョンを使用してレイアウトからコンテンツを分離することです。最初に.contentでflow-into:content要素を定義してから適切な構造を使用してヘッダーをぼかします。

レイアウト構造

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

このレイアウトの2つの重要な部分は.header__backgroundと.phone__contentです - これらはコンテンツが流れるべきコンテナです。

CSSリージョンを使うとflow-from:contentと同じくらい簡単です（.contentは名前付きリージョンcontentに流れています）

今トリッキーな部分が来ます。常に.header__backgroundを通してコンテンツを流したいのです。それは、コンテンツが曖昧になる部分だからです。 （webkit-filter:blur(10px);を使用）

これは、コンテンツが常に.contentを介して流れるようにするために、transfrom:translateY(-$HeightOfTheHeader) the.header__backgroundによって行われます。この変換は、ヘッダーの下にあるコンテンツを常に非表示にします。これを修正すると簡単に追加できます

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

変換に対応するため。

これは現在働いています：

  • Chrome 29以降（「実験的Webキット機能」/「実験的Webプラットフォーム機能を有効にする」を有効にする）
  • Safari 6.1 Seed 6
  • iOS7（遅くてスクロールしない）
38
FWeinb

これは、 element style属性のおかげで、FireFoxで可能になりました。

この実験的な属性を使用すると、背景画像として任意のHTMLコンテンツを使用できます。そのため、背景を作成するには3つのオーバーレイが必要です。

  1. 無地の背景を持つ単純なオーバーレイ（実際のオーバーレイコンテンツを隠すため）。
  2. コンテンツを設定する-moz-element背景でオーバーレイします。 FXはfilter: blur()属性をサポートしていないので、SVGが必要です。
  3. ぼやけていないコンテンツでオーバーレイします。

だから、まとめる：

SVGブラーフィルタ（FXで動作します、他のブラウザはfilter:blur()を使うことができます）：

<svg>
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
</svg>

CSSブラースタイル：

.behind-blur 
{
    filter         : url(#svgBlur); 
    opacity: .4;
    background: -moz-element(#content);
    background-repeat: no-repeat;
}

最後に3層：

<div class="header" style="background-color: #fff">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

それからこれを動かすためにはbackground-positionを設定するだけです（jQueryのサンプルですが、あなたは何でも使用できます）：

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
});

ここではJSフィドルとして、FXのみです。

15
Keith

このデモページをチェックしてください。
このデモはドキュメントをイメージとしてレンダリングするためにhtml2canvasを使用します。

http://blurpopup.labs.daum.net/

  1. [ポップアップ表示]リンクをクリックすると、 'makePopup'関数が呼び出されます。
  2. 'makePopup'はドキュメントをイメージとしてレンダリングするためにhtml2canvasを実行します。
  3. 画像はdata-url文字列に変換され、ポップアップの背景画像として描画されます。
  4. Popupのbgがによってぼやけている - webkit-filter：blur
  5. ポップアップを文書に追加します。
  6. ポップアップをドラッグしている間、それはそれ自身の背景位置を変更します。
14
Gyutae Jo

私が先日見つけたこのペンは、ほんの少しのcssと21行のjavascriptでそれを美しくしているように見えました。これが見つかるまでcloneNode jsコマンドについて聞いたことはありませんでしたが、確かに必要なものに対しては完全に機能しました。

http://codepen.io/rikschennink/pen/zvcgx

詳細：A.基本的にあなたのコンテンツdivを見てそれのcloneNodeを呼び出すのでそれはそれからそれがそれがページの上に置かれているオーバーフロー：隠されたヘッダオブジェクトの中に置かれる複製を作る。 B.それから、両方の画像が一致しているように見え、ヘッダー画像をぼやけさせるように、スクロールを待機します。達成された効果.

それらが言語に組み込まれたわずかなスクリプト化可能性を得るまでは、CSSでは実際には完全には実行できません。

10
Lux.Capacitor
  • ぼかしたい要素を複製する
  • 一番上に置きたい要素（つや消しウィンドウ）に追加します。
  • webkit-filterでクローン要素をぼかし
  • クローン要素が絶対位置にあることを確認してください
  • 元の要素の親をスクロールするときは、scrollTopとscrollLeftをキャッチします。
  • requestAnimationFrameを使用して、xおよびyの値をscrollTopおよびscrollLeftに設定してwebkit-transformを動的にtranslate3dに設定するようになりました

例はここにあります：

  • webkitブラウザで開くようにしてください
  • 携帯電話の画面内をスクロールする（Appleのマウスが一番いいのですが…）
  • ぼかしフッターの動作を見る

http://versie1.com/TEST/ios7/

5
user2523905

昨日、あなたが話していることを実際に行う簡単なデモを作成しました。 http://bit.ly/10clOM9 このデモは加速度計に基づいて視差を計算するので、iPhone自体で最もうまく機能します。基本的に、ぼかしている固定位置の要素に、オーバーレイしているコンテンツをコピーするだけです。

注意：パネルを見るには上にスワイプします。

（私は恐ろしいCSSのIDを使用しましたが、あなたはアイデアを得る）

#frost{
 position: fixed; 
 bottom: 0; 
 left:0; 
 width: 100%; 
 height: 100px; 
 overflow: hidden;
 -webkit-transition: all .5s;
}
#background2{
 -webkit-filter: blur(15px) brightness(.2);
}

#content2fixed{
 position: fixed;
 bottom: 9px;
 left: 9px;
 -webkit-filter: blur(10px);
}
4
ericjbasti

これをチェックしてください http://codepen.io/GianlucaGuarini/pen/Hzrhf それ自身の下にある要素の背景画像を複製せずに効果があるようです。この例でもテキストがぼやけています。

Vague.js

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();
3
Onur Çelik

それについてはあまり確信が持てません、私はCSSが現時点でこれを行うことができないと思います

しかしChris Coyierはそのような効果を達成するために複数の画像を使った古いテクニックについてブログに書いています http://css-tricks.com/blurry-background-effect/

3
Zyad Sherif

私はsvgフィルタを使ってスプライトにも同様の効果を得ています

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>
  • ViewBox属性は、インクルードされた画像のうち必要な部分だけを選択します。
  • Keithの<feGaussianBlur stdDeviation="10"/>の例のように、必要なフィルタに変更するだけです。
  • <image ...>タグを使用して任意の画像に適用したり、複数の画像を使用したりすることもできます。
  • あなたはこれをjsで作り上げて画像として使うか、あなたのcssの中でidを使うことができます。
0
technosaurus

これはあなたを助けるかもしれません！

これはIOSのように背景を動的に変更します

.myBox {
  width: 750px;
  height: 500px;
  border: rgba(0, 0, 0, 0.5) 1px solid;
  background-color: #ffffff;
}

.blurBg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.blurBg img {
  -webkit-filter: blur(50px);
  margin-top: -150px;
  margin-left: -150px;
  width: 150%;
  opacity: 0.6;
}
0
Godwin Vinny Carole