[JS]使い方も簡単、画像をフェードで切り替える超軽量スクリプト -hoverFade
既存のページに導入するのも簡単な画像をフェードで切り替えるスクリプトをDan Wellmanから紹介します。 フッタのアイコン 実装方法 フェードで切り替える画像のエレメントに対して、hover時に画像が切り替わるように設定します。その際に使用するクラス名は「hover-css」が初期設定です（変更可能）。 これはもしJavaScriptがオフの環境でも、ホバーがCSSで行われるようにするためです。 次にスクリプト用のクラスを用意します。初期設定は「hover-anims」で、「hover-css」と同様に画像が切り替わるように設定します。 これはスクリプトで利用するクラスで、その際にCSSのクラスは削除されます。 jquery.jsとhoverfade.jsを外部ファイルとして配置します。記述位置の理想はHTMLの終わりです。 HTMLにさきほどのCSS用のクラスを記述します。 また、初
質感溢れるクオリティの高いボタンのPSD
素敵な質感のあるボタンギャラリー。 あぁ・・・世の中素敵なデザイナーさんっていっぱいいるもんだなぁ等と思いながら、いつか使いそうなのでご紹介。 思わず押したくなるボタン 光沢があって、なにやらツルツルしてると思わず押したくなりそうになります。 全体的なデザインを考えて、「ボタンだけ浮かないように」注意して使う必要があるかもしれませんね。 中でもネタ帳お勧めのアイコンをピックアップ。 ちょっとでも気になった方は以下でいろいろ堪能するといいかも！ Ultimate Collection of Free Buttons in PSD Format １）多数のボタンデザイン 各種多数のボタンデザインが入っているお勧めの一品。 もう色々揃ってるので、これだけあればまぁあとはいんじゃないか的な流れになりそうだけどその辺は個人のお好みで。Adobe風のタグが一押し。 ２）Windows7ボタン Wind
[CSS]CSS3を使って実装する、かわいらしいLavaLampナビゲーション
LavaLampとはカーソルに伴ってハイライトした光源が移動するエフェクトで、LavaLamp for jQuery lovers!にあるようなものです。 CSS3の角丸やボックスシャドウ、アニメーションを使用してこのエフェクトを実装するチュートリアルをINSIC DESIGNSから紹介します。
[JS]多くのコンテンツが設置できるドロップダウン型のナビゲーション -jDiv
洗練されたエフェクトでドロップダウンが開閉するナビゲーションをSkyrocket Labsから紹介します。 jDiv デモページ デモでは左端の「Rollover Me!」のドロップダウンに多くのコンテンツが設置できるパネルが設定されており、リストや画像など複雑なものも配置が可能です。 ナビゲーションはリスト要素、パネルはdiv要素で実装されており、デザインのカスタマイズはCSSで自由に設定ができます。 HTML <textarea name="code" class="html" cols="60" rows="5"> <!-- BEGIN MAIN NAV MENU--> <div id="menu"> <ul> <li><a href="#" id="menu1">Rollover me!</a></li> <li><a href="#">Link # 2</a><</li> <li
[CSS]ハック無しで、不透明なパネルをドロップダウンするナビゲーション
IEをはじめとするクロスブラウザ対応の不透明なスタイルを適用したドロップダウン型のナビゲーションをCSSplayから紹介します。 IE6でのキャプチャ ナビゲーションはJavaScriptやtableは使用しておらず、スタイルシートもハックや条件付きコメントは使用していません。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(Win), Chromeとのことです。 また、同様に垂直型のナビゲーションも公開されています。
jQueryで実装する、奥行きのある回転テーブルの動き – creamu
普通と違った、奥行きのあるインターフェースを実装したい。 そんなあなたにおすすめなのが、『jQuery Roundabout』。jQueryで実装する、奥行きのある回転テーブルの動きです。 シンプルなul, liのHTMLを、奥行きのあるインターフェースにしてくれます。しかもクリックすると、前面にぐいっと回転して出てきます。 以下のようなデモも用意されていて、かなり刺激的なことになっています。 Standard Roundabout in Action Clock 一度見てみてください。 jQuery Roundabout ブログデーになりつつあるな。。今日はインプットが多すぎました。。朝までがんばるぞ。 P.S. 今気づきましたが2つとも田口さんとかぶってしまいましたすんまへんm(_ _)m
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」:phpspot開発日誌
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 2009年10月21日- Long Dropdowns 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 ドロップダウンメニューは限られたスペース内に沢山のナビゲーションを埋め込めるということで便利なのですが、多くなって縦に長くなってしまうと、下のほうのアイテムがクリックしづらくなります。 これを使いやすくしたのが今回のサンプル。 マウスを下に移動すると、少しのマウス移動でメニュー自体が上にニュイーンと上がってきてくれます。 結果的にカーソル移動量が少なくなって使いやすくなります。 最初は驚くかもしれませんが、なれると便利ですし、一番したまでいってもループして戻ってくるという仕様なので、見逃した、という失敗も避けられます。 これは新しい上
ページサイドにアニメーションするMac OS X 風のドック風ナビゲーション作成チュートリアル＆サンプル:phpspot開発日誌
ページサイドにアニメーションするMac OS X 風のドック風ナビゲーション作成チュートリアル＆サンプル 2009年12月08日- ページサイドにアニメーションするMac OS X 風のドック風ナビゲーション作成チュートリアル＆サンプルが公開されていてソースコードのダウンロードも可能です。 次のようなＵＩがサイドバーに現れてカーソルを合わせるとニュイっとアニメーションで現れます。ナビゲーションの表示を最小限に抑えたい場合などに使えそうですね。 デザインはCSSで行われているため、もっと自分のサイトにあった形にカスタマイズすることも出来そうです。 以下のエントリを参照してください。 Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル:phpspot開発日誌
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル
サイト内リンクでページ遷移するAjaxサイトの作り方 – creamu
yensdesignというサイトで、サイト内リンクでページ遷移するAjaxサイトの作り方が公開されています。 ↑がナビゲーションになっていて、クリックすると、「#home」や「#tutorials」という形でパラメータがついて、ページ遷移します。 リロードが必要ないので、ページ移動がスムーズで気持ちいいですね。 デモは以下から。 Try the tutorial! XHTMLとCSS、JavaScriptソースが載っているので、一度見てみてください。 Creating AJAX websites based on anchor navigation Amebaとロクナナのイベントが発表されました。友人がイベントに興味を持っていたので、以前打ち合わせにきてもらったのです。その後実現に至ったようでうれしいですね。 名村くんと浦野くんも出ますね。興味のある方はぜひ！12/8正午から申し込み開始と
jQueryで実現するリッチな表現のメニュー「10 Fresh jQuery Tutorials to Enhance Navigation Menus」
軽量のjavascriptライブラリとして幅広く利用されているjQuery。その機能は多岐にわたり様々なプラグインやパッケージが後悔されていますが、今日紹介するのはjQueryの中でもナビゲーションに絞って紹介しているエントリー「10 Fresh jQuery Tutorials to Enhance Navigation Menus」です。 Horizontal Scroll Menu with jQuery Tutorial 詳しくは以下 ■Spritemenu フェードインやアコーディオンなどのマウスオーバーアクションが付けられるメニュー ■Sexy Drop Down Menu w/ jQuery & CSS FLASHメニューのようなスムーズなアニメーションを見せるドロップダウンメニュー ■A Simple and Beautiful jQuery Accordion Tutor
シルバーメタルやブラックメタルのフリーのボタン素材
メタルやグロッシーをテーマにしたボタン素材をpsdGraphicsから紹介します。 PSD silver metal buttons set ダウンロードできる素材のフォーマットはPSDで、背景やテキ
つい押したくなるようなボタン作成Photoshopチュートリアル集:phpspot開発日誌
つい押したくなるようなボタン作成Photoshopチュートリアル集が40種類ほど公開されていました。 ボタンといっても色々な種類があって、ちょっとした変り種のボタンを作る際にも参考にできそうな豊富なチュートリアル集になってるようです。 各リンク先は以下のエントリを参考にしてください。 40 Best Photoshop Tutorials for Creating Buttons and Badges | Naldz Graphics
jQueryでフリップするカッコいいメニュー作成のチュートリアル:phpspot開発日誌
jQuery Flipping Menu Tutorial using backgroundPosition Plugin | Queness jQueryでフリップするカッコいいメニュー作成のチュートリアルが公開されています。 カーソルを合わせると、グレーの文字がスライドして、赤くなります。 静止画で見ると微妙なのでデモページをどうぞ カッコいいFlashで出来たサイトのメニューっぽいですが、これをjQueryで導入できるということで、メニュー部分にクールな印象を持たせたい場合は使ってみるとよいのかも。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]アクセシブルでクロスブラウザ対応、アニメーションで動作するナビゲーションの無料ダウンロードサイト -apycom
[JS]ユーザビリティに配慮したドロップダウン型のナビゲーションを実装するチュートリアル
マウスオーバー時にリンクが右にずれるjQueryプラグイン – creamu
ボタンやフォーム要素、シールなどWeb2.0っぽいUIパーツ集:phpspot開発日誌
CSSによるボタンスタイリング例いろいろ:phpspot開発日誌