HR いろいろ

©naocraft 2012
    hr  {
        border-bottom: solid 1px #f77; 
        box-shadow: 0 5px 10px #f00; 
    }

box-shadow に対応するブラウザは Opera、Firefox、IE9 など。 未対応のブラウザでは1本のボーダーが見えるだけ。

©naocraft 2012
    hr  {
        height: 20px; 
        border-top: solid 1px #f77; 
        background: #FFDFDF; 
        box-shadow:0 -7px 12px #fff inset; 
    }

IE8や旧ブラウザにも多少はCSSの効果がでるよう考えてみた。 未対応ブラウザではボーダーと背景色が見えるだけだが 対応ブラウザでは下の内側ボカシ(inset)が反映される。

©naocraft 2012
    hr  {
        border-top: solid 1px #0065CA; 
        box-shadow:0 5px 8px #007BF7;
    }
    hr  {
        border-top: solid 1px #0065CA; 
        box-shadow:0 -5px 8px #f00;
    }

未対応のブラウザでは上下のボーダーが見えるだけ。 これではブロック要素の上下にボーダーを付けるのと変わりない。

©naocraft 2012
    hr  {
        height: 10px; 
        border-top: solid 1px #0065CA; 
        border-bottom: solid 1px #fff;
        background: #CEE7FF; 
        box-shadow: 0 -1px 6px #fff inset; 
    }
    hr  {
        height:  9px;
        border-bottom: solid 1px #0065CA; 
        background: #FFDFDF; 
        box-shadow: 0 1px 6px #fff inset; 
    }

上のHRでは上と下(白)のボーダーと背景色が見え 下のHRでは下のボーダーと背景色が見える。 box-shadow 対応であれば、上のHRでは底部のボカシ。 下のHRでは上部のボカシが有効になる。

©naocraft 2012
        address {
        height:21px; 
        border-top: solid 1px #0065CA;
        border-bottom: solid 1px #0065CA; 
        background: #FFFFEC;
        box-shadow: 
               0 15px 15px -15px #A4D1FF inset, 
               0 -15px 15px -15px #FFB3B3 inset;
        }

アドレス要素に上下のボーダーと背景色を指定してみる。 対応ブラウザであれば背景色とボカシの混じり具合を楽しめる。 HRでやっても構わないんですが(^^;

©naocraft 2012
    hr  {
        height: 25px; 
        border-top: solid 1px #ff4000; 
        border-bottom: solid 1px #00c4c4;
        background: url(hr_background.png);
     }

上の例と同様の書き方ですが、未対応ブラウザでは色の多彩さが分からない。 そこで背景色部分を画像化してHRの背景画像にしてみる(^^; 今回の趣旨には沿わないが、HTMLに直接イメージを置かないので それなりにアクセシブルかなと(^^;

©naocraft 2012
    div {
        height: 16px;
        border-top: solid 4px #FFC0C0;
        border-bottom: solid 4px #B3D9FF;
      }
    hr  {
        border-top:solid 4px #FFDDDD; 
        border-bottom:solid 4px #FFFF80;
      }
    hr {
        border-top:solid 4px #C0FFC0;
        border-bottom:solid 4px #EBD7FF;
      }

DIV要素内にHR2つとアドレスを置いたもの。 それぞれのボーダーに色を付け6色を組み合わせている。 box-shadow を使わないのでブラウザを問わず表示されるはず。

©naocraft 2012
    div {
        height: 7px;
        border-top: 7px dotted #FFC0C0; 
        border-bottom: 7px dotted #FFC0C0;
        background: #FFE0E0; 
        }
    hr {
        border-bottom: 7px dotted #FFE0E0; 
        background: #FFC0C0;
        }

これも box-shadow を使わないのでブラウザを問わないが ブラウザによっては微妙に表示に差異が生じるようです。 HRを故意にずらして幾何学模様のようにも出来そう。 特にFirefoxでは右へとずれるが実用上困らないと思う。

©naocraft 2012, CSS!, XHTML 1.0 Strict, HTML-lint!
    hr { 
        height: 26px;
        background: #00C000; 
        border-left: double 400px #00FF00; 
        border-right: double 400px #00FF00;
        }

左右のボーダーを無理矢理広げてみる(^^; ブラウザーを問わないので使えるかも。 

    hr { 
        height     : 3px; 
        background : #76C910;
        border-top : dotted 3px #fff; 
        border-bottom: dotted 3px #fff; 
        }

HR 1コでこれだけ遊べる(^^; 

    hr { 
        height     : 2px; 
        background : #1188FF;
        border-top : dashed 1px #fff; 
        border-bottom: dashed 1px #fff; 
        }

いやいや、遊べるわあ(^^;

box-shadow 対応ブラウザ用の「HR いろいろ」はこちら
Indexに戻る
©naocraft 2012, CSS!, XHTML 1.0 Strict, HTML-lint!,