jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element | Filament Group, Inc.
jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element Update: For those interested in using this plugin: we now recommend that you download the source from Felix Nagel’s revisions of our plugin, as he’s made many improvements since we first published it. You can find Felix’s branch on Github here: http://github.com/fnagel/jquery-ui. To download a zip, look for th
AJAXを使った素晴らしいCSSフォームの47のサンプル | コリス
noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。
[JS]たくさんのスタイルで実装できるタブのスクリプト -idTabs
idTabs idTabsではたくさんのデモがあり、上記ページの「Usual」「Freedom」「Advanced」でそれぞれのデモを見ることができます。 Freedomの場所に依存しないタブ、Advancedのアニメーションタブなど面白いタブがたくさんあります。 idTabsはjQueryのプラグインのため、動作にはjquery.jsが必要です。
[JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider 1.1
Coda-Slider 1.1は、先日紹介したCoda-Slider 1.0からバージョンアップをした、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Coda-Slider 1.1 Coda-Slider 1.1 デモ Coda-SliderはjQueryのプラグインで、1.1の主な改良点は下記のようになっています。 jQuery 1.2への対応 IE6, 7でタブを早くクリックした場合のバグ スクリプトオフへの対応(<noscript>) YouTubeなどの動画のバグ preloaderの採用 タブと矢印以外にもスライドするリンクを設置可能 参考： スムーズに切り替わるタブ型コンテンツ -Coda-Slider
Interaction Design Pattern Library - Welie.com
Pattern library All patterns are listed here. It's quite a bunch of them, but I have tried to group them meaningfully. User needs Patterns that meet a direct need of the user. Navigating around· Accordion · Headerless Menu · Breadcrumbs · Directory Navigation · Doormat Navigation · Double Tab Navigation · Faceted Navigation · Fly-out Menu · Home Link · Icon Menu · Main Navigation · Map Navigator ·
検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design | コリス
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
Welie.com - Patterns in Interaction Design
A Pattern Library for Interaction Design This site contains a lot of best practices in Interaction Design. Over the years I have collected examples and insight on their applicability that I share with you here on this. So there is really no 'original' design to be found here, sorry. It has all been done before... See it as a reference or basic 'toolkit' you can use when design user experiences. It
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
小粋なインターフェースを実現する25のコード （パート3） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
小粋なインターフェースを実現する25のコード （パート4） | S i M P L E * S i M P L E
先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 小粋なインターフェースを実現する25のコード （パート3） 今回も素敵なコードが揃っていますよ。いくつかご紹介。 ↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。 ↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。 ↑ スライド式のナビゲーションメニュー。 新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。 » 25 Code Snippets for Web Designers (Part4)
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
用途別に使えるフォームのテンプレート集「The Wufoo FORM Gallery」:phpspot開発日誌
Wufoo HTML Form Template & CSS Design Gallery The Wufoo Form Gallery is a resource for web developers and designers to help get a head start on data collection.用途別に使えるフォームのテンプレート集「Wufoo HTML Form Template」 フォームには実に様々な種類がありますね。 例えば、メーリングリスト登録フォーム、コンタクトフォーム、ToDoリスト、アンケート、注文。 そういったフォームのテンプレートが予め用意されていて、ダウンロードで簡単に使えるテンプレート集を集めたサイトが「The Wufoo FORM Gallery」です。 HTMLテンプレートのほか、CSSのテンプレートもダウンロードできます。 フォーム作成
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine
Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js :: 5509
Superfish Suckerfish on ’roids
角丸や矩形だけではない、タブ型ナビゲーションのデザイン集 | コリス
フォームのデザインいろいろ - DesignWalker
JavaScript、FLASHのイメージギャラリーまとめ15個ほど*ホームページを作る人のネタ帳
