質感溢れるクオリティの高いボタンの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」 ドロップダウンメニューは限られたスペース内に沢山のナビゲーションを埋め込めるということで便利なのですが、多くなって縦に長くなってしまうと、下のほうのアイテムがクリックしづらくなります。 これを使いやすくしたのが今回のサンプル。 マウスを下に移動すると、少しのマウス移動でメニュー自体が上にニュイーンと上がってきてくれます。 結果的にカーソル移動量が少なくなって使いやすくなります。 最初は驚くかもしれませんが、なれると便利ですし、一番したまでいってもループして戻ってくるという仕様なので、見逃した、という失敗も避けられます。 これは新しい上
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
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
jQueryで作るリアルなホーバーエフェクト – creamu
これはすごい。思わずうなってしまった。 Adrian Pelletierさんのブログ&デザインポートフォリオサイトの記事です。 マウスオーバーすると、ふわっとアイコンが浮き上がって、マウスアウトですっと下に落ちます。 落ちた時のバウンドも実装されているので、有機的でとても気持ちいいですね。 デモは以下から。 » View Demo ぜひ見てみてください♪ » Create a Realistic Hover Effect With jQuery 昨日は会社のイベント。「2人のアートディレクター 仕事・生き方・考え方」というタイトルで、mountのイム・ジョンホさんとRAKU-GAKIの西田幸司さんにお話を伺いました。 懇親会でご挨拶させて頂いたんですが、刺激になりますね。
ドロップダウンメニューを作るならこのスクリプト – creamu
HONGKIATで、ドロップダウンメニューを作るスクリプトがまとまっています。 ざっといくつかご紹介。 » CSS Drop-Down Menu Framework GNUライセンスのCSSドロップダウンメニューフレームワーク » CSS Express Drop-Down Menus CSSでさくっとドロップダウンメニューを作る方法 » JavaScript Dropdown Menu with Multi Levels javascriptを使ったマルチレベルのドロップダウンメニュー » Smooth Navigational Menu jQueryを使ったマルチレベルのナビゲーション » Mega Drop-Down Menu メニューの中にグループを設定できるメガドロップダウンメニュー » Mega Drop-Down Menu MooTools1.2を使ったシンプルなドロップダウ
商用利用可のさまざまなデザインが揃ったナビゲーションのPSD素材 | コリス
シンプルなデザインからスタイリッシュなデザインまで揃った、商用サイトでも無料で使用できるナビゲーションのPSD素材をpsdGraphicsから紹介します。 PSD website navigation menus set preview ナビゲーションのPSD素材はレイヤーが保持された状態なので、テキストの変更も可能です。 他にもシンプルなデザインが揃ったナビゲーションのPSD素材もダウンロードできます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]アクセシブルでクロスブラウザ対応、アニメーションで動作するナビゲーションの無料ダウンロードサイト -apycom
[JS]ユーザビリティに配慮したドロップダウン型のナビゲーションを実装するチュートリアル
マウスオーバー時にリンクが右にずれるjQueryプラグイン – creamu
ボタンやフォーム要素、シールなどWeb2.0っぽいUIパーツ集:phpspot開発日誌
かっこいいボタンを作る方法 – creamu