角丸画像使用のサイズ可変タブ | ruless-works.com memo

角丸を画像で表現するタブのコーディングにちょっと苦労したので、メモ。 タブ内の文字サイズは可変にしなきゃいけない。 IE6対応でCSS3は使用不可。でも角丸にしたい！ タブの下部に影付けたい。 で、デザインしたのがこれ。 これを実現しようとすると、cssとhtmlがめんどうくさいことになりました。 切り出し用に調整したものと、スライスの設定。 フォントサイズ可変対応とはいえ、タブ内の文字数は少ない前提なので画像横幅と高さは気持ち控えめ。 [css] .tabmenu_info { background: url(../img/tabbtn_info_btm.gif) repeat-x 0 bottom; } .tabmenu_info ul { padding: 0; margin: 0; list-style: none; } .tabmenu_info li {

[hashimoya]

タブ画像、角丸、テキストで縦横可変の場合。ふーむ