立体感のある水平線をCSSだけで実現する方法

SPONSORED LINK

Pocket

おっと、こいつは便利かも。小技として覚えておきたいです。

えと、あれですね、立体感のある水平線をつくる方法です。

↑ こういうの。

これ、細かくみると線と影が描き込まれていて、今までは画像で表現するしかありませんでしたが・・・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

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.