[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ | コリス

2015/12/11 335 users コリス CSS テクニック スタイルシート コンテンツ

<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted ... 続きを読む

hr要素のデザインサンプル 12 | NxWorld

2013/09/12 698 users 罫線 備忘録 NxWorld 見栄え CSS

hr要素は罫線を表示させるもので、話題を変える時の目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 以下で紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません... 続きを読む

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

2011/11/23 613 users コリス background border CSS テクニック

デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; ba... 続きを読む