PengNote

勉強した事や行った場所の感想を書くブログ

CSSで立体的に見せる区切り線を作る方法

前々から気になってて、どうやるのか分からなかったものの答えを発見したのでそのメモ。

その気になっていたものは、

Park’n Park web designer’s diaryさんの記事 Webデザインにおける、1pxへのこだわり を読んでいてふと思ったことなんですけど、この1pxのラインを立体的にする方法ってどうやるんだ‥.?と。

[css]border: 1px ridge #000;[/css]

とか

[css]border-style: 1px groove #000;[/css]

とかじゃなく、

隣接するラインを引いてそれで立体的に見せる方法です。

borderを二回指定した所で、下に書いた方が優先されるしなと。

見つけた方法としてはこうでした。

[css]border-top: 1px solid #ccc;

border-bottom: 1px solid #fff;[/css]

を指定するという方法で、疑問が晴れました。

実際に使ったものとしては、連続した section のclassに対して当てたのですが、(hrに当てればよかった…)

この場合、一番上と一番下に線がついてしまいます。

これは消したいと思いやってみた結果、

:first-child や :last-childで、border: none;を指定すると消せました。

ただのラインとはまた違った感じになり、いいかなーと思うので、また使ってみたいです。

【参考記事】

【CSS】hrをCSSでオシャレにスタイリングする方法 – KLUTCHE web design techniques

[CSS]hr要素をおしゃれにスタイリングする8つのテクニック – コリス