[CSS]素晴らしいテクニックが満載!囲いや区切りなどのラインを実装するスタイルシートのまとめ

divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。

かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。

デモのキャプチャ

Border Radius Exercise

div一つだけ使って、ボーダーを落書き風にしたかわいい囲いを作ります。

デモのキャプチャ

Inspired by freshboss.com

枠線から背景をずらして、ゆる〜い感じのボタンを作成します。

デモのキャプチャ

Ring CSS

box-shadowを使って、三連リングのような美しい囲いを作ります。

デモのキャプチャ

Thinking of Sea

かわいいもこもこの囲いを画像無しで作ります。

デモのキャプチャ

Jagged Border

div要素だけで、シャドウを加えたギザギザのかわいいボーダーを作ります。

デモのキャプチャ

CSS Jagged Border Generator

画像を使用せずに、p, divなど一つだけでギザギザのラインを作成します。

デモのキャプチャ

Sections with alternating backgrounds using <hr>

複数のセクションが配置された区切りにhr要素を使い、セクションごとに背景を変更します。

デモのキャプチャ

OS X Yosemite Style UI

OS X Yosemiteのように背景が透ける美しいパネルを作ります。

デモのキャプチャ

Border fun

レスポンシブ対応の対角線を用いた半透明のパネルを作成します。

デモのキャプチャ

Lined Paper

紙の罫線を画像無しで描きます。

デモのキャプチャ

Special box shadow with CSS

div要素の下辺だけにbox-shadowでかっこいいシャドウをつけます。

デモのキャプチャ

Rainbow

スクロールすると斜めに上がってくるレインボーの帯を描きます。

デモのキャプチャ

Heading Side Lines

テキストの左右に、水平ラインを天地中央にすぅーっと引きます。

デモのキャプチャ

Pure CSS folded-corner effect

div一つで実装した矩形の片方だけ紙を折り曲げたようにします。

デモのキャプチャ

Fail better

角丸を裏返して囲いを作ります。

デモのキャプチャ

Gradient Borders

テキストの天地に、美しいグラデーションのボーダーと背景を作成します。

デモのキャプチャ

Underpants

最後はdiv一丁でパンツの囲い! ゴムのとこに名前を入れることができます♪

top of page

©2016 coliss
o