4

私は外部の依存関係を減らしたいと考えています。特に、この場合のように、可能な限り画像を CSS 効果に置き換えることによって:

斜めの影の例

HTML と CSS (このフィドルが示すように) は次のとおりです。

HTML

<div id="one">
  <div></div>
</div>

CSS

#one{
  width: 940px;
  height: 350px;
  padding: 0 10px;
  margin: 10px 0;
  position: relative;
}

#one{
  background-image: url("http://webhost.ischool.uw.edu/~joatwood/portfolio/images/slider-shadow.png");
}

#one > div{
  background-color: purple;
  width: 100%;
  height: 100%;
}

私が達成しようとしているのは、次の 3 つのことを取得することです。

  1. 左右の端でのみ要素から外れる斜めの影 (それ以外の場合はオーバーフローを非表示にできません。この要素内の他の疑似要素はその端を超えて拡張する必要があります)
  2. 中央から垂直方向に離れるにつれて、影は黒から白にフェードするはずです
  3. 影はまっすぐなエッジを使用しないでください - 適用した場合の影のように、少しぼやけている必要がありますbox-shadow: 5px 5px 5px

これまでに 2 つの方法を試しましたが、どちらも完全には成功していません。

  1. transform: skewXグラデーションの背景を持つ2つのコンテナサイズの疑似要素で使用しました-#1と#2で完全に成功しましたが、それで#3を達成する方法がわかりません.
  2. transform: rotate前述の疑似要素を使用し、ぼやけをエミュレートするためにいくつかのボックス シャドウを適用しようとしました。この試みは #3 でのみ成功し、#1 と #2 に関する限り、まったく機能しませんでした。

現在の主要なブラウザー (Firefox、Chrome) で動作する限り、CSS3 を使用しても問題ありませんが、ページ上の別のデザイン要素に使用されているため、疑似要素を内部に適用することはできません。<div>

4

2 に答える 2

1

すべてがどのように機能するかはすでに知っているので、あまり説明しません。そうでない人のために - 基本的にlinear-gradient、親に背景を追加しました。次に、目的の外観を実現するために、CSS の三角形 ( :before/を使用して追加:after) を両側にオーバーレイしました。

jsFiddle の例- 私とよく似ています。

すべての主要なブラウザーで動作します。FF は三角形にギザギザのエッジを生成するため、Chrome の方が見栄えがします。

HTML

<div id="two">
  <div></div>
</div>

CSS

#two {
    width: 940px;
    height: 350px;
    padding: 0;
    margin-left: 10px;
    position: relative;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 2%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 98%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 2%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 98%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 2%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 98%);
}

#two > div {
    background-color: purple;
    width: 920px;
    height: 100%;
    margin: 0px auto;
}

#two:before, #two:after {
    content: "";
    width: 10px;
    height: 0px;
    border-top: 175px solid transparent;
    border-bottom: 175px solid transparent;
    position: absolute;
    top: 0;
}

#two:before {
    left: 0px;
    border-left: 10px solid white;
}

#two:after {
    right: 0px;
    border-right: 10px solid white;
}

ご意見をお聞かせください。私が見る限り、それらは同じに見えます。グラデーションを少し調整して、同じにすることができます。

于 2013-11-04T04:24:43.310 に答える
0 
<style type="text/css">
#container {
    width: 350px;
    height: 250px;
    position: relative;
}
#box {
    height: 100%;
    width: 100%;
    background-color: #909;
    position: absolute;
}
.shadow {
    width: 10px;
    height: 50%;
    position: absolute;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
    z-index: -1;
}
#TL {
    transform:rotate(-2deg);
    -ms-transform:rotate(-2deg); /* IE 9 */
    -webkit-transform:rotate(-2deg); /* Safari and Chrome */
    left: -3px;
}
#TR {
    transform:rotate(2deg);
    -ms-transform:rotate(2deg); /* IE 9 */
    -webkit-transform:rotate(2deg); /* Safari and Chrome */
    right: -3px;
}
#BR {
    transform:rotate(178deg);
    -ms-transform:rotate(178deg); /* IE 9 */
    -webkit-transform:rotate(178deg); /* Safari and Chrome */
    right: -3px;
    bottom: 0px;
}
#BL {
    transform:rotate(182deg);
    -ms-transform:rotate(182deg); /* IE 9 */
    -webkit-transform:rotate(182deg); /* Safari and Chrome */
    left: -3px;
    bottom: 0px;
}
</style>

<div id="container">
    <div id="box"></div>
    <div class="shadow" id="TL"></div>
    <div class="shadow" id="TR"></div>
    <div class="shadow" id="BR"></div>
    <div class="shadow" id="BL"></div>
</div>
于 2013-11-04T00:41:34.367 に答える