問題タブ [box-shadow]

CSS3 box-shadow プロパティを使用する必要があるプロジェクトに取り組んでいます。それは問題ありませんが、影の広がりサイズを親オブジェクトのパーセンテージに設定できないことがわかりました。

box-shadow は加法的ではないことを十分に理解しています。したがって、親のサイズを参照として取りません。

しかし、(ブレークポイントだけでなく) 流動的にスケーリングするオブジェクトを備えた完全に応答性の高いサイトが必要であるという事実を考えると、これも問題を引き起こします。シャドウをスプレッド プロパティに絶対単位 (em または px) でのみ設定できます。

これに対する解決策はありますか？コンテナー (「影」の場合 - ぼかしなし) 内で (コンテンツ用の) 内部コンテナーを使用することを考えましたが、これにより別の問題が発生します - 内部コンテナーの垂直方向の中央揃えです。

解決策はありますか？jQuery は使用せず、純粋な CSS のみでお願いします。

Firefox18は-moz-box-shadowまたはbox-shadowCSS属性を認識していないようです。

を使用するborder-colorと、すべて正常に動作します。

私は何が間違っているのですか？

これらのスペースをこのボックスの影で覆うにはどうすればよいですか?

CSS-

ただのフィドル

練習と楽しみのために、純粋な CSS で次のロゴを 1 つの要素で再作成しようとしています。

お気付きのように、各「バー」には小さな影付きの灰色の領域があり、奥行き感があります。可能であれば、これらを純粋な CSS で作成したいと考えています。私にとってトリッキーなことは、それらがバーの上にあるバーの後ろにあるように見えることです。そのため、全体にマスクを適用するのではなく、それを行うには個々のバーレベルにする必要があります.

これまでのところ、疑似要素といくつかのボックス シャドウを使用してバーを作成し、グラデーションと を使用して B に色を与えることができましたbackground-clip: text。

通常、回転した要素またはマスクを使用して影を適用しますが、ボックス シャドウを使用してバーを作成したため、それらを個々の影に適用する方法がわかりません。すべて 1 つの影ですが、他のバーを覆わずに 1 つのバーに適用することを意味します)

これが私がこれまでに持っているものです

私のコード

今、私はこれが可能だとは思いませんが、SO ユーザーの創意工夫にはいつも驚かされます。

TL,DR要素を追加せずにこれらの斜めの影を作成するにはどうすればよいですか? 必要に応じて、現在使用している方法以外の方法も受け入れます

編集：これが最終結果です

クラス「メニュー項目サブメニュー」とそのすべての子を使用して、divの周りに1つの連続したボックスシャドウを配置しようとしています。現在、「About」アイテムの後ろに影を置いているだけのようです。

HTML コード:

SCSS コード:

これが私が現在得ているものです：

そして、ここに私が取得しようとしているものがあります:

ページの上部に があるナビゲーション バーがありますが、背景の URL を持つ下box-shadowの要素には適用されないようです。section属性をコメント アウトするbackgroundと、ドロップ シャドウが表示されます。

コードペンは次のとおりです。 http://codepen.io/himmel/pen/ByxeGR

マークアップは次のとおりです。

CSS は次のとおりです。

背景画像の上にドロップ シャドウを表示するにはどうすればよいですか?

CSS ドロップ シャドウと CSS トランジションを使用して、一連の 3D ボタン効果を作成しようとしています。私はすべてがうまくいきましたが、見た目は良いですが、ボタンをクリックすると影がボタンに向かって移動し、ボタンが動くだけで一箇所にとどまるようにします。

これが現在のコードペンのデモです。

トランジションのタイミングを変えてみましたが、うまく動きませんでした。

注: このコードの目的に焦点を合わせないでください。発生した問題を強調するための最小限の例にすぎません。

このプロパティを使用しているbox-shadowと、要素とその影の間に 1 ピクセル (またはそれ以下) の余白が生じて、要素の側面に収まらないことがあります。これは、問題を提起するために使用する例ですtransform（これが唯一の方法ではないと思います）：

何も表示されない場合は、フルスクリーンのスニペットを見て、ブラウザーのサイズを変更してみてください (Chrome と Firefox で問題が発生しました)。以下は、私が作成したいくつかのスクリーンショットと（明らかな）期待される結果を含む写真です。

誰もこの問題に直面しましたか?
ブラウザのように見えますが、これらのマージンを回避する回避策を見つけることはできますか?

編集

私は何か新しいことを発見しました: 片面にボックスの影を設定すると、Chrome を使用してギャップは発生しません (Firefox ではまだここにあります):

カルーセルを作成しました。カルーセル アイテムに box-shadow プロパティを追加したいと思います。カルーセルのoverflow:hiddenプロパティのため、これは不可能です。

それを克服する方法はありますか？

このフィドルを確認してください

*なんらかの理由でカルーセルが正しく機能していませんが、CSSの問題は確認できます

HTML:

css (完全な css コードはここに掲載していません。読めないためです。この問題に関する最も重要なスタイルは次のとおりです):

ジャバスクリプト