CSSで可変対応した角丸のボックスを作る その1

CSSで可変対応した角丸のボックスのサンプル

このような感じで角丸のボックスにテキストの内容が囲われているデザインパターンってよく見かけますし、実際に仕事でも使う機会が多いので分からない人やあやふやな人に参考になるようなサンプルを作ってみました。

今回は角丸のボックス内がグラデーションになっている場合のやり方を解説したいと思います。

Domo Page

…ここからが続き

デモページの解説

XHTML

<div class="column">
	<div class="inner">
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
	</div>
</div>

CSS

div.column	{
	width: 570px;
	background: url(image/bottom.jpg) no-repeat bottom;
	margin-bottom: 40px;
}

全体を包むdiv(.column)にボックスの左右と下に来る部分の画像を読ませる。

div.column .inner	{
	background: url(image/top.jpg) no-repeat;
	padding: 25px 20px;
}

その中にもう一つdivを用意し、このdiv(.inner)にボックスの上部に来る画像を読み込ませる。

CSSで可変対応した角丸のボックスのまとめ

読み込ませる画像を逆にした場合はデモページの下部のサンプルを参考にして下さい。

もしサンプルのように外枠にドロップシャドウがなくただの角丸なら、画像を使わずにCSSのみでも出来きなくはないのですが、個人的に無駄なHTMLは書きたくないので自分は絶対に画像を使ってやってます。
そもそもHTMLは文書構造を示すものですし、画像でやるのが普通だと思いますからね。

次回はもう一つ違うやり方を解説したいと思います。

Download

Domo Page

Track Back

nobuyoshi.

これ待ってました!

CSS Lectureさんのほうに 「CSSで可変対応した角丸のボックスを作る ...

by nobuyoshi.  

チバのブログ

CSSで縦が可変の角丸ボックスの作り方番外編

CSS Lectureの記事に完全に乗っかった形でCSSと背景画像で角丸の縦可変のボックスを作ってみました。

by チバのブログ  

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article