ぼんやりとした枠線を使った動的レイアウト

Question

私は設計されたウェブページのレイアウトを活かしています。デザインが少し珍しいかもしれないので、私はそれが達成可能かどうかわからない。基本的には、900pxの固定幅のコンテンツボックスを用意します。コンテンツボックスは、ページ本文の中央に配置されます。私は、ページにフェーディングpngsと2つの垂直な列を追加したい。左のpngは、左の黒から右の透明に向いています。右のPNGは、右の黒の黒から左の透明まで消えます。 2つのPNGはそれぞれ250ピクセル幅になります。すべてが配置されたら、レイアウトは左端と右端に色あせた紙のように見えるはずです。しかし、そのトリックはページのサイズを変更しています。画面の幅が1500ピクセル以下（両方の列が部分的に画面外にある）の場合、列はコンテンツボックスの下には表示されず、単にゼロに縮小されます。下のイメージを考えてください。黒いアウトラインが画面、青がコンテンツ、赤が列です。画面の幅が1500ピクセルのときは、列とコンテンツが整列します。錯視（境界なし）は、退色するイメージです。 ！[画面サイズが1500pxの場合のレイアウト] [1]画面が引き伸ばされると、列がばらばらになり、色あせた外観が維持されます。 ！[画面が1500ピクセル以上の場合のレイアウト] [2]最後に、画面の幅が1500ピクセル以下になると、列は縮小しますが、各列の背景イメージは、左側の列が縮小し、黒がコンテンツボックスの左側に近づくことは間違っています）。 ！[レイアウト画面が広い未満1500pxのとき] [3]

**は

Answer 1

ベストjQueryとCSS3の組み合わせであることを希望:(画像を投稿することができませんでした。

jQueryがにあなたをALOWますメインのコンテンツを中央に保ち、両側にdivを持つCSS3では、画像を必要とせずに両側にグラデーションができるようになりましたが、CSS3に準拠していないブラウザではグラデーションが表示されません。それに準拠していないのはIE8以前のものだけですが、アドオンがあります（ModenizrとIE Chromeタブ）

Jquery

$(document).ready(function(){ 
windowWidth = $(window).width(); 
divWidth = (windowWidth - 900)/2; 
$('#left_container').css({width: divWidth+"px"}); 
$('#right_container').css({width: divWidth+"px"}); 
}); 

$(window).resize(function() { 
windowWidth = $(window).width(); 
divWidth = (windowWidth - 900)/2; 
$('#left_container').css({width: divWidth+"px"}); 
$('#right_container').css({width: divWidth+"px"}); 
}); 

左本部CSS

background-image: linear-gradient(90 , #FFFFFF 0%, #000000 52%); 
background-image: -o-linear-gradient(90 , #FFFFFF 0%, #000000 52%); 
background-image: -moz-linear-gradient(90 , #FFFFFF 0%, #000000 52%); 
background-image: -webkit-linear-gradient(90 , #FFFFFF 0%, #000000 52%); 
background-image: -ms-linear-gradient(90 , #FFFFFF 0%, #000000 52%); 

background-image: -webkit-gradient(
linear, 
90 90, 
right 90, 
color-stop(0, #FFFFFF), 
color-stop(0.52, #000000) 
); 

右本部CSS

background-image: linear-gradient(270 , #FFFFFF 0%, #000000 52%); 
background-image: -o-linear-gradient(270 , #FFFFFF 0%, #000000 52%); 
background-image: -moz-linear-gradient(270 , #FFFFFF 0%, #000000 52%); 
background-image: -webkit-linear-gradient(270 , #FFFFFF 0%, #000000 52%); 
background-image: -ms-linear-gradient(270 , #FFFFFF 0%, #000000 52%); 

background-image: -webkit-gradient(
linear, 
270 270, 
left 270, 
color-stop(0, #FFFFFF), 
color-stop(0.52, #000000) 
);