Akrosブログ

BLOG

【初級者向け】検証して学ぶbox-shadow ーCSS解説シリーズ1ー

今回はCSSをなんとなくやったことあるよ!という方、
box-shadowのオプションってどれがなんだっけとなりがちな方向けに
box-shadowについて解説します。

box-shadowとは?

ブロック要素に影をつけるCSSプロパティです。
立体的なボタンを作りたいという場合に使用することが多いです。

「画像」

box-shadowプロパティの使い方

box-shadowは

box-shadow:左右の距離 上下の距離 ぼかし 拡散 色;

と数値を4つと色を指定します。

例としてdiv要素にbox-shadowを適用します。

html

<div>これはブロック要素です。</div>
box-shadow: 10px 10px 10px 0px #5bc0de;
これはブロック要素です。

↑の例ですと、わかりにくいので、横幅(width)と背景色(background-color)をつけてみます。

css

width:250px;
background-color:#eeeeee;
box-shadow: 10px 10px 10px 0px #5bc0de;
これはブロック要素です。

と、簡単に影をつけることができます。

 

box-shadowの数値をいじって検証してみる

それぞれ指定できる数値を使って遊んでみます。

 

左右方向の場合

1番目数値は左右方向です。
他の数値を0にして、1番目だけ数値を入れてみます。

width:250px;
background-color:#eeeeee;
box-shadow: 20px 0px 0px 0px #5bc0de;
これはブロック要素です。

右方向に指定した長さ分ずれます。
数値はマイナス指定もでき、左側にずれていきます。

 

上下方向の場合

2番目数値は上下方向です。
他の数値を0にして、2番目だけ数値を入れてみます。

width:250px;
background-color:#eeeeee;
box-shadow: 0px 20px 0px 0px #5bc0de;
これはブロック要素です。
下方向に指定した長さ分ずれます。
数値はマイナス指定もでき、上側にずれていきます。

ぼかしについて

3番目数値はどのくらいぼかすかで、
0以上の数字を指定する必要があります。
今回は1~3番目まで20pxを指定してみます。

width:250px;
background-color:#eeeeee;
box-shadow: 20px 20px 20px 0px #5bc0de;
これはブロック要素です。

拡散について

4番目の数値は影をどの程度広げるかを指定することができます。
注意点としては、上下左右に広がりますので、影が上からはみ出してしまうなんてことがありますので、
しっかり確認しましょう。
3番目のぼかしを0にして、4番目の拡散を20px指定してみます。

width:250px;
background-color:#eeeeee;
box-shadow: 10px 10px 0px 10px #5bc0de;
これはブロック要素です。
影が指定した長さ分大きくなりました。

何度も繰り返してみる

繰り返し使って影を複数つけることもできます。
わかりやすいように色を変えて検証。

width:250px;
background-color:#eeeeee;
box-shadow: 10px 10px 0px 0px #5bc0de,
10px 10px 0px 0px #5bc0de,
10px 10px 0px 0px #5bc0de;
これはブロック要素です。

box-shadowを使って簡単に図形を書いてみる

簡単に入れ込むことができるbox-shadowを使用したテクニックを紹介します。

html

<span class="square"></span>

css

.square{
display: block;
width: 15px;
height: 15px;
background-color: #0098a6;
box-shadow: #fff 3px 3px,
#0098a6 3px 3px 0 0.5px
}

すると↓のように簡単にコーポレート系のサイトで入れこむことができる図形を描くことができます。

あとは入れ込みたいところへ、positionやpadding等で調整すれば応用が利きますので是非使ってみてください。

 

 

終わりに

box-shadowについて一つ一つ検証しながら進めてみました。
少しでもご参考にしていただけますと幸いです。

 

プロのデザイナーからテクニックを学びたいという方、まずは無料のカウンセリングでご相談ください。
もっと高度な技を学ぶこともできますよ!

<p align=”center”><a class=”btn-orange btn-3d” href=”https://akros-ac.jp/course/”>無料カウンセリングで相談する</a></p>


CONTACT

お問合せ

体験お申込み・資料請求・ご質問・
ご相談はこちらから

受付専用フリーダイヤル

フリーダイヤル 0120-941-071

受付時間:10:00〜18:00 (土日祝定休)