CSS3グラデーション・角丸のジェネレーターをjQuery/CSS3/HTML5で作成するチュートリアル
jQuery, CSS3, HTML5を使用して、CSS3グラデーション・角丸を生成するCSS3ジェネレーターを作成するチュートリアルを紹介します。 Creating a CSS3 Generator with CSS3, HTML5 and jQuery デモページ ※デモはWebkit系ブラウザ（Chrome, Safari）で動作します。 [ad#ad-2] 上記デモでは、CSS3グラデショーン（上のキャプチャ）、角丸（下のキャプチャ）のCSS3をブラウザで表示確認しながらコードを生成できます。 チュートリアルでは、HTML5のDOCTYPEの解説から、各要素へのスタイルシートの適用まで詳しく解説されています。 時間がない方は、とりあえずページ下のファイル一式をダウンロードすると、上記のデモがそのまま楽しめます。
スタイリッシュな角丸を作れるjQueryプラグイン「DivCorners」 | Web活メモ帳
「DivCorners」は画像を使って角丸を簡単に作れるjQueryプラグインです。 境界線のボーダー表示やボックスのレイアウトを簡単に作る事ができるようになっています。 以下のようなコードで動作するようです。 $("div").dcCreate({ imgPrefix: "/images/dCorner-", fileType: ".gif", expand: 10 }); 実際に表示したイメージは下の画像のようになります。 角丸は画像を使用しているようですが、将来的には画像なしで表示するように対応するとの事です。 IE6にも対応しているとの事。 対応ブラウザが多いのは嬉しいですね。
CSS3 のドロップシャドウと角丸でつまづきそうなところ - 走り出したwebクリエイターblog
CSS3はとても便利なプロパティが満載ですが、まだまだ使い慣れていないため、へんなところでつまづいてしまいます。実際に作っていてドロップシャドウと角丸でハマってしまったところをメモ。 CSS3のドロップシャドウ -moz-box-shadow:0 0 3px #cccccc; -webkit-box-shadow:0 0 3px #cccccc; プロパティの内容は以下の通りです。 box-shadow: [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色] 上の例では3pxのシャドウ（#cccccc）がグローエフェクトのようにボックスの周りを囲みます。このときボックスレイアウトは左右に3px広がったと解釈されるようです。 つまりシャドウを指定しているボックスが300pxで指定されていれば306pxでレンダリングされるようです。センタリングされているコンテンツエリア
Web-ContentsSketch：ウェブを中心にデザイン活動している人の日々の記録 【CSS3による角丸表現の決定版？のhtcファイル「border-radius.htc」すごい件】
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル／サッカーの話題なども。 久しぶりになんか興奮してしまったサイト制作に関するCREAMUさんの記事をご紹介！ ●CSS3でIEにも角丸を適用させるhtcファイル | CREAMU ダウンロード先はコチラ。 Google codeの方にあるみたいです。 ●curved-corner - Project Hosting on Google Code すごいなぁ。 border-radius.htcファイルを読み込んで、CSSの記述を moz-border-radius: 00px;//for Firefox -webkit-border-radius: 00px;//for Safari and chrome border-radius: 00px;//CSS3 be
CSS3でIEにも角丸を適用させるhtcファイル – creamu
CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-border-radius: 32px;//for Firefox -webkit-border-radius: 32px;//for Safari and chrome border-radius: 32px;//CSS3 behavior: url(border-radius.htc);//for IE すごく簡単な方法なので、CSS3での角丸はこれで決まりな
角丸のCSSボックスやナビゲーションを作成できるオンラインサービス -Mierendorff
CSSやJavaScriptの知識がなくても簡単に、角丸のCSSボックスやアニメーションで動作するナビゲーションが作成できるオンラインサービスを紹介します。
DD_roundies: Code-only rounded HTML boxes
DD_roundies is free software under the MIT License. Please familiarize yourself with known issues. You might also enjoy DD_belatedPNG. 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. Things have changed. I spent some time away from the project before IE8 final was released. When I came back to it, much h
Daftar Kumpulan Situs Slot Gacor Gampang Menang Maxwin Terbesar
FLORES99 : Daftar Kumpulan Situs Slot Gacor Anti Rungkat Terpercaya Gampang Menang Hadir sebagai Situs judi slot online terbaru, FLORES99 saat ini menjadi salah satu pilihan bagi para penikmat permainan judi online yang ada di seluruh Indonesia. Ini semua karena permainan yang disediakan begitu seru dan mengasyikan, game slot online juga sangat mudah di akses dan dimainkan kapan saja hanya melalui
Table of CSS3 border-radius Compliance « Muddled Ramblings and Half-Baked Ideas
Content last updated Aug 17, 2011 – First impression of Firefox 6. NOTE: I’m updating the ol’ blog to honor its 1,000,003-word birthday, and some pages require individual attention. This is one of those pages. Please pardon the mess. border-radius seems to be a hot topic these days, what with CSS3 including it and some broswer vendors already implementing it. I just think it looks nice. I original
CSSだけで角丸を表現する「border-radius」 | チバのブログ
ブログのデザインを変えたついでに一部のブラウザにしか対応していないCSSのプロパティを使ってみました。 対応しているブラウザと対応していないブラウザでは見た目が少し違ってしまうところもありますが、文章メインのサイトであることと個人のサイトであるということから、その点は割り切って使うようにしました。 このエントリーから何回かに分けて今回のデザイン変更で使ったプロパティの中で「これは！」というものをサンプルを交えつつ紹介したいと思います。 （対応ブラウザの情報はわかる範囲で記述していますが、間違いや不足があれば指摘していただけると助かります。） border-radius まず最初はborder-radiusの紹介。 画像を使わずに角丸を表現することができるプロパティです。 Safari・Google Chrome・Firefox3.05～で先行実装されています。 今まで画像やJavaSc
Javascript 角丸ライブラリメモ - Diary of absj31
1.JQuery Corner Gallery 8種類の基本丸角設定が可能。 jQueryベースの角丸javascript「jQuery Corner」 : skuare.net 2.JQuery Curvy Corners 上記のライブラリより、更に詳細な設定が可能。 jQueryベースの角丸javascript「JQuery Curvy Corners」 : skuare.net
CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」:phpspot開発日誌
CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」 2009年09月02日- tripleb.js (javascript CSS 3 simulation) CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」 ライブラリを読み込んだら、ボックス要素の class="***" に修飾条件を指定しておくだけで、自動でボックスを角丸や、影付き、グラデーション効果 を与えることができるみたいです。 ↓適用すると以下のように修飾されます↓ 配布元は、色々なライブラリで有名な www.netzgesta.de。 CSS3の機能を使うので非対応ブラウザでは使えませんが、面倒な部分もJavaScriptでサクッと実現できちゃいますね。
Web-ContentsSketch：ウェブを中心にデザイン活動している人の日々の記録 【角Rに関するJSと装飾付背景のレイアウトCSSのTips記事を見つけました。】
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル／サッカーの話題なども。 IE6に対応してる角Rなボックス生成JS（印刷時も結構大丈夫そう）と、 たまに遭遇してマークアップに少しだけ悩む「ドロップシャドウ付コンテンツのレイアウト」に関する記事を見つけたのでご紹介します。 ●IE6でも簡単に角丸ボックスが作れるJavaScript - 「curvyCorners」 | CSS-EBLOG CSS-EBLOGさんは、CSSやJSに関する記事が豊富なので、オススメのブログですね～。 角Rに関するJSは印刷時も結構丸い感じになるかも。（以前試した角RのJSは印刷時、壊れたページみたいになってしまい、導入を見送ったことも） 今更ですが、Fx1.5とかだと、再現されない、されても変な感じになるので注意。対象ブラウザに考えて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
syboos.jp
[CSS]角丸を少しでも滑らかに実装するスタイルシートのテクニック
Border Radius
IDEA * IDEA
http://www.css-lecture.com/log/css3/css3-border-radius.html
http://blog.e-riverstyle.com/2009/09/javascriptcss.html
cssglobe.com