トレインボックスシャドウ
W3C開発者は、box-shadowを非常に柔軟な機能にしています。 このおかげで、このプロパティを非自明な方法で使用すると、非常に興味深い結果を得ることができます。 この記事では、「シャドウテクノロジー」の助けを借りて得たいくつかの効果について説明します。
サンプルをコンパイルしているときに、予期せずにブラウザーで表示されるものがまったく異なることを発見しました。 その結果、ボックスシャドウ機能の簡単なデモンストレーションに加えて、CSS 3サポートの小さなブラウザーテストも取得しました。すべてのサンプルにはCSSコードと画像が含まれています（すべてのPNGの合計ボリュームは161 KBです）。 この記事では、読みやすさを損なわないように、ベンダープレフィックス-moz-および-webkit-を使用してプロパティを規定していません。 すべての例を含む要約ページでは、これらのプレフィックスは（スクロールするときにOperaに外部のボックスシャドウを描画するバグがあることを警告します）。
クローニング（ループ）
box-shadowプロパティを使用すると、多くのシャドウを作成できます。これは非常に独特に使用できます。 以下は、一種のループを持つdiv要素です（一部のゲームでは、シェルはそのような「尾」をおよそ記述しています）。
私にとってはどうでしたか？ 位置と色が異なるいくつかの「影」を作成するだけでした。 box-shadowプロパティの線形寸法を思い出してください：X軸に沿ったインデント（右に正の値、左に負の値）、Y軸に沿ったインデント、ぼかし半径、最後のスケール。
ブラウザはどのように機能しますか？ OperaとFirefoxには問題はありませんでした。 Webkitブラウザーについては、内部告発者を好むようです。 彼らは「影」の正方形を描いて、円の真の本質を明らかにしました：角の最大の丸みを帯びた正方形。 これはもちろん興味深いですが、失敗です。 ところで、彼らがそれでも最後の「シャドウ」ラウンドを描いたことは非常に注目に値します（それがまったく表示されない場合は、モニターの色域に対処する時間です）。
#trail { background: #d0d0d0; border: 1px solid #c0c0c0; border-radius: 40px; box-shadow: #d8d8d8 110px -25px 0 -10px, #e0e0e0 210px 15px 0 -15px, #e8e8e8 310px -10px 0 -20px, #f0f0f0 410px 5px 0 -25px, #f4f4f4 510px 0px 0 -30px; height: 75px; margin: 20px; width: 75px; }
グロー
明るい色でペイントでき、大きくぼかした影は、グロー効果に使用できます。 CSS box-shadowでは許可されているので、使用しないのはなぜですか？
私にとってはどうでしたか？ 円（正方形）を明るい赤色で塗りつぶし、2つの赤いぼやけた「影」を出しました。1つは内側、もう1つは外側です。 したがって、中央部分がより明るく見えるグロー効果が得られました。 いずれにしても、星は通常そのように描きます。
ブラウザはどのように機能しますか？ これを完全に行ったブラウザはありません。 何らかの理由で、OperaとFirefox（およびSafariだけでなく、あまり発音されていません）は、要素の周りに薄く軽いストロークで出てきました。 モニターのガンマが高いほど、目立ちます。
#glow { background: #ff8080; border-radius: 40px; box-shadow: inset #ff0000 0 0 40px 10px, #ff0000 0 0 24px 12px; height: 75px; margin: 45px; width: 75px; }
複数の境界線
場合によっては、要素の周りに2行以上を使用する必要があります。 アウトラインは1つだけ追加され、すべてのブラウザがそれを丸めるわけではありません。 ボーダースタイルのファンタジーは限られています。 この場合、box-shadowが役立ちます。 この例は、トレッドミルを示しています。
私にとってはどうでしたか？ 異なるスケール（サイズ）で複数の「影」を連続して適用する必要があります。 茶色のトラックの場合、前の影（ウェルまたはフレーム）と比較して3ピクセル拡大しました。 白い線の場合-1ピクセル。 順序が重要なので、より深い層がリストの最後にある必要があることを覚えておく必要があります）。
ブラウザはどのように機能しますか？ OperaとFirefoxはほぼ同じようにレンダリングされます。 しかし、ChromeとSafariは催眠術的なものを見せました。 ちなみに、前の例（グロー）で丸みが不十分な「影」の理由を見つけることができます。 Webkits は 、シャドウ自体の増加/減少に比例して、シャドウの境界線半径を増加または減少させません 。 迷惑な横棒。
#multi-border { background: #804020; border: 1px solid #ffffff; border-radius: 40px; box-shadow: /* */ inset #804020 0 0 0 3px, inset #ffffff 0 0 0 4px, inset #804020 0 0 0 7px, inset #ffffff 0 0 0 8px, /* */ #804020 0 0 0 3px, #ffffff 0 0 0 4px, #804020 0 0 0 7px, #ffffff 0 0 0 8px, #804020 0 0 0 15px; height: 75px; margin: 35px; width: 150px; }
ボリューム効果（バルジ）
box-shadowの助けを借りて、良い要素をボリュームのあるものにすることができます。 今日、多くの人々が擬似ボリュームグラフィックスを乱用していますが、この記事では、良い形のデザインルールについては言及していません。
私にとってはどうでしたか？ 2つの内部「シャドウ」を作成する必要がありました。1つはライト、もう1つはダークです。 ライト-右にシフト、ダーク-左にシフト。 同時に、白と黒の半透明性を使用して、明るい影と暗い「影」を作成する必要があります。 半透明性のため（アルファチャンネルが正しく調整されている場合）、暗い「明るい」「影」の合流点は背景色に近い色を取得します。 そうしないと、「影」の1つが優先され、リアリズムが低下します。 例で「影」のぼかしをリセットすると、コードがどのように機能するかを理解しやすくなります。
ブラウザはどのように機能しますか？ Opera、Firefox、およびSafariが同じようにボリューム長方形を描くと仮定します。 Chromeについては、前の例でいくつかの浅瀬の理由を見つけました。内部の「影」は常に境界半径から出ます。
#embossment { background: #404040; border-radius: 20px; box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px, inset rgba(0,0,0,0.5) -8px -8px 18px 5px; height: 75px; margin: 20px; width: 150px; }
勾配
狂気が強くなります。 ここで、box-shadowを使用して虹色のグラデーションを描画します。 一般に、勾配はW3Cドラフトで提供されていますが、Operaはまだそれらをサポートしていません。 奇妙なことに、これにおける実際的な利点は次のとおりです。
私にとってはどうでしたか？ 最初に、赤い背景で塗りつぶされた長方形。 次に、必要な色（便宜上、最初にぼかしなし）の「影」を適用しました：黄色、緑、青、青、紫、赤。 後続の各色は、前の色が見えるように、深さがより高く、右にシフトする必要がありました。 次に、ぼかしを適用しました。半径はグラデーションの色の長さと一致する必要があります。 結果を見るとすぐに、ぼかしが側面だけでなくすべての方向に進むことを思い出しました。これは、グラデーション全体の上部と下部が赤い背景を透過させるためです。 この効果を取り除くには、すべての「影」を増やしてから、同じ量だけ右に移動して、サイズの変化を補正する必要がありました。 コントロールについては、ぼかしなしでチェックします。 できた
ブラウザはどのように機能しますか？ OperaとFirefoxは再び同じ結果を目にしました。 Chromeは、影のぼやけが最小限の場所でより豊かな色を示しました。 誰が正しいことをしたのかを言うつもりはありません。 真実は真ん中にあるようです。 Safariは「影」を非常に弱く鈍らせたため、勾配は明らかに間違って出てきました。 Chromeを除くすべてのブラウザーは、グラデーションを使用して右のブロックにスクロールしているときに速度が低下しました。 Safariは比類のない魅力的な速度になりました。
#gradient { background: #ff0000; border: 1px solid #000000; box-shadow: inset #FF0000 -150px 0 100px -100px, inset #FF00FF -250px 0 100px -100px, inset #0000FF -350px 0 100px -100px, inset #00FFFF -450px 0 100px -100px, inset #00FF00 -550px 0 100px -100px, inset #FFFF00 -650px 0 100px -100px; height: 200px; margin: 20px; width: 600px; }
炎！
さて、今、フリーコーディングの神格化：box-shadowによる火事！ 私はたぶんそれをやり直さなければならなかったので、私はおそらく彼を約2時間殺しました。 この例は、地面に平行で、頭を見る人の方に向けた、燃えるようなマッチを示しています。 もちろん、信じられないほどでした。 しかし、これはCSSの炎です！
私にとってはどうでしたか？ コメントなし、すぐにコードを参照してください:)
ブラウザはどのように機能しますか？ OperaとFirefoxの違いはわずかです。 Safariの「影」は再び正方形になりすぎるため、炎はより広く出てきました。 試合の頭の後ろには奇妙な黒い四角があります。 また、Chromeは火の幅を広げすぎましたが、さらに、ぼかしも非常に粗くなりました。
<div id="black-background"> <div id="burning"></div> </div>
#black-background {background: #000000;} #burning { background: #402000; border-radius: 40px; box-shadow: /* */ inset #806040 0 0 10px 2px, /* -- */ #102030 0px 0px 20px 6px, #c8d8e0 0px -10px 17px 4px, #d8e8f0 0px -20px 15px -2px, #e0f0f8 0px -30px 14px -6px, #e8f8ff 0px -40px 12px -9px, #ffffff 0px -50px 10px -12px, #ffffe0 0px -55px 10px -14px, #ffffc0 0px -60px 10px -20px, #ffffa0 0px -62px 10px -22px, #ffff80 0px -64px 10px -24px, /* - */ #ffff40 0px 0px 15px 4px, #ffff30 0px -10px 13px 6px, #ffff20 0px -20px 12px 8px, #ffff10 0px -30px 11px 6px, #ffff00 0px -40px 10px 4px, #fff000 0px -50px 10px 2px, #ffe000 0px -60px 10px 0px, #ffd000 0px -70px 10px -4px, #ffc000 0px -80px 10px -6px, #ffa000 0px -90px 10px -10px, #ff8000 0px -100px 10px -14px, #ff6000 0px -110px 10px -16px, #ff4000 0px -120px 10px -20px, #ff2000 0px -124px 10px -22px, #ff0000 0px -127px 10px -24px; height: 60px; margin: 125px 35px 30px 35px; width: 60px; }
UPD： IE9 PP4から親切に提供されたスクリーンショットから 、新しいIEはかなり良いと言えます。
All Articles