GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
curvyCorners - kinneko@転職先募集中の日記
http://www.curvycorners.net/ 画像を使わずに角を丸くするjs。
GIGAZINE - CSSで角をもっと丸くする方法いろいろ
「スライディングドア」と呼ぶ方法で全体をヘッダー、ボディ、フッターの3つに分割して、コーナー部分などはオーバーレイとか使ってみましょう、という方法。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.schillmania.com/projects/dialog/ 使用しているコードと画像のダウンロードはこちらから http://www.schillmania.com/projects/dialog/dialog.zip また、こちらに透過PNGを利用したバージョンもあります。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.s
border-radius + -moz-border-radius + (Nifty Corners * IE behavior) - 徒書
border-radius + -moz-border-radius + (Nifty Corners * IE behavior) これまではさほど関心を持っていなかった角丸なのですが、最近のはてなブックマークで角丸を扱った記事が多く取り上げられてたり、CSS Nite Vol.6(見に行ってました)でも角丸が取り上げられたりしていたので、今更ながらにわかに興味が出てきたのでした。 たぶん、自分が角丸へ関心を持つのを避けていたのは、作る側として「実現するのがややこしいから」ということだったと思うのですが、見る側からしてみると、角丸のもつ見た目の印象はかなり効果的だよなあ、と考えるようになってきました。最近見たものだと、Catalystでサンプルアプリケーションを作った時のデフォルトページが、-moz-border-radiusをつかったスタイルで、衝撃的でした。 さて角丸をどう実現するか
IEでもborder-radiusっぽいことをするbehavior
特徴 IEで丸い角を表現するためにVMLのroundrectを利用します（超安直）。とりあえずCSS3で書いた（-moz-）border-radiusなスタイルシートにひとつ記述を加えるだけで使えるので、将来に禍根を残すことはないはず。画像を使う方法よりはメンテナンスが楽で、余計な要素が氾濫しているソースよりは綺麗なんじゃないかなぁ、と。新版と旧版がありますが、どちらも中途半端です。 使い方 非IE系のブラウザ用にborder-radius: npxまたは-moz-border-radius: npxを指定してあるところへ、ついでにbehavior: url(border-radius.htc)を追加して下さい。なお、 あらかじめhtml要素の開始タグあたりにxmlns:v="urn:schemas-microsoft-com:vml"を書き加えておく必要があります（しなくても動作し
Nifty Cornersについて考える - 徒書
Nifty_Cornersに関する議論 - 徒委記 元記事であるNifty CornersはWeb標準にHTMLをcleanに保つことについても配慮しており、最終的には、HTMLに余計なマークアップを加えることをせず、角を丸くするのに必要な要素はクライアントサイド(ブラウザ側)でDOM(Javascript)を用いて加えるという手法をとっています。 But we love webstandards and semantic markup and we'd like to maintain the HTML clean and light. しかしながら日本語で紹介される過程で、DOMを使う部分が抜け落ち、HTML + CSSだけの部分が広まっていたようでした。そのためか、批判的意見でもDOMを使う点についてはあまり言及されていないように見えます。 個人的には「HTML文書には余計なマークア
Javascriptで動的にアンチエイリアスな角丸を設定する:phpspot開発日誌
More Nifty Corners | Web Design | PRO.HTML.IT Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts: 「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」で紹介したNiftyCornersですが、このページで紹介されている方法を使えば、アンチエイリアスな角丸を設定することが出来るようです。 使い方はちょっと変わって、 Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); のようになっています。 第二引数と第五引数が追加される形になっています。
Collection & Copy - 画像 CSSを使った角丸
画像 + CSSを使った角丸 技術 wg:Introducing DomCorners 上記ページを読んだ。 Nifty Corners 作者はCSSのみで角丸を実現する記事を書いている。当ブログでも、これを利用している。 その上で異なるアプローチの角丸を紹介している。 上のような画像を、1コマずつずらしながらCSSを利用して貼りこんで行く。 対象となる領域のHTMLは以下。 <div id="box"> <b class="btop"><b></b></b> content here... <b class="bbot"><b></b></b> </div> CSSの定義は以下。 b.btop, b.btop b, b.bbot, b.bbot b{ display: block;height: 10px;font-size: 1px; background-image:url(rc.
0503 - eto.com/d
ContentsDebugWindow注目をあびる優れた検索エンジンwemaNifty Corners++ Updateダウンロードniftypp.htmlniftypp2.css議論リンクsIFRNifty Corners++download使い方で、Buzz GameGiant StepsRuby on RailsGonzui CSS対応Gonzui JavaScript対応JavaScript at SourceForgeTinyMCEIE7HtmlAreaGoogle MapsAlphaImgFactoryAjaxversionの違い動的生成使いまわしがききそうな部分他の分析2005-03-18AjaxAjaxを説明する時に絶対使ってはいけない用語VML誰も知らないけど実はイケてる技術で、Mozilla SVGRealtimeWikiWikiばな Vol.4RastBreak it
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
