1

私は以下のようにシャドウボックスを作成する方法を探していました。オンラインでさまざまなチュートリアルを検索しましたが、機能していないようです。

ここに画像の説明を入力してください

上記のように自分のWebサイトにシャドウボックスを作成しようとしていますが、ボックスの中心に適切なピクセル数を取得する方法がわかりません。

CSS3はどうあるべきですか？どんな助けでも私を助けるのに素晴らしいでしょう。

本当にありがとう。

4

4 に答える 4

3

1 年前に行ったこのデモを確認してください。

そして、私が今行ったこの簡略化されたバージョン。

HTML :<div class="box"></div>

関連するCSS :

.box {
    width: 20em; height: 6em;
    border: solid 1px #ccc;
    position: relative;
    background: white;
}
.box:before, .box:after {
    min-height: 45%; width: 65%;
    border-radius: .2em;
    box-shadow: 0 0 .625em rgba(204,204,204,.4);
    position: absolute;
    z-index: -1;
    background: rgba(204,204,204,.4);
    content: '';
}
.box:before {
    bottom: 0; left: .3em;
    transform: rotate(-5deg);
}
.box:after {
    right: .3em; bottom: 0; 
    transform: rotate(5deg);
}

ピクセル数を取得する必要はありません。値を使用でき%ます。

于 2013-03-09T15:03:05.160 に答える
1

この手法は、単一の要素に適用されます。この要素からいくつかの疑似要素が生成され、 のようにその背後にプッシュされ#box:before, #box:after ます。これらの疑似要素は、明示的に配置されます。次に、css3 ボックス シャドウをこれらの要素に適用し、変換を適用する必要があります。詳細については、次のサイトを参照してください。

http://nimbupani.com/drop-shadows-with-css3.html
http://nicolasgallagher.com/css-drop-shadows-without-images/
また、以下のコードはhttp://www.red-teamからのものです-design.com/how-to-create-slick-effects-with-css3-box-shadow
HTML

<div id="box">
   <p>Content and content</p>
</div>

CSS :

 #box 
  {
  position: relative;
  width: 60%;
  background: #ddd;
 -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
    }


  #box:before, #box:after 
  {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
 -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
 -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 -webkit-transform: rotate(-3deg);    
 -moz-transform: rotate(-3deg);   
 -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
   }

#box:after 
{
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
  }
于 2013-03-09T11:33:22.983 に答える
0

html5 には、そのような影を生成するための box-shadow プロパティがあります...以前は、そのようなものを作成するにはフラッシュまたはフォトショップが必要でした...

これは役立つはずです。他のすべての機能も備えています...

http://w3schools.com/css3/default.asp

于 2013-03-09T09:32:30.473 に答える
-3

この種の影は、CSS3 ではこれまでのところ不可能です。これに対する解決策は、影の外部イメージを作成し、それを要素の背景イメージに適用することです。

また、リアルな影を作成するための Photoshop アクションを見つけて、それを背景画像として使用して奥行きを追加することもできます..

于 2013-03-09T09:46:20.107 に答える