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

December 19th, 2006

最近では、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を自動で生成してくれますねん。

Star Wars - C-3PO mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

Star Wars - ダース・シディアス mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

Star Wars - ウィケット mimobot 1GB USBフラッシュメモリ

価格（税込）: ￥ 6,250

この記事に関連する記事

この記事のタグ

2 Responses to “CSSだけで角丸の枠を作ってみる”

今日の気になるニュース＠総合 Says:
December 20th, 2006 at 7:39 pm
Ｗｅｂ２．０、２００６年は「Ｗｅｂ２．０」サイトが急成長した１年！

２００６年はいわゆる「Ｗｅｂ２．０」サイトが躍進した年だったと振り返るリポートをネット利用動向調査のネットレイティングスが公表しました。詳しくは続きをどうぞ！
eiji Says:
December 21st, 2006 at 4:54 pm
これすごいですね！
一度使ってみたいです。

DesignWalker