2

だから...私は奇妙な問題に対するこの奇妙な解決策を作成しました:ボックスシャドウの代わりにきれいな側面を持つグラデーションのように、まっすぐな側面を持つ影が必要でした。

:after 要素を使用して、必要な要素の下部にグラデーションを追加しました (サンプルでは、​​これはコメントアウトされています)。次に、負のサイズのインセット シャドウを試してみましたが、これは同じように機能します。これらは、1 つの小さな詳細を除いて完全に機能します。カバーする要素がクリックできない場合があるため、影のように使用することはできません。

サンプル: http://codepen.io/syren/pen/jlcym

私がすでに除外したいくつかのこと：

1)下の要素にインセットシャドウを使用する:元の要素に適用する必要があります。そうしないと、物が動いたときに影のように機能しません。私が理解できれば

2) 負のスプレッドまたはサイズのボックス シャドウを使用する: これはうまくいきます。

3) Z-index: 非常に動的なページであるため乱雑です。そのため、ある場所では使用できますが、別の場所では使用できません。影として見ると、少なくとも視覚的にすべてを覆う必要があるためです。

つまり、要約すると、クリーンなエッジとまったく同じように見えるようにしたいです。また、周囲の要素ではなく要素にアタッチする必要があり、純粋な CSS ソリューションにしたいと思っています。疑似要素。

何か案は？

4

1 に答える 1

0

http://codepen.io/anon/pen/cuJqG

html：

<nav>
  <h1>I'm an Example Header</h1>
</nav>
<section>
  <h3>You can't click me because the shadow above is covering me!</h3>

css：

nav{
  border-bottom:3px solid #000;
  position:relative;
}

h1{
  font-family: "Helvetica";
  text-transform:uppercase;
  margin: 20px 10px 10px;
}

h3{
  font-family: Helvetica, sans-serif;
  font-weight: 600;
  padding:10px;
  margin:0;
  cursor: pointer;
  width: 98.75%;
  color: white;
  background: #ff0000;
  box-shadow: inset 0 20px 40px -20px #000; 
}
于 2013-02-04T09:09:28.280 に答える