エフェクト
box-shadow
影を指定します
value | description |
---|---|
5px -5px 20px rgba(147, 150, 173, 0.81) | x 方向のずれ、y 方向のずれ、ぼかしの強さ、影の色を指定する |
5px -5px 20px 5px rgba(147, 150, 173, 0.81) | x 方向のずれ、y 方向のずれ、ぼかしの強さ、拡張距離、影の色を指定する |
-30px 15px 0px 0px #AFCCAF, 5px -5px 12px 2px rgba(209, 56, 29, 0.81) | 複数の影を指定する |
none (default) | 影を表示しない |
Demo
y: -5px
ぼかし: 3px
color: #bcbcbc
y: -5px
ぼかし: 10px
色: #bcbcbc
y: -5px
ぼかし: 0px
拡大: 1px
色: #8d8d8d
y: -5px
ぼかし: 3px
拡大: 1px
色: #9edbb3
y: 5px
ぼかし: 3px
拡大: 1px
色: #dba19e
x: 5px
y: -5px
ぼかし: 3px
色: #dedede
x: 0
y: 0
ぼかし: 0
拡大: 2px
色: #5a6ff9
<div class="wrapper">
<div class="box box-1">
x: 5px<br />
y: -5px<br />
ぼかし: 3px<br />
<br />
color: #bcbcbc
</div>
<div class="box box-2">
x: 5px<br />
y: -5px<br />
ぼかし: 10px<br />
<br />
色: #bcbcbc
</div>
<div class="box box-3">
x: 7px<br />
y: -5px<br />
ぼかし: 0px<br />
拡大: 1px<br />
色: #8d8d8d
</div>
<div class="box box-4">
<div>
x: 5px<br />
y: -5px<br />
ぼかし: 3px<br />
拡大: 1px<br />
色: #9edbb3
</div>
<div>
x: -5px<br />
y: 5px<br />
ぼかし: 3px<br />
拡大: 1px<br />
色: #dba19e
</div>
</div>
<div class="box box-5">
inset<br />
x: 5px<br />
y: -5px<br />
ぼかし: 3px<br />
<br />
色: #dedede
</div>
<div class="box box-6">
<br />
x: 0<br />
y: 0<br />
ぼかし: 0<br />
拡大: 2px<br />
色: #5a6ff9
</div>
</div>
.box-1 {
box-shadow: 5px -5px 3px #bcbcbc;
}
.box-2 {
box-shadow: 5px -5px 10px #bcbcbc;
}
.box-3 {
box-shadow: 7px -5px 0px 1px #8d8d8d;
}
.box-4 {
box-shadow: 5px -5px 3px #9edbb3, -5px 5px 3px #dba19e;
}
.box-5 {
box-shadow: inset 5px -5px 3px #dedede;
}
.box-6 {
box-shadow: 0 0 0 2px #5a6ff9;
}
.box {
width: 100%;
height: 120px;
border: 1px solid rgb(188, 188, 188);
color: #333333;
font-size: 12px;
padding: 4px;
display: flex;
justify-content: space-between;
}
.wrapper {
display: grid;
gap: 24px;
grid-template-columns: repeat(4, 1fr);
}
概要
影を指定します。
box-shadow
にはわかりづらいパラメータが多く、さらに複数の影を重ねる場合も多いため非常にややこしいです。
ボックスの影作成ツールなどで実際にパラメータをいじってみると直感的に理解できるでしょう。
なお、実際のアプリケーションでは、同じパラメータを使い回すことがほとんどです。そのため、影の生成はツールに頼るのも一つの手です。
value | description |
---|---|
offset-x (1 つ目の値) | 影を x 軸方向へずらす距離 |
offset-y (2 つ目の値) | 影を y 軸方向へずらす距離 |
blur-radius (3 つ目の値) | 影のぼかし度合い(省略可) |
spread-radius (4 つ目の値) | 影を拡大する距離(blur-radius も同時に指定する必要あり、省略可) |
color (5 つ目の値) | 影の色 |
inset | inset を指定することで、影を内側に落とすことができる |
パラメータ
offset-x
影の x 軸方向への移動距離を指定します。
offset-y
影の y 軸方向への移動距離を指定します。
blur-radius
影の y 軸方向への移動距離を指定します。
spread-radius
影の拡大度合いを指定します。
color
影の色を指定します。
inset
影の向きを変更します
応用
複数の影を重ね合わせる
5px 5px 3px #bcbcbc
のようなパラメータを、カンマ区切りで複数指定することで、影を重ね合わせることができます。
重ね合わせるケースってあるの?と思ってしまいますが、意外なことに、違和感のない表現をするために複数の影を重ねる場合があります。 以下の 2 つは複数の影を重ね合わせている例ですが、どちらも自然な表現になっていると思います。
アウトラインをbox-shadow
で再現する
outline
は、アウトラインを指定するプロパティで、フォーカス時のデザインによく用いられます。
例えば以下のフォームをクリックしてみてください。
青い枠線が表示されたと思います(環境によっては色が異なるかもしれません)。これがoutline
で、ブラウザデフォルトの挙動として指定されています。
このoutline
ですが、一つ厄介な点があります。それは、一部のブラウザ(iOS Safari など)では、border-radius
が適用されないのです。
以下は iOS Safari での見た目です。アウトラインが角張った長方形で表示されており、良いデザインとは言えません。
そこでbox-shadow
を用いてoutline
のような表現を行うテクニックを用いる場合があります。
outline
とほぼ同様のデザインを実現することができます。
<div class="wrapper">
<input type="text" class="input" placeholder="outline" />
<input type="text" class="input input-shadow" placeholder="box-shadow" />
</div>
.input-shadow:focus {
/* アウトラインを非表示に */
outline: none;
/* 代わりにbox-shadowでアウトラインを表示 */
box-shadow: 0 0 0 2px #5a6ff9;
}
.input {
padding: 8px 20px;
border: 1px solid rgb(156, 163, 175);
background: rgb(71, 85, 105);
border-radius: 999px;
}
.input::placeholder {
color: rgb(209, 213, 219);
}
.wrapper {
display: flex;
justify-content: space-around;
}