【CSS3】で写真に色々装飾を加えてみた（box-shadow編【IE9以前は非推奨】
：どうもおはこんばんちわ、トメィトゥが大好きなやのっぱです(´・ω・｀) リコピン♪リコピン♪(*´ω｀*) 今 [...]
どうもおはこんばんちわ、トメィトゥが大好きなやのっぱです(´・ω・｀)
リコピン♪リコピン♪(*´ω｀*)
今回もCSSで装飾するよ！
前回→【CSS3】で写真に色々装飾を加えてみた(枠・写真加工編)【IE9以前は非推奨】
さて、今回はbox-shadowを使って色々作ってみようと思います。
box-shadowが実装されて、今までわざわざ画像にしたり、どこできったらいいのかわからなかったり、予定より画像がでかくなってこまっていた
あのドロップシャドウをCSSで表現できるようになりました。
これで画像の量も減るし、楽になりますね！
前回でも少し使用しましたが、今回は影の形を変えることで写真などの浮き表現を変えたりしていきます。
記述がすこし面倒ですが、サムネイルなどに使う場合一つ作ってしまえば増えても増えても同じ効果をつけれるので便利です。
それでは、作っていきましょう！
下準備
今回も前回と同じ写真をつかいます。
前回と同様に可変仕様にして、今回widthを半分にして小さくし、枠も付けてあげます。。
<style>
.img01 {
width:250px;
margin:0 auto;
box-sizing:border-box;/* borderとpaddingをwidthに含める */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
}
.waku01{
padding:7px;
background:#fff;
border:1px solid #ccc;
}
.img01 img {
width:100%;
height:auto;
vertical-align:top;
}
</style>
<p class="img01 waku01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
それでは、基本の影をつけてみます
box-shadowを使う
box-shadowの使い方をおさらいしておきます。
例）
box-shadow:10px 10px 10px 10px rgba(0,0,0,0.2)
box-shadow:y方向のオフセット x方向のオフセット ぼかし 広がり 色
という感じです。※現在最新のモダンブラウザはベンダープレフィックスいらなくなってます
では、実際につけてみます。
<style>
.shadow01 {
box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);
}
</style>
<p class="img01 waku01 shadow01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
マイナスの値を与えることで逆などもできます
<style>
.shadow02 {
box-shadow:-2px -2px 4px 0 rgba(0,0,0,0.2);
}
</style>
<p class="img01 waku01 shadow02"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
<style>
.shadow03 {
box-shadow:2px -2px 4px 0 rgba(0,0,0,0.2);
}
</style>
<p class="img01 waku01 shadow03"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
こんなかんじで四方に影を落とすことができます。
「,」カンマを使うことで、いくつも重ねてつかえます。
例えば、ボタンを作るときなどによく重ねて使います。（imgがあると内側の影が見えないのでDIVでボタンっぽいのをつくってみます。）
<style>
.box1 {
width:200px;
height:40px;
margin:0 auto;
background:#209FFB;
}
.shadow04 {
box-shadow:inset -2px -2px 4px 0 rgba(0,0,0,0.2),inset 2px 2px 2px 0 rgba(255,255,255,1);
}/* insetは内側に影を付けたいときに使います。 */
</style>
<div class="box1 shadow04"></div>
少しそれましたが、これでbox-shadowの基本は終わりです。
これを駆使してシャドウやハイライトを表現していきます。
それでは本題のすこし変わった影を作っていきます。
擬似要素を使って色々な影を表現してみる
今回も擬似要素:before :afterを使います。
まずは、定番の左右に影をつけて、浮いたように見せるあれです。
<style>
.shadow05 {
position:relative;
}
.shadow05:before,
.shadow05:after {
content: "";
position: absolute;
bottom: 3px;
left: 3px;
z-index: -1;
width: 50%;
height: 5px;
box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.shadow05:after {
right:3px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
}
</style>
<p class="img01 waku01 shadow05"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
よく見るやつですね♪
これを作れるようになれば、あとは全部応用です。
左だけ右だけもbeforeだけにして、右だけの場合はafterのpositionとtransformをbeforeに移すだけです。
<style>
.shadow05_1 {
position:relative;
}
.shadow05_1:before {
content: "";
position: absolute;
bottom: 3px;
left: 3px;
z-index: -1;
width: 50%;
height: 5px;
box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
</style>
<p class="img01 waku01 shadow05_1"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
<style>
.shadow05_2 {
position:relative;
}
.shadow05_2:before {
content: "";
position: absolute;
bottom: 3px;
right: 3px;
z-index: -1;
width: 50%;
height: 5px;
box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
</style>
<p class="img01 waku01 shadow05_2"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
付箋などの表現にも使えそうですね(*´ω｀*)
縦方向にアーチしたような影
<style>
.shadow06 {
position: relative;
box-shadow: inset 0px 7px 16px -4px rgba(0,0,0,0.1),
inset 0 -7px 16px -4px rgba(0,0,0,0.1);
}
.shadow06:before,
.shadow06:after {
content: "";
position: absolute;
bottom: 17%;
left: 11px;
z-index: -1;
width: 4%;
height: 50%;
box-shadow: 1px 0px 10px 0 rgba(0,0,0,1);
-webkit-transform: skew(4deg,95deg);
-moz-transform: skew(4deg,95deg);
-ms-transform: skew(4deg,95deg);
transform: skew(4deg,95deg);
}
.shadow06:after {
right:14px;
left:auto;
}
</style>
<p class="img01 waku01 shadow06"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>
ちょっと雑ですが、このようなこともできます♪
他にも意外とつくろうと思えばいくらでも作れたりします。
基本は擬似要素を使うことですね。
擬似要素便利♪
最後にbox-shadowはborderとしても使えます。
普通のborderよりもbox-shadowで作ったほうが雰囲気よかったりもするので使ってみるのも良いかと思います。
すこしぼかしが効いてリッチな雰囲気とか出そうです♪
今回は影として使いましたが、光彩としてもつかえます。
工夫次第でいろんな表現が可能ですね。
是非、色々と試してみてください。
それでは！良きコーディングライフを～(・ω<)ﾉｼ