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を作れば再利用したい放題っていうのは大きい。

 んで、上記のソースをブラウザで表示すると以下のようになる。

個人的に満足



 IEとFFで見ることが出来るし問題なし。

[2005-03-20]追記修正:なんだか、よろしくない雰囲気なので文章を修正削除した。xhtmlの規格は正直どうでも良いです。そもそも、うちのブログは意図的にxhtmlの規格を無視してます。規格は機械からすると大切かな、くらいのスタンスで生きています。表現には以後気をつけます。不愉快な思いをされた方すいませんでした。

【引用元】
Nifty Corners:Stripe it to get it rounded

【関連記事】
[を] CSSで角を丸くする
画像なしで角を丸くするCSSテク: Nifty Corners - PLAYNOTE

投稿者:としのり  日時:23:59:59 | コメント | トラックバック |

WILLCOM 音声通話定額サービスを発表

正直なところPHSで十分


 私の生活が万人と共通とは思えないが、私は携帯電話が必要ではない。デジタルカメラを持っているし、無線LANポートつきのノートPCを持っている。しかも近頃はパソコンの前に座ることが多い。また、友人との意思疎通はIMやSkypeの登場などにより簡単にできる。そのため携帯電話の優位性より足りないところが浮き彫りになってきていると思う。携帯電話はカメラとネットワーク機能が一体化している点が優位かなぁ。

 ま、そんな優位性が崩れそうなPHSの音声通話定額サービスに関する記事を発見した。

WILLCOM(ウィルコム)は、同社端末同士での音声通話定額サービス「ウィルコム定額プラン」を月額2,900円で、5月1日より全国で開始する。7月1日からは、同プラン契約者を対象にパケット通信定額サービス「リアルインターネットプラス[1x]」も月額2,100円で提供される。同社では、両プラン合わせて月額5,000円で音声通話からデータ通信までを定額で利用できるとし、積極的に展開していく。


 これは、ヘビーな携帯電話ユーザーで、特に音声通話が多い人が乗り換えそうなプランだなぁ。私は7月の「リアルインターネットプラス[1x]」開始まで、待ちです。回線の負荷を考えると同時に開始はできないよなぁ、やっぱ。

【引用元】
WILLCOM、月額2,900円の音声定額サービスを5月1日から

【関連リンク】
WILLCOM: プレスリリース: 05.03.15 WILLCOM新サービス「ウィルコム定額プラン」等の提供について

投稿者:としのり  日時:23:59:59 | コメント | トラックバック |

関内 横濱カレーミュージアム

パチスロなどが入っているビルの7、8階


8階は空き気味


辛い!


【関連リンク】
横濱カレーミュージアム

投稿者:としのり  日時:23:59:59 | コメント | トラックバック |

横浜 キリン横浜ビアビレッジ

生麦駅から徒歩10分



麦汁は甘くて、にがーーい




できたてのビールはのどごしがちがう



3杯目もうまい




【関連リンク】
KIRIN
KIRIN YOKOHAMA Beer Village

投稿者:としのり  日時:23:59:59 | コメント | トラックバック |