Sponsored Link
CSS 影をつける
テキストに影をつける
text-shadow: 横方向 縦方向 ぼかし 影の色;
Ex.1)右下に影をつける
.list2 ul li a {
text-shadow: 5px 5px 2px #00f;
display: block;
padding: 0 50px;
}
Ex.2)右下と左上に影をつける
.list2 ul li a {
text-shadow: 10px 10px 2px #00f,-5px -5px 1px #0f0;/* カンマ(,)区切りで設定 */
display: block;
padding: 0 50px;
}
Ex.3)RGBa形式で影をつける
.list2 ul li a {
text-shadow: 10px 100px 2px rgba(0,0,0,0.5);/* 黒のopacity0.5で設定 */
display: block;
padding: 0 50px;
}
※ポイント※
- 横は正の数だと右へ、負の数だと左へいきます
- 縦は正の数だと下へ、負の数だと上へいきます
- 影のぼかしは自然数しか設定出来ません。0は原型（ぼかしなし）です。
- カンマ区切り(,)で、複数の影も設定出来ます。（Ex.2）
- 色をrgbaで設定できます。opacity的な感じで便利かも。（Ex.3）
ボックスに影をつける
box-shadow: 横方向 縦方向 [ぼかし] [広がり] [影の色] [影の向き];
[]内は任意
基本的にはtext-shadowと同様に
横は正の数だと右へ、負の数だと左へ
縦は正の数だと下へ、負の数だと上へ
いきます。
影の色も同様にRGBa形式でも指定が出来ます。
捉え方としては、ボックスの中に同じ大きさのボックス(影ボックス)がぴったりくっついてるイメージです。
影をぼかさない
■単一方向■
Ex.1)上
.list2 ul li {
box-shadow: 0px -5px 0px 0px #000;/* 上へ5px */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
Ex.2)右
.list2 ul li {
box-shadow: 5px 0px 0px 0px #000;/* 右へ5px */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
Ex.3)下
.list2 ul li {
box-shadow: 0px 5px 0px 0px #000;/* 下へ5px */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
Ex.4)左
.list2 ul li {
box-shadow: -5px 0px 0px 0px #000;/* 左へ5px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
■二方向■
Ex.1)右上
.list2 ul li {
box-shadow: 5px -5px 0px 0px #000;/* 右上へ5pxずつ動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
Ex.2)右下
.list2 ul li {
box-shadow: 5px 5px 0px 0px #000;/* 右下へ5px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
Ex.3)左上
.list2 ul li {
box-shadow: -5px -5px 0px 0px #000;/* 下へ5px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
Ex.4)左下
.list2 ul li {
box-shadow: -5px 5px 0px 0px #000;/* 左へ5px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
■全方向■
Ex)上下左右
.list2 ul li {
box-shadow: 0px 0px 0px 5px #000;/* 影ボックスが5px広がります */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
影をぼかす
基本的な使い方は同じです。
応用的な感じで使ってみましょう。
Ex.1)下の影をぼかす
.list2 ul li {
box-shadow: 0px 5px 20px 0px #000;/* 20pxぼかします */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
上記の例を見ますと、下以外にも影が出てしまっているのが分かります。
下だけに影を表示させる場合は、下記のように「広がり」を設定します。
Ex.2)下の影だけを表示する
.list2 ul li {
box-shadow: 0px 5px 20px -5px #000;/* 下へ5px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
いい感じに下の影だけ出るようになりました。
大よその目安としては、移動させたpx分「広がり」をマイナスさせるといいと思います。
何パターンか試してみます。
Ex.3)右の影だけを表示する
.list2 ul li {
box-shadow: 10px 0px 20px -10px #000;/* 右へ10px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
Ex.4)上の影だけを表示する
.list2 ul li {
box-shadow: 0px -20px 20px -20px #000;/* 上へ20px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
二方向でも対応出来ます。
Ex.5)右下の影だけを表示する
.list2 ul li {
box-shadow: 10px 10px 20px -10px #000;/* 右下へ10px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
ちなみに、移動させたpx分「広がり」をマイナスしなくても大丈夫です。
あくまでも目安ですので、いい感じのところを探して設定してみて下さい。
Ex.6)下の影だけを表示する（広がりの値を変える）
.list2 ul li {
box-shadow: 0px 20px 20px -10px #000;/* 下へ5px動きます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
内部に影を入れる
今までボックスの外部に影を設定してきましたが、内部に影を設定する事が出来ます。
inset をつけると内部に影がつきます。
注意点としては、影のつく場所が逆になります。
横は正の数だと左へ、負の数だと右へ
縦は正の数だと上へ、負の数だと下へ
影がつきます。
単純に逆になると覚えてもいいですが、私的にはどっちが右どっちが左なのか分からなくなるので、
insetにすると影ボックスが動くのではなく、ボックスが動くイメージで覚えてます。
box-shadow: 5px 5px 0px 0px #000 inset;
の場合、ボックスが右に5px、下に5px動くという感じです。
Ex.1)左上に影をつくる
.list2 ul li {
box-shadow: 5px 5px 0px 0px #000 inset;/* 左上5pxの影が内部につきます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
広がりについては、イメージ通りで単純に内側に影が付きます。
Ex.2)全方向に影をつくる
.list2 ul li {
box-shadow: 0px 0px 0px 5px #000 inset;/* 全方向5pxの影が内部につきます */
display: inline-block;
background-color: #f00;
margin: 10px; /* 隙間が必要な場合はmarginを設定 */
padding: 10px 0; /* liの高さを変えたい場合はこのpaddingを設定 */
}
その他、ぼかしについては前項で記載した通りに動くと考えてもらえたらいいと思います。