0

学習の媒体として、私はインターネットで見たものを複製しようとしています。私が何をしているのかを知っている友人がテンプレートを見て、その一部を彼のWebページに複製するように頼みました。私はすでにテンプレートから必要なもののほとんどを持っていますが、彼が最も気に入ったものは試して失敗しましたそして、私はこのテンプレートに含まれる魔法が何であるかを理解していません...

私が必要としているのは、メインシートの透明度とその背後にある光の効果を複製することです。私が作成した透明度は、GIMPで作成された黒の1x1 pngでした（Photoshopは購入できません）テンプレートのような素敵なパターンもありますそれは私の友人が尋ねたものの1つなので...

GIMPで作られた光の効果を持つ透明なボックス

これは私が望む効果です。私は影をいじってみましたが、私が望むものが得られなかったので、コードを削除することになりました。今私が持っているのはこれだけです。

HTML：

 <body>
 <div id="box"></div>
 <div id="light"></div>

CSS：

#light{
border:solid 0px white;
height:550px;
width:800px;
left:50%;
margin-top:130px;
margin-left:-400px;
z-index:-1000;
position:absolute;
box-shadow: 0px 0px 300px #929292;
border-radius:100px;
background-color:#929292;
opacity:0.4;
}
#box{
background-image:url(../images/shtr.png);
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}

jqueryまたはjavascriptを使用する必要があるかどうか、またはそれがページのパフォーマンスに役立つかどうかはわかりません...

4

2 に答える 2

1

ここでできるCSS3のことがいくつかあります。

最初に行う必要があるのは、テクスチャとハイライトを使用してdivを設定することです。ハイライトのあるdivは、理想的にはテクスチャdivの子である必要があります。

HTML：

<div class="wrap">
  <div class="transp"></div>
</div>

次に、効果と背景を正しい要素に適用する必要があります。

CSS：

.wrap
{
  background: url(http://wallpoper.com/images/00/35/83/02/pattern-patterns_00358302.jpg);
  height: 500px;
  width: 500px;
}

.transp
{
  position: relative;
  top: 20px;
  left: 30px;
  background: rgba(0, 0, 0, .7);
  height: 100px;
  width: 100px;
    box-shadow: 0px 0px 30px #fff;
}

http://jsfiddle.net/7fTAH/

于 2013-01-18T10:59:13.413 に答える
0

私はなんとかそれを成し遂げました、私は影を落とす新しいdivを作成し、それを画面の外側に置きました（左：100％;）そして影は色#CECECEHTMLコードで中央に落とされます：

<div id="light"></div>
<div id="box">
    ( ... content ... )
</div>

CSSで：

#light{
position: absolute;
background: rgba(0, 0, 0, 0);
height: 800px;
width: 840px;
z-index:-1000;
opacity:0.15;
}  

#box{
background-image:url(../images/shtr.png);/*black 50-60% transparent 1x1 image*/
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}

影を落とすために、jQueryスクリプトを使用しましたが、cssだけでは機能しませんでした。理由は正確にはわかりませんが、コードは次のとおりです。

$(document).ready(function() {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;

    var A = -myWidth - 49.5*myWidth/60
    $("#brilho_grande").css("box-shadow", A+"px 0px 10000px 100px #CECECE");
    $("#brilho_grande").css("left", 2*myWidth+"px");
    $("#brilho_grande").css("top", "339px");
});
于 2013-01-23T16:00:09.887 に答える