立体感のある水平線をCSSだけで実現する方法
- June 8th, 2011
- Posted in HTML5/CSS3
- Write comment
おっと、こいつは便利かも。小技として覚えておきたいです。
えと、あれですね、立体感のある水平線をつくる方法です。
↑ こういうの。
これ、細かくみると線と影が描き込まれていて、今までは画像で表現するしかありませんでしたが・・・BorderとBox-Shadowで実現できるようです。
<h1>Two-Toned Border with CSS3</h1>
<style>
h1 {
border-bottom: 1px solid #025;
-webkit-box-shadow: 0 1px 0 #fcfcfc;
-moz-box-shadow: 0 1px 0 #fcfcfc;
box-shadow: 0 1px 0 #fcfcfc;
}
</style>
Box-shawdowというのが盲点でしたね・・・な〜るほど。ちなみに原文には上下にそういう水平線をつくる方法も紹介されていますよ。興味がある方は是非どうぞ。
» Two-Tone Borders with CSS3 | daverupert.com
ちなみにBox-shadow技ではこちらのサイトも参考にしたいところです。ページ全体に影つけるってかっこいい。
» [CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス
あと最近話題になった「1pxの妙」についてはこちらも参考にしたいところです。
» Webデザインにおける、1pxへのこだわり « PARKN' PARK
No comments yet.