CSS3を使ってボックスに影を付けて装飾する

  • このエントリーをはてなブックマークに追加
CSS3を使ってボックスに影をつけて装飾する

ボックスに影をつけるには

ボックスに影を付ける事で少し浮いたような表現をすることができます。
特にリンクボタンに付けると押し込める様に見えたり、他と差別化できるので目立たせることができます。

こういった影の事をドロップシャドウと言います。
影の付いている右側の方が「ボタン感」がありませんか?
ドロップシャドウは、リンクボタンの他にも写真や要素が重なるデザインをしている場合にも有効です。

影を付けようと思ったら画像文字にするか、背景に影を入れる事になりますよね。
でも文字が変更になったり、ボックスの横幅が変わると画像を作る作業が都度必要になるので、時間がかかってしまいます。
またリンクバナーに影を付けている場合、マウスカーソルを乗せた時に影を消そうと思うと影のある画像と無い画像を用意しなければなりません。
でもCSS3で使える「box-shadow」を使えば、CSSだけでボックスに影を付ける事ができるんです。

box-shadowを使って影を付ける

書き方は「box-shadow: (右への距離) (下への距離) (ぼかし具合) (影の色);」です。
右・下への距離は負の値([-]マイナス)も付けることができるので、左・上方向へ伸ばすこともできます。

影を実際に付けてみましょう

CSS
.box-shadow{
  box-shadow:3px 3px 2px #777;
}

要素の内側へ影を付ける

影の色の後ろに「半角スペース、inset」を付けると、ボックスの内側へ影がつきます。

内側へ影を付ける場合

CSS
.box-shadow{
  box-shadow:3px 3px 2px #777 inset;
}

既についている影を消すには

「box-shadow:none;」と書くことで影を消すことができます。

マウスカーソルを載せると影が消えます。

CSS
.box-shadow{
  box-shadow:3px 3px 2px #777;
}
.box-shadow:hover{
  box-shadow:none;
}

リンクボタンへ影を付けていて、:hoverの時に影を消すような処理をしたい場合はこの様に書いてあげると、マウスカーソルが乗った時に影を消すことができます。

まとめ

・ボックスに影を付ける事で浮いているように見えるので、他と差別化できる
・リンクボタンに使うと、浮き出て見えるので、押せるボタンの様に見える
・要素同士が重なり合うデザインをする場合にも効果的
・内側へ影を付けるには「inset」
・既についている影を消すには「none」

  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください