́ω`*)今回もCSSで装飾するよ!前回→【CSS3】で写真に色々装飾を加えてみた(枠・写真加工編)【IE9以前は非推奨】さて、今回はbox-shadowを使って色々作ってみようと思います。box-shadowが実装されて、今までわざわざ画像にしたり、どこできったらいいのかわからなかったり、予定より画像がでかくなってこまっていたあのドロップシャドウをCSSで表現できるようになりました。これで画像の量も減るし、楽になりますね!前回でも少し使用しましたが、今回は影の形を変えることで写真などの浮き表現を変えたりしていきます。記述がすこし面倒ですが、サムネイルなどに使う場合一つ作ってしまえば増えても増えても同じ効果をつけれるので便利です。今回も前回と同じ写真をつかいます。前回と同様に可変仕様にして、今回widthを半分にして小さくし、枠も付けてあげます。/></p>それでは、基本の影をつけてみますbox-shadowを使うbox-shadowの使い方をおさらいしておきます。※現在最新のモダンブラウザはベンダープレフィックスいらなくなってますでは、実際につけてみます。/></p>こんなかんじで四方に影を落とすことができます。「,」カンマを使うことで、いくつも重ねてつかえます。ボタンを作るときなどによく重ねて使います。(imgがあると内側の影が見えないのでDIVでボタンっぽいのをつくってみます。insetは内側に影を付けたいときに使います。shadow04"></div>少しそれましたが、これでbox-shadowの基本は終わりです。これを駆使してシャドウやハイライトを表現していきます。それでは本題のすこし変わった影を作っていきます。:afterを使います。定番の左右に影をつけて、浮いたように見せるあれです。/></p>よく見るやつですね♪これを作れるようになれば、あとは全部応用です。左だけ右だけもbeforeだけにして、右だけの場合はafterのpositionとtransformをbeforeに移すだけです。他にも意外とつくろうと思えばいくらでも作れたりします。box-shadowはborderとしても使えます。普通のborderよりもbox-shadowで作ったほうが雰囲気よかったりもするので使ってみるのも良いかと思います。今回は影として使いましたが、光彩としてもつかえます。工夫次第でいろんな表現が可能ですね。それでは!良きコーディングライフを~(・ω<)ノシこの記事を読んだ人はこんな記事も読んでいますCSSの【float】についてちょっと本気出して説明してみた。CSSの【float】についてちょっと本気出して説明してみた。しこのブログはWebコンテンツ総合製作の「ふたっぱ!」が運営しています。