By takai

平板でカクカクした、堅いページの印象にならないように、
見出しや章節の角を丸めるのはデザインの常套手段ですが、

画像で見出しを作るとしたら、Fireworksやらで角丸長方形を描いて、
場合によれば下の方をカットするとか、
章節の角丸となると、フタと底の部分をそれぞれカットして使うけど、

長方形の大きさで角丸の丸み具合っていうんですか、
結局目分量で調節して素材作らなあかんし、ことのほかメンドくさいですよね。

コーダーとしてはそんなデザインが回ってこないように密かに願ってたり。(-人-)

CSS3では、画像素材を作らずして角丸を描くことが可能になります。
章節の四隅を角丸にすることも可能です。
ブラウザごとの識別子（ベンダープレフィックス）もあり、たくさん記述しなければいけませんが、
ネット上でCSS3が自動で生成される便利サイトやFirefoxの拡張機能（CSS3 Properties)などをつかって効率的にソース作成すれば、こと角丸に関しては画像素材作ってCSSを書くよりは楽チンです。

さらにドロップシャドウも記述できます。
薄っぺらい画像素材作ってX軸やY軸方向にリピートさせる必要もない。
ましてや四隅角丸の章節にドロップシャドウで、左右外側の陰影具合と合わなくて苦戦するなんてこともありません。

/* 上部が角丸になった見出しを描く */

#sample_01 h2{
width: 350px;
padding: 10px;
background: #69F;
color: #FFFFFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
}

/* 章節の四隅が角丸 */

#sample_02{
width: 350px;
border-radius: 8px;
-webkit-border-radius: 8px;
border: solid 1px #555555;
behavior: url(PIE.htc9);
}

#sample_02 h2{
padding: 10px;
background: #555555;
color: #FFFFFF;
-webkit-border-top-right-radius: 6px; ← 　内側の見出しは少し半径を小さく（border 1pxに対して-2px）
-webkit-border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}

#sample_02 p{
padding: 10px;
}

#sample_03{
width: 350px;
border-radius: 8px;
-webkit-border-radius: 8px;
border: solid 1px #699;
-webkit-box-shadow: 1px 2px 2px 3px #CCCCCC;
-moz-box-shadow: 1px 2px 2px 3px #CCCCCC;
box-shadow: 1px 2px 2px 3px #CCCCCC;
}

/* 章節の四隅が角丸 かつドロップシャドウ */

#sample_03 h2{
padding: 10px;
background: #699;
color: #FFFFFF;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
behavior: url(PIE.htc9);
}

#sample_03 p{
padding: 10px;
}

>> Demo

By takai

CSS3ではこれまで1つしか使えなかった背景画像が複数重ねて使えるようになります。

ということで、すずめのアニメーションGIFを背景で繰り返したり、座標配置してみました。

url（画像）は一番上から順に、カンマで並べます。

#sample_01{
width: 300px;
height: 220px;
padding: 10px;
background-color: #6C9;
background-image: url(../images/suzume3.gif), url(../images/suzume2.gif), url(../images/suzume.gif);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 40% 85%,50% 70%,40% 50%;
}

↓ これは現在、IE9～でしか、できません。

#sample_02{
width: 500px;
height: 250px;
padding: 10px;
background-color: #9C9;
background-image: url(../images/suzume3.gif), url(../images/suzume2.gif), url(../images/suzume.gif);
background-repeat: no-repeat;
background-position: 90px 80px,
left 120px bottom 40px,
right top;
}

>> Demo