CSSだけで角丸の枠を作ってみる

admin — Tue, 19 Dec 2006 19:52:28 +0000

最近では、web2.0っちゅう言葉は一般的になってきておりますが、web2.0的なデザインの代表としては、やっぱり、角丸の枠デザインでしょうねぇ。。

わたくしが、デザインする時はたいていphotoshopでさくっと、角丸の画像を描いてしまいますが。。。

CSSだけで簡単に角丸の枠が作れたら、それはそれで、楽ですよねぇ。。。

っちゅうわけで、サンプルのCSSは。。。↓こちら。

<br />
.roundcorner_box{<br />
display:block;<br />
}<br />
.roundcorner_box *{<br />
display:block;<br />
height:1px;<br />
overflow:hidden;<br />
background:#99cc33;<br />
}<br />
.roundcorner_box1{<br />
border-right:1px solid #d3e9a7;<br />
padding-right:1px;<br />
margin-right:3px;<br />
border-left:1px solid #d3e9a7;<br />
padding-left:1px;<br />
margin-left:3px;<br />
background:#b2d866;<br />
}<br />
.roundcorner_box2{<br />
border-right:1px solid #f4f9ea;<br />
border-left:1px solid #f4f9ea;<br />
padding:0px 1px;<br />
background:#acd559;<br />
margin:0px 1px;<br />
}<br />
.roundcorner_box3{<br />
border-right:1px solid #acd559;<br />
border-left:1px solid #acd559;<br />
margin:0px 1px;<br />
}<br />
.roundcorner_box4{<br />
border-right:1px solid #d3e9a7;<br />
border-left:1px solid #d3e9a7;<br />
}<br />
.roundcorner_box5{<br />
border-right:1px solid #b2d866;<br />
border-left:1px solid #b2d866;<br />
}<br />
.roundcorner_box_content{<br />
padding:0px 10px;<br />
background:#99cc33;<br />
}<br />

↑このCSSをコピーしてCSSファイルに保存してから。。。↓のhtmlを書いてくださいな。

</p>
<div>
<span class="roundcorner_box"><br />
<span class="roundcorner_box1"><span></span></span><br />
<span class="roundcorner_box2"><span></span></span><br />
<span class="roundcorner_box3"></span><br />
<span class="roundcorner_box4"></span><br />
<span class="roundcorner_box5"></span><br />
</span>
<div class="roundcorner_box_content">
<!-- ここに文字書いてくださいな -->
</div>
<p><span class="roundcorner_box"><br />
<span class="roundcorner_box5"></span><br />
<span class="roundcorner_box4"></span><br />
<span class="roundcorner_box3"></span><br />
<span class="roundcorner_box2"><span></span></span><br />
<span class="roundcorner_box1"><span></span></span><br />
</span>
</div>
<p>

↓サンプルでござる。

こんな感じで、画像をまったく使わずに、
角丸の枠ができますねん。

え～いい！こんなんじゃ分からんわ～い！っちゅうかたに。。。

Spiffy Corners
今回参考にさせていただいたサイトですわ。こちらでは、色を指定するだけでCSSをhtmlを自動で生成してくれますねん。

DesignWalker » 角丸

CSSだけで角丸の枠を作ってみる