CSSで角を丸くする
2005-03-18-4
[Tips]
Nifty Corners: rounded corners without images
<http://pro.html.it/esempio/nifty/>
(via Hatena::Bookmark)
画像なしでコーナーを丸くする方法。IEでもFFでもOK。かなり使えそう。
example:
追記050320:
Nifty Cornersについて考える - 徒書
<http://www.akatsukinishisu.net/itazuragaki/html/
think_about_Nifty_Corners.html>
興味のある部分を抽出しただけだから。
まあ、それもなんなわけなので example を書き直してみました。
別ファイルがベターかと。あ、角丸め追加部分は関数化ね。あと、
innerHTML はダサいですか?
というか、そもそもこれをベースに何かするべきではないです。
オリジナル実装(ちゃんとしたやつ)をご利用ください。
<http://pro.html.it/esempio/nifty/niftyCodice.html>
使い方は <http://pro.html.it/esempio/nifty/> の後半にあります。
■市瀬裕哉, 福島英児, 望月真琴 / 実践Web Standards Design-Web標準の基本とCSSレイアウト&Tips
■加藤善規, 平澤隆, 両見 英世 / Web標準XHTML+CSSデザイン - クリエイターが身につけておくべき新・100の法則。
<http://pro.html.it/esempio/nifty/>
(via Hatena::Bookmark)
画像なしでコーナーを丸くする方法。IEでもFFでもOK。かなり使えそう。
example:
あいうえお
from <http://pro.html.it/esempio/nifty/nifty1.html><style> #wakuwaku {background: #f8f;width:6em;} #wakuwaku p {margin:0 0 0 0;text-align:center} .rtop, .rbottom{display:block;background: #FFF} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: #f8f} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px; height: 2px} </style> <div id="wakuwaku"> <b class="rtop"> <b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b> </b> <p>あいうえお</p> <b class="rbottom"> <b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b> </b> </div>
追記050320:
Nifty Cornersについて考える - 徒書
<http://www.akatsukinishisu.net/itazuragaki/html/
think_about_Nifty_Corners.html>
元記事ではWeb標準についても配慮しており、最終的には、HTMLに余計な確かに! 上の example は角丸め部分を埋め込んでいる。
マークアップを加えることをせず、角を丸くするのに必要な要素は
DOM(Javascript)で加えるという手法をとっている。[...]しかしながら日
本語で紹介される際に、DOMを使う部分がすっぱり抜け落ち、HTML + CSS
だけの部分が紹介されてしまっている。
興味のある部分を抽出しただけだから。
まあ、それもなんなわけなので example を書き直してみました。
「すぐ試せるサンプル」を目指すため JavaScript と CSS は埋め込み。<script type="text/javascript"> window.onload=function(){ var o = document.getElementById('wakuwaku'); o.innerHTML = '<b class="rtop"><b class="r1"></b><b class="r2"></b>' + '<b class="r3"></b><b class="r4"></b></b>' + o.innerHTML + '<b class="rbottom"><b class="r4"></b><b class="r3"></b>' + '<b class="r2"></b><b class="r1"></b></b>'; } </script> <style> #wakuwaku {background: #f8f;width:6em;} #wakuwaku p {margin:0 0 0 0;text-align:center} .rtop, .rbottom{display:block;background: #FFF} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: #f8f} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px; height: 2px} </style> <div id="wakuwaku"><p>あいうえお</p></div>
別ファイルがベターかと。あ、角丸め追加部分は関数化ね。あと、
innerHTML はダサいですか?
というか、そもそもこれをベースに何かするべきではないです。
オリジナル実装(ちゃんとしたやつ)をご利用ください。
<http://pro.html.it/esempio/nifty/niftyCodice.html>
使い方は <http://pro.html.it/esempio/nifty/> の後半にあります。
■市瀬裕哉, 福島英児, 望月真琴 / 実践Web Standards Design-Web標準の基本とCSSレイアウト&Tips
■加藤善規, 平澤隆, 両見 英世 / Web標準XHTML+CSSデザイン - クリエイターが身につけておくべき新・100の法則。
この記事に言及しているこのブログ内の記事