[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ

コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。

borderプロパティを使ったシンプルなものから、グラデーションや疑似要素やアニメーションを使ったアイデアが素晴らしいものまで、コピペで簡単に利用できます。

デモのキャプチャ

まずは、繊細なレース柄を実装するテクニック。
区切り線としても、デザインのアクセントとしてもいいですね。

デモのキャプチャ

Lace Patterns in CSS

必要なHTMLはすべてdiv要素一つ、グラデーションを使用して美しいレースをデザインします。カラーを変えてもいい感じです。
キャプチャは上から、7, 6, 4, 3, 2です。

デモのキャプチャ

CSS gradient zigzag hr

hr要素で実装したコンテンツ間の区切り線をジグザグにします。
※コンテンツの背景は分かりやすいように、インラインスタイルで記述されています。

デモのキャプチャ

Jagged border - top

同じdiv要素のコンテンツの区切りですが、こちらはdiv要素の背景としてジグザグが実装されています。

デモのキャプチャ

Pinked Border

最後のジグザグは、SVGを使った実装。

デモのアニメーション

Revealing line CSS animation

点線をアニメーションで実装するテクニック。コンテンツは自由に配置することができます。

デモのキャプチャ

Horizontal lines around centered content

見出しやテキスト、ボタンなどの両脇にラインを配置するテクニック。ラインは可変なので、テキスト量は自由に調整できます。

デモのキャプチャ

Transparent H1 Intersects Border

両脇だけでなく、両脇から伸びたラインでぐるっと囲むテクニック。空divが必要になりますが、これも実現可能です。

デモのキャプチャ

Gradient Borders

グラデーションは背景全体だけでなく、ボーダーに使用しても美しいデザインです。

デモのキャプチャ

Gradient Borders Mixin

グラデーションのボーダーはボタンに使用してもいいですね。フォーカスすると全体にグラデーションが適用されます。

デモのキャプチャ

18 Simple Styles for Horizontal Rules

最後はシンプルなデザインながら、使い勝手がよいhr要素のスタイルを18個。HTMLの各classはそれぞれ数字を記述してください。

デモのキャプチャ

18 Simple Styles for Horizontal Rules

デモのキャプチャ

18 Simple Styles for Horizontal Rules

top of page

©2017 coliss