複数のアイテムを特定の条件で表示したり、非表示にするフィルタリングをCSS3のエフェクトを使ってかっこよく実装するチュートリアルを紹介します。 Filter Functionality with CSS3 [ad#ad-2] チュートリアルでは3種類のエフェクトを使って、フィルタリングを実装しています。 各デモはページ上部の「ALL」「WEB DESIGN」「ILLUSTRATION」「ICON DESIGN」をクリックすると、フィルタリングを実行します。

12 Creative Web UI Elements to Enhance Your Web Design | Sky Tech Geek UIデザインの参考になる高品質UIエレメント集がまとまっていて、PSDなどで入手可能です。 UIデザインはすでにあるデモなんかを利用してもいいんですが、ある程度の知識がないとカスタマイズで時間を取られてしまいますね。 PSDなどからパーツを自分で起こせるようにしておくとどんなUIでも実装の際に対応できそうです。 関連エントリ クールなUIパーツを収録したUI作成用PSDキット「Transparent Glass UI」 GUIパーツやアイコンがセットになったイラストレーター用UIデザインフレームワーク これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ

ホバーエフェクトのキャプチャ HTML マークアップは非常にシンプルで、内部にリンクを配置したただの見出しです。 <div class="module"> <h2>Community <a href="#">Blue</a></h2> <!-- stuff in module --> </div> CSS ヘッダの基本となるスタイルで、a要素の左にborderでホワイトの領域を設定します。 .module h2 { background: #ccc; padding: 0 0 0 10px; font-size: 16px; /* Thickness of the bar more easily achieved with line-height since padding would push link inward. */ line-height: 2; } .module h2 a

Slidorion, A jQuery Plugin | jQuery Image Slider and jQuery Accordion | Random Demo スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」。 左側をスライダー、右側をテキストを入れたアコーディオンな感じのウィジェットが実装できます。 ほどよくアニメーションして良い感じです。 マークアップも綺麗に記述可能。 関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 ファイルアップロード関連のjQueryプラグイン１０ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」 jQue

カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」 2011年03月31日- jQuery Flower Navigation | jQuery Plugins カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」。 何の変哲もない円形のボタン。 クリックすると円の内側から画像がワサッとアニメーションでメニューが現れます。 カーソルを合わせると止まります。 マークアップは次のように書かれています。 デモではクリックしても飛べませんが、aタグのhrefを指定してあげれば飛べるということが分かりますね。 <nav id="websites"> <ul> <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/mdm_sma

DiaryTechnology あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』 あのかっこいいサイトのAjaxを取り入れたい。 そんなあなたにおすすめなのが、『60 More AJAX- and Javascript Solutions For Professional Coding』。あのサイトのAjax、Javascriptを実装するための方法60選だ。 ↑はCoda Popup Bubbles。 クールなポップアップメッセージが表示される。 » iCarousel carouselを作るためのオープンソース（フリー）Javascript » Product Slider スライダーで商品を選択できるインターフェース » Oversize

Easy Scrollは、スクリプトやCSSオフ時でも情報の提供が可能な、コンテンツをスクロールするスクリプトです。 Easy Scroll: Accessible Content Scroller デモページ スクリプトのオフ時には隠されているコンテンツが全て表示され、CSSのオフ時にはスクロールボタンがリストで表示されます。 Easy ScrollはjQueryやPrototypeなどのライブラリを必要とせず、単独のスクリプトとして配布されています。 設置もシンプルで、コンテンツのスクロールアップ・スクロールダウン・リセットの機能があり、スクロール領域の高さとスピードを設定することができます。

LEIGEBERのエントリーから、水平方向にスムーズに伸縮するアコーディオンのスクリプトを紹介します。 Horizontal JavaScript Accordion 1kb アコーディオンのスクリプトはjQueryやPrototypeなどの他のライブラリに依存することなく単独で動作する、1KBに満たないスクリプトです。 アコーディオンの各項目は、リスト要素になっており、画像やリンクなどを配置することができます。 動作環境は、IE6, IE7, Firefox, Opera, and Safari となっています。

This example demonstrates how to combine a Split Button with a Slider to create an opacity slider button, similar to that found in Adobe Photoshop. Begin by creating a Button instance of type "menu" and a Menu instance to house a Slider instance. /* Create a Menu instance whose body element will house a Slider instance. */ var oOpacityMenu = new YAHOO.widget.Menu("opacitymenu", { width: "220px"

aboone on GitHub Alex Boone on LinkedIn oregontarheel on Instagram @aboone on Twitter Alex Boone on Facebook

via del.icio.us/popular FishEyeTabsは、Firefoxのちょっとしたアドオンで、複数のタブを開いているときに、マウスが上に乗った注目しているタブの幅を大きくして、そのタブのタイトルを見やすくしてくれるというもの。 魚の眼が見るように、たくさんタブがあっても広角で全体を見つつ、注目してるところを広いあげられる、というインタフェースということか。 考えてみたらMacOSXの下にあるやつがそうだった。あれみたいな効果が、Firefoxのタブで得られるということ。 アドオンのページでは、2002年に提案されているFisheye式リストボックスというのも紹介されていた。 こちらは、リストの要素が大量にあったときに、スクロールバーを出すんじゃなくてこの魚眼式リストにするのはどうだろう、というUIの提案。 上がFisheyeで、下が通常のリストボックス。デモページでは実

CSS MENUS › Skeleton dropdown menu #2 Date : 1st December 2007 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information Based on the previous menu but a change of style so that it 'works' well over darker backgrounds. The widths of the dropdown and the flyout sub menus are not fixed and will be as wide as is necessary to hold the text on one

CSS MENUS › Skeleton dropdown menu Date : 9th November 2007 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information I have recently produced this menu for my other site stunicholls.com using a little javascript to make it work in IE5.x and IE6. But this is the non-javascript CSS only version. This is a simple menu that has taken months of wo

CSSplayのエントリー「Professional dropline / dropdown / flyout hybrid menu」から、スクリプトを使用しないでスタイルシートで実装する、ドロップダウンとドロップラインを組み合わせたナビゲーションの紹介です。 Professional dropline / dropdown / flyout hybrid menu 対応ブラウザはIE6, IE7, Fx, Op9.25, Op9.5beta, Safari(PC)となっており、IE6用にはtableを使用しています。 使用はフリーですが、気に入った場合など寄付を考えてください、とあります。