2005-03-19 Sat
角丸画像無しで、角丸を実現するテクニック
■角丸画像って面倒くさい
1, 背景色を決める
2, テーブルの大きさを決める
3, 思考錯誤しながら円を描画、背景色とぜんぜん違う色にする
4, 別のレイヤーで円が内円になるように正方形を描画し、正方形は背景色で塗りつぶす
5, レイヤーを統合し4等分する。
6, 4等分した後で、4等分された円を選択し消去する。
7, 画像を保存する
8, 6と7を、あと3回繰り返す
角丸画像を作るためには、上記の作業を経る必要があり、非常に面倒であった。しかも、その画像を生かすためには、意味も無くTABLE要素をバリバリ使う必要があり、デザイナーの作業を圧迫していた。
しかし、角丸を画像を使わずにCSSだけで実現してしまった手法を、たつをさんが紹介されていた。
The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect.
・・・天才だ。サンプルを見ても天才である。これで、面倒な作業がひとつ減った。角丸アレルギーが克服できそうな予感がするなぁ。
そんで、いろいろ考えて欲望のままに編集してみた。
<style>
.rounded{background:#ff6600;width:150px;}
.rounded p{color:#ffffff;margin:0px 0px 0px 0px;text-align:center;}
#rtop,#rbottom{display:block;background:#ffffff;}
#rtop *,#rbottom *{display:block;height:1px;overflow: hidden;background: #ff6600}
#r1{margin: 0px 5px}
#r2{margin: 0px 3px}
#r3{margin: 0px 2px}
#r4{margin: 0px 1px; height: 2px}
</style>
<div class="rounded">
<div id="rtop">
<span id="r1"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r2"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r3"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r4"><img src="./images/ghost.gif" width="1" height="1" /></span>
</div>
<p>個人的に満足</p>
<div id="rbottom">
<span id="r4"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r3"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r2"><img src="./images/ghost.gif" width="1" height="1" /></span>
<span id="r1"><img src="./images/ghost.gif" width="1" height="1" /></span>
</div>
</div>
</body></html>当初の「画像なしでコーナーを丸くする」というコンセプトからはズレるが、サンプルで用いているghost.gifのような1平方pxな透明gif画像なら使っているサイトは多いだろうし、その画像の再利用は簡単じゃないかなぁ。なにしろ、一回ghost.gifを作れば再利用したい放題っていうのは大きい。
んで、上記のソースをブラウザで表示すると以下のようになる。
個人的に満足