on:2014年12月2日sponsorsdivやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。Exercisediv一つだけ使って、ボーダーを落書き風にしたかわいい囲いを作ります。freshboss.com枠線から背景をずらして、ゆる〜い感じのボタンを作成します。CSSbox-shadowを使って、三連リングのような美しい囲いを作ります。Seaかわいいもこもこの囲いを画像無しで作ります。Borderdiv要素だけで、シャドウを加えたギザギザのかわいいボーダーを作ります。divなど一つだけでギザギザのラインを作成します。<hr>複数のセクションが配置された区切りにhr要素を使い、セクションごとに背景を変更します。Yosemiteのように背景が透ける美しいパネルを作ります。funレスポンシブ対応の対角線を用いた半透明のパネルを作成します。Paper紙の罫線を画像無しで描きます。CSSdiv要素の下辺だけにbox-shadowでかっこいいシャドウをつけます。Rainbowスクロールすると斜めに上がってくるレインボーの帯を描きます。Linesテキストの左右に、水平ラインを天地中央にすぅーっと引きます。effectdiv一つで実装した矩形の片方だけ紙を折り曲げたようにします。better角丸を裏返して囲いを作ります。Bordersテキストの天地に、美しいグラデーションのボーダーと背景を作成します。Posts関連記事が見つかりませんでした。