Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 pina 関数の第一引数の値で角丸のradiusサイズを指定できます。 関連エントリ CSSで角丸テクニック２５ IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル

IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す

IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定します。リピートにも対応。 IE6用透過png対応策、DD_belatedPNGの使用法と注意点 合わせて読みたい：DD_be

Free javascript date picker - popup date picker for websites and web apps - javascriptcalendar.org 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」が公開されています。 次のように可愛いUIがいい感じです。 カレンダーピッカーのデザインもいいものを使いたい際の１つの選択肢として覚えておくとよいかも 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」

使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメニューは横に広がってくれます。 Horizontal Subnav Simple jQuery tabs コンテンツをタブで切

div要素で配置した矩形に、シンプルなボーダーや角丸、フェードのボーダーをスタイリングするスクリプトをroydukkeyから紹介します。 DivCorners デモページ ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。 上記キャプチャは、外側（outside）のデモです。 スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。

LavaLampとはカーソルに伴ってハイライトした光源が移動するエフェクトで、LavaLamp for jQuery lovers!にあるようなものです。 CSS3の角丸やボックスシャドウ、アニメーションを使用してこのエフェクトを実装するチュートリアルをINSIC DESIGNSから紹介します。

The true needs of modern home kitchens and how to fulfill them Modern homes are far different from that of the older versions of sophisticated kitchens. In Australia, most of the modern kitchen designs that people prefer applying in their kitchens include lots of simple yet useful things in a way that creates less mess and offer greater performance and a better place to work in your home. Regardle

Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例：Create an Attractive jQuery Menu with Fade In and Fade

<textarea name="code" class="html" cols="60" rows="5"> <div class="cornerBox" id="cBox1"> <div class="cornerBox-content">パネル</div> </div> </textarea>

DivCorners demo 角丸にするdivは入れ子にする必要がなく、下記のようにスクリプト側で配置する画像を設定します。 demo2のHTML <textarea name="code" class="html" cols="60" rows="5"> <div id="demo2a">demo2</div> </textarea>

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Accessible News Slider スムーズなアニメーションが気持ちいい、アクセシブルなスライダー。 Easy Slide

What is the Stash app for Android and who should download it? What are the benefits of using it and how does it work? Before you decide whether or … [Read more...] about Stash App: What Is It And The Benefits Of Using It Motorola MG7310 Review The Motorola MG7310 is a somewhat controversial DOCSIS 3.0 cable modem / WiFi router combo. The DOCSIS 3.0 increased transfer … [Read more...] about Motorol

Unless you have been under a rock these past 3 or 4 years than you absolutely have heard about how critical a blog is to your website and your business. You’ve heard that it will pull in targeted, interested traffic that converts. You’ve heard that it will help you build a brand and a reputation for yourself that is unparalleled and more importantly, irreplaceable. You’ve heard that it is the key

jQuery Corner Demo Now with more effects, thanks to Mike Alsup! How does this work? How do I use it? Just the source, please!

<textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { $("#mainblock").corner("30px"); $("#menu ul li").corner("8px top"); }); </textarea>