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;を指定すると消せました。
ただのラインとはまた違った感じになり、いいかなーと思うので、また使ってみたいです。
【参考記事】