CSS のみで画像を使わず border を2本引いて影っぽくするには :before 擬似要素を使うと便利

今回は CSS のみで以下の画像のような影付きの線を作ります。

以下のコードで実装できます。変更点は border の色の部分のみです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

header .menu {
    z-index: 10;
    position: relative;
    border-bottom: 1px #ff3700 solid;
}
header .menu:before {
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    border-bottom: 1px #d32f02 solid;
}

:before 擬似要素は IE8 移行からしか対応していなかった覚えがありますので、IE6 IE7 に対応する場合は使えません。ただ、最近 IE6 を飛び越えて IE8 利用者が増えていますので、そろそろ導入してしまっても良い頃かもしれません。CSS3 じゃないとできないと思っていましたが、そうでもなくて良かったです。

以下のページが参考になりました。

関連記事

コメント

コメントは受け付けていません。