CSS Shadow：描画方法

暗闇がなければ、光はなく、影がない形はありません。女性のための主要なメイクアップツールでさえ、「影」と呼ばれています。サイトのページに美しさを持たせたい場合は、必要に応じてCSSシャドウを追加して、適切なアクセントを配置する必要があります。

以下の資料は、CSSを使用してブロックまたは画像の影を設定する方法を学習するのに役立ちます。

CSSシャドー。構文

実際はbox-shadowで、boxはブロック、shadowは影そのものです。

コードは中括弧で書かれています：

{ボックスシャドウ： 11px 22px 33px 44px ＃333333;}。

この文字列は、ブロックにピクセル半径の標準シャドウが与えられていることを示しています。データは次のように解読されます。

11px - X軸に沿ったブロックに対するシャドーシフト（正の値（20ピクセル）影が右に移動し、負（-37px）が左に移動します。
22ピクセル - 秒Y軸に沿ったブロックに対する相対的なシャドウイング（正の値（5px））は、シャドウを負にシフトさせます（-17px）。
33px - これはぼかしパラメータであり、数値が大きいほど効果は強くなります。
44ピクセル - 影の半径も正比例します。
＃333333 - 影が描かれる色です。

最後の3つのパラメータはオプションであり、行内で単に指定することはできません。つまり、{box-shadow： 10px 13px;}-そのような線はエラーではありません（影の色はブロック内のテキストの色と同じになります）。

したがって、あなたのページに影を作成するサイトは複雑さを表すものではありませんが、目に見える効果をいくつ作成することができます！すべての小さなディテール、あらゆる細部がデザインで重要なので、あなたの子供をよりユニークでユニークなものにしましょう。ここには特別なものはないようですが、はるかに興味深く魅力的です。

コードに応じて、ブロックのCSSシャドウがどのように見えるかの例を見てみましょう：

{box-shadow：25px 25px;} - オフセットが25ピクセルのCSSシャドウ。
{box-shadow：25px 25px 10px;} - 25ピクセルのオフセットと10ピクセルのぼかしを持つCSSシャドウ。
{ボックスシャドウ：25ピクセル25ピクセル10pxの5pxの;} - CSS - シャドウ、ぼかしが10個の画素をエッジと5つの画素の所定の半径軸25個のピクセルをオフセット
{ボックスシャドウ：25ピクセル25ピクセル10pxの5pxの＃1 9e9e9e;} - CSS-shadowがボケが10個のピクセル、5つの画素、色の半径を指定エッジ、軸25個のピクセルをオフセット。

影の効果

より美しく、エレガントで、元の影は異なる効果を持ちます。あなたは内側の影を作ることができます。このためには、パラメータの前にパラメータの前に "inset"を指定するだけで十分です。その後、パラメータの説明は通常通りになります：

{ボックスシャドウ：はめ込み4PX 2ピクセル＃9e9e9e計6Px;}。

絶対的に異なるパラメータを持つブロックの下にいくつかの影を置くことができます。コード内には影（シャドウ）がカンマでリストされています：

{ボックスシャドウ：-20px -10px 11px 15ピクセル＃800080、-50px -40px 5pxの10pxの＃daa520、20ピクセル10pxの11px 15ピクセル＃0700f9、40ピクセルは50px 5pxの10pxの＃ffa500}。

影の写真

サイト上のブロックに加えて、写真、写真、背景 - これらの要素もすべて影でもっと面白く見えます。グラフィックエディタで事前に画像を作成して、すでに影付きのページに挿入することができます。しかし、第一に、それは、第二に、画像の任意の操作が彼に追加され、理由はグラフィックスでの作業におけるスキルの不足のを含め、さまざまな理由で常に可能というわけではない「重量」、および、そのような画像だけでなく、ページのロードが遅くなる場合があります。この場合、CSSシャドーイメージを作成することができます。

この問題の最も簡単で最も構文的に正しい解決法は、あなたの写真である背景をブロックにすることです。次に、ブロックのために必要なシャドーを作成し、それらが画像の背景に表示されます。

.block1 {ボックスシャドー：インセット0 0 11px 9px＃9e9e9e;幅：480px;高さ：360px;背景：url（images / charlize_theron_2.jpg）0 0 no-repeat;}

この例では、ぼかしと半径を持つ軸に沿ったオフセットは、ブロックの色、高さ、幅を決定し、背景は画像に割り当てられました。その結果、私たちは内面の影を持つ画像を得ました。

同意すると、CSSコードの助けを借りて影を作成することは、非常に簡単で、同時に魅力的で、最も重要なのは、役に立つレッスンです。