JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル

Giva Labs - mcDropdown jQuery Plug-in | Giva CSSでクールにデザインされた階層ドロップダウンボックス実装jQueryプラグイン「mcDropdown」。 一見なんの変哲もないドロップダウンですが、「▼」のボタンをクリックして驚き。 次のようなCSSでスタイルされたカッコいいドロップダウンが出現します。 階層が深いメニューであっても、普通のcomboボックスに比べて非常に分かりやすく作ることが出来ます。 CSSでレイアウトを調整できるというのはいいですね。 しかも、このドロップダウン、自由入力にも対応しており、「a」を入力したところ、補完候補をサジェストしてくれます。 JavaScriptも駆使されて実現されたこの機能ですが、うまく使えばサイトのナビゲーションを分かりやすくすることが可能かもしれません。 ドロップダウン関連エントリ HTMLだけで

CSS2/DOM - Styling an input type="file" input type=fileをCSSでクールにスタイルするサンプル。 input type=fileのファイル選択ボックスをスタイルしてクロスブラウザで動作させるのはそれなりに大変そうなのですが、そのサンプルが公開されています。 綺麗にデザインされたサイトなのに、ファイルの部分だけ「参照」ってなってて普通のボタンだとかっこ悪いかもという場合にこのサンプルが使えそうです。 実際にスタイルされたボックスは以下。 ファイル名が入る部分も角丸になっていて、ボタンもなかなかクールに仕上がっています。 一応ですが覚えておくとよさそうなテクニックですね。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」 CSSでデザインされたテーブルレスでクールなフォームサンプル クリー

A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg

CrossSlideは、画像同士をクロスフェードさせ、溶け合うように次々と切り替えられるスクリプトです。 CrossSlide デモには、上下にスライドしながらの切り替え、スタティックに切り替え、ズームしながら切り替える３つがあります。 オプションでは、スライド時のスピード、フェードの時間、静止画の表示時間、ズームの比率などが調整できます。 CrossSlideはjQueryのプラグインのため、動作にはjquery.jsが必要です。

UvumiTools Cropは、画像に不透明なレイヤーを重ねて表示し、その画像の一部を別のエリアに切り抜いて表示できるスクリプトです。 UvumiTools Crop クロップできるエリアのサイズはユーザー側で変更することが可能で、マウスのクリックで離れた箇所へのエリアの移動もできます。 オプションでは、マスクの不透明度、各要素のクラス名、リサイズの有無・サイズ、プレビュー機能などを変更することができます。 UvumiTools CropはMooToolsのプラグインのため、動作にはmootools.jsが必要です。

Nettutsのエントリーから、テキストのサイズをスライダーで変更できるスクリプトのチュートリアルを紹介します。 Use the jQuery UI to Control the Size of Your Text デモ テキストのサイズは、スライダーのマイナスからプラスの間で変更することが可能です。 変更したサイズはクッキーに保存されるため、次にアクセスした際にもそのサイズで表示されます。 オプションでは、テキストの初期サイズ、最小値・最大値などがカスタマイズ可能で、日本語フォントでも最適なサイズに変更することができます。 スクリプトのフレームワークには、jQuery UIが使用されています。

dojox.fx._split Here is a small demonstration of the many possible results achievable through the relatively small set of effects currently under development. Each effect is highly configurable. Here is a general list of the options available in each effect: The number of rows and columns in which to split the element The distance the pieces travel (as a multiple of the element's respective dimens

bevel.js (with IE 6/7 support) bevel.js 1.0 allows you to add bevels (and also shading, shining and glowing) to images on your webpages (alternatively: glossy.js). JavaScriptで画像にベベル効果を与えられる「bevel.js」 netzgesta.de にてJavaScriptによる新たな画像エフェクトライブラリが公開されました。 ライブラリを使うことで、画像に次のような立体的なガラス風のベベル効果をかけることが可能です。 同様の画像エフェクトライブラリ 画像にページめくり効果をつけられるJSライブラリ「curl.js」 画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」 画像にマスク