2016年12月1日(木)

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

• 199
• 134
• 133
• 322

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

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

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

Lace Patterns in CSS

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

...