[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
Post on:2014年12月2日
sponsors
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。
かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
div一つだけ使って、ボーダーを落書き風にしたかわいい囲いを作ります。
枠線から背景をずらして、ゆる〜い感じのボタンを作成します。
box-shadowを使って、三連リングのような美しい囲いを作ります。
かわいいもこもこの囲いを画像無しで作ります。
div要素だけで、シャドウを加えたギザギザのかわいいボーダーを作ります。
画像を使用せずに、p, divなど一つだけでギザギザのラインを作成します。
Sections with alternating backgrounds using <hr>
複数のセクションが配置された区切りにhr要素を使い、セクションごとに背景を変更します。
OS X Yosemiteのように背景が透ける美しいパネルを作ります。
レスポンシブ対応の対角線を用いた半透明のパネルを作成します。
紙の罫線を画像無しで描きます。
div要素の下辺だけにbox-shadowでかっこいいシャドウをつけます。
スクロールすると斜めに上がってくるレインボーの帯を描きます。
テキストの左右に、水平ラインを天地中央にすぅーっと引きます。
div一つで実装した矩形の片方だけ紙を折り曲げたようにします。
角丸を裏返して囲いを作ります。
テキストの天地に、美しいグラデーションのボーダーと背景を作成します。
最後はdiv一丁でパンツの囲い！ ゴムのとこに名前を入れることができます♪
sponsors
