読者です 読者をやめる 読者になる 読者になる

【STEP4】影を付ける方法

今日学んだこと

今日はボックスに影を付ける方法を学んだ。影を付けることで、デザインに立体感や高級感が増すということもあると思うので、しっかりと覚えておきたい。

今回も引き続き、以下の本を進めていく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

影のつけ方

前回、記事のスタイルシートに

 /*記事*/
article {background-color: 記事背景の色の値;
width: 幅の広さ;
margin-left: auto;
margin-right: auto;
border: solid 線の太さの数値px 色の値}

と記述することで、記事を実線(solid)で囲むことができると学んだ。今回はその下に「box-shadow」という要素を記述することで、影を付けていく。

影の要素の記述の仕方は

box-shadow: 横のズレ数値px  縦のズレ数値px  影のぼかし数値px 色の値

となる。

ズレ数値の数が大きいほど、元のボックスと影のズレが大きい(つまり影の存在感が大きい)。

影のぼかし数値は、数が大きければ大きいほど、影がぼやけるということである。色の値は、とりあえずgrayと指定して、灰色にした。

影の位置を反対にするとき

デフォルトだと、影は左上方向から光が当たっているように付く(つまり右と下に影がつく)。この影の位置を逆にしたいときは、ズレ数値に-(マイナス)をつける。

例えば、

box-shadow: 10px  10px  15px gray;

となっていたものを

box-shadow: -10px  -10px  15px gray;

にすれば、右下から光があたっているように影がつく(つまり左と上に 影がつく)。

ちなみに古いバージョンでも影を表示する可能性があるので「-webkit-」という記述を足した同じものを並べておくといいらしい。

box-shadow: -10px  -10px  15px gray;

だけではなく

-webkit-box-shadow: -10px  -10px  15px gray;

box-shadow: -10px  -10px  15px gray;

ということである。

今日のまとめ

影を付けるというのは、「box-shadow」という記述で、簡単に行うことができる。その後ろには順に、影のずれ(横、縦)を数値化し、ボケの度合いを指定して、色を指定すればよい。

影のぼかし方にも工夫の仕方はあるように感じるので、今後練習していきたい。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック