CSS3でborderに影をつけるたような効果を与える方法

css3

IDEA*IDEAで紹介されてた『立体感のある水平線をCSSだけで実現する方法』というCSS3テクニックです。borderに影をつけたい時ってありますね。ざくっと紹介します。

borderに影をつける方法

cssのborderとBox-Shadowで実現が可能とのこと。早速やってみます。

こんな感じでどうですか?

HTML部

<div class="border_sh">こんな感じでどうですか?</div>

CSS部

   .border_sh {

    border-bottom: 1px solid #4C678F;

    -webkit-box-shadow: 0 1px 0 #C1D6EC;

    -moz-box-shadow: 0 1px 0 #C1D6EC;

    box-shadow: 0 1px 0 #C1D6EC;

  }

一言

といった感じです!なかなか使えそうです。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/css/176/trackback/