javascript - CSS (および JavaScript ?) を使用して、ぼやけた「つや消し」の背景を作成する方法は?

Question

Webkit ブラウザーで動作する HTML5、CSS3、および JavaScript を使用して、iOS 7 スタイルのつや消しの外観を作成しようとしています。

技術的には、次の HTML が与えられます。

<style>
  #partial-overlay {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, .2); /* TODO frost */
    position: fixed;
    top: 0;
    left: 0;
  }
</style>
<div id="main-view">
  <div style="width: 50px; height: 50px; background: #f00"></div>
  To my left is a red box<br>
  Now there is just text<br>
  Text that goes on for a few pixels <br>
  or even more
</div>
<div id="partial-overlay">
  Here is some content
</div>

-webkit-filter: blur(5px)の水平方向の最初の 20px にa のようなものを適用したいと思います#main-view。

CSS が変更された場合、最初の 20px に垂直#partial-overlay { width: 20px; height: 100%; ...}に適用する必要があります。-webkit-filter: blur(5px)

明らかな解決策は、javascript を使用してのクローンを作成し、#main-view必要overflow: hiddenに応じて幅/高さを変更することですが、より複雑なページ/CSS 構造に一般化するのは難しいようです。

最小限のパフォーマンスヒットと最大の一般化可能性でこれを達成するためのより良い方法はありますか?

編集:これは私が達成しようとしているものの例です: モックアップ

score 13 · Accepted Answer

基本的に、オーバーレイのみにCSSぼかしフィルターを適用するよりも、メインコンテンツを複製し、両方のdivのスクロールを同期するオーバーレイプレースホルダーを持つことができます。

シンプルな JavaScript で実行できます。

$(document).ready(function(){
  $('.overlay').append( $('.content').html() );
  $('.content').on('scroll', function(){
    $('.overlay').scrollTop($(this).scrollTop());
  });
});

CSS の場合:

.overlay {
    overflow:hidden;
    -webkit-filter: blur(.25em);
    background:#fff;
}

私はあなたのために実用的な例をまとめました（Webkitのみ）：

http://jsfiddle.net/kmxD3/1/

楽しむ！:)

score 11 · Accepted Answer

最小限のパフォーマンスヒットと最大の一般化可能性でこれを達成するためのより良い方法はありますか?

これに対する答えはノーです。

その理由は、ブラウザウィンドウで使用されるビットマップに直接アクセスして、ぼかしたい領域のピクセルを抽出または操作する必要があるためです (ブラウザの「aero」がきれいに見えるといいのですが)。きれい..) または適用する要素の背後にある要素で機能するフィルター (または制限領域を設定することができます)。

これを行うためのネイティブサポートがないため (キャンバスと拡張 API、または html からキャンバスイメージを生成するライブラリを除いて -> 比較的遅い)、いずれの場合もトリッキー (イメージ、分割 div など) を使用してこれを行う必要があります。 .

ページ内のすべてをキャンバス上に作成した場合、多くの興味深いことができますが、レイアウト、更新、フィルタリングなどを自分で実行する必要があり、Javascript はネイティブよりも遅いため、最適化されていない状態に戻ることになります。（言うまでもなく、エラーが発生しやすくなります）。

ブラウザーがウィンドウのセクションをキャンバスとして取得できるようになるまでは (そのページのすべてが同じオリジンである必要があるか、特別な受け入れヘッダーが設定されたコンテンツを持っている必要があるため)、トリックを行う以外に方法はありません。

アップデート

html2canvas などを使用して実行できるが、妥協点 (-> パフォーマンスが低下) を使用する必要があることのデモンストレーションとして - デモはラフで実験的なものであり、うまく機能させるには微調整が必要です - ただし、デモのみ:
http:// jsfiddle.net/AbdiasSoftware/RCaLR/

結果：

ここに画像の説明を入力

背景の一部を取得する一般化された関数:

getBlurredBG(x, y, width, height, id);

html2canvas を使用してウィンドウの一部を取得します。

function getBlurredBG(x, y, w, h, id) {

    html2canvas(document.body, {
        onrendered: function (canvas) {
            process(canvas, x, y, w, h, id);
        },
        width: (x + w),
        height: (y + h)
    });
}

コンテンツを処理します。

function process(canvas, x, y, w, h, id) {

    //create new canvas to enable clipping
    //As html2canvas returns a canvas from 0,0 to width and height
    //we need to clip it.
    var ocanvas = document.createElement('canvas');
    ocanvas.width = w;
    ocanvas.height = h;
    ocanvas.style.left = x + 'px';
    ocanvas.style.top = y + 'px';
    ocanvas.style.position = 'absolute';
    ocanvas.id = id;

    var ctx = ocanvas.getContext('2d');
    ctx.drawImage(canvas, x, y, w, h,
                          0, 0, w, h);

    stackBlurCanvasRGB(ocanvas, x, y, w, h, 28)
    lighten(ocanvas);

    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.fillRect(x, y, w, h);

    ctx.fillStyle = '#999';
    ctx.font = '32px arial';
    ctx.fillText("Partial overlay content", 10, 60);

    document.body.appendChild(ocanvas);
}

score 10 · Accepted Answer

最近、新しい-webkit-backdrop-filter. これは現在、Safari 9.0 でサポートされており、Chrome ではフラグが設定されています。

デモ：

#blurred {
  -webkit-backdrop-filter: blur(10px);
  width: 200px;
  height: 100px;
  position: fixed;
  top: 50px;
  left: 50px;
  border: 3px solid white;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">

<div id="blurred"> Blurred </div>

現在サポートされているのは Safari のみです。Chrome と Opera はこれをフラグの下に持っています。

注:現在-webkit-backdrop-filterはまだ十分なサポートが得られていないため、現時点でこの効果を得たい場合は、SVG を使用するのが最善の方法です。feGaussianBlur

score 3 · Accepted Answer

http://thiv.net/frost

私がやったことのライブサンプル（上の画像のように更新されました）

コード：

<style>
  #partial-overlay {
    width: 100%;
    height: 45px;
    background: #ffffff; /* TODO frost */
    -webkit-opacity:0.70;
    -webkit-filter: blur(5px);
    position: absolute;
    top: 20px;
    left: 0px;
    z-index:5;
  }
  #main-view
  {
   position: fixed;
   top: 20px;
   left: 80px;
   z-index:-1;
  }
</style>
<div id="main-view">
  <div style="width: 50px; height: 50px; background: #f00; position:fixed; left:10px; top: 40px; -webkit-filter: blur(2px); "></div>
    <div style="width: 80px; height: 60px; background: #fff; position:fixed; left:0px; top: 66px; -webkit-filter: blur(5px);"></div>
    <div style="width: 50px; height: 30px; background: #f00; position:fixed; left:10px; top: 60px;"></div>
  <p style="font-family:Sans, Arial, Verdana;">
  To my left is a red box<br>
  Now there is just text<br>
  Text that goes on for a few pixels <br>
  or even more
  </p>
</div>
<div id="partial-overlay">

</div>

必要以上にきれいに見せましたが、うまくいきます！

score 2 · Accepted Answer

サポートはまだ非常に限られています (Firefox のみ) が、これを取得する 1 つの方法は次のとおりです。

Firefox のみのデモ

CSS は非常に単純です。

#partial-overlay {
    width:400px; 
    height:100px; 
    background: -moz-element(#main-view);
    top: 0px;
    left: 200px;
    position: absolute;
    opacity: 0.3;
}

重要なのは、メインビュー要素を部分的にオーバーレイするための背景として使用することです。

Firefox ではフィルターを使用できないため、このデモでは不透明度のみを使用します。

背景の要素プロパティは w3c によって承認されているため、将来 Webkit で表示される可能性があります。

デモでは、何が何であるかをより明確にするために、部分的なオーバーレイが右にシフトされています。

score 2 · Accepted Answer

残念ながら、メイン div のコピーが必要になることがわかったので、これを行う良い方法はありません。

<div class="wrapper">
   <div class="overlay"></div>
   <div id="main-copy"></div>
</div>

オーバーレイはラッパーの幅を押し広げますが、メインコピーはぼかしで背景になります。メインコピーのコンテンツが複雑な場合、明らかにパフォーマンスの問題が発生します。

javascript - CSS (および JavaScript ?) を使用して、ぼやけた「つや消し」の背景を作成する方法は?

10 に答える 10

Firefox のみのデモ

Related

Reference