nettuts+で、CSSとjQueryで実装するタブコンテンツが紹介されています。 タブをクリックすると、アニメーションしながらスムーズにコンテンツを切り替えてくれます。 デモは以下から。 » Demo 一度見てみてください。 » Create a Slick Tabbed Content Area using CSS & jQuery ハワイに旅行した友人がブログでKUA AINAのバーガーがめちゃうまいって書いてたから、食べたくなって早速行ってきたぞ。日本だけどね。ばりうまかったのだ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery. View Demo 1. HTML - Page Peel Wireframe The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg
25 Great Examples of Using Gradient Effects in Web Designs グラデーションをうまく使って立体感を出したサイトデザイン集。 うまくグラデーションを使うことで、質感の表現や、ゴージャスな印象を生み出しています。 ECTOMACHINE クールな画像とともにグラデーションされた背景が印象を強くしています Reinvigorate うまくグラデーションと背景イメージを混ぜ合わせたデザイン 単色にするよりグラデーションの方が高級感が出ているのが分かります Central Snowsports 平面ですがうまく立体的にしてさらにそれが分かりやすいメニューになっている点が参考にできそう Tim Van Damme コントロールパネルっぽいデザインを立体的にデザインしている例 シンプルで分かりやすいページ構築の際の参考になるかも Rise Crea
最近はよくjQueryを使うのだが、他の人がどんな風に使っているかに興味がある。 もしあなたが同じように思っているならjQuerySTYLEが参考になるだろう。 このサイト、jQueryが使われているサイトのギャラリーである。 また、それぞれのサイトでjQueryのどの機能（Ajaxだとかナビゲーションだとか）が使われているかもアイコンで一目でわかるようになっている。自分の興味にあわせて覗いてみるといいだろう。 自分が使っているものを他の人がどう使っているか。そんなことに気づかせてくれるこうしたサイトはいいですね。
NETTUTS - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ 次のようなマークアップでシンプルに実装できる模様。 <div id="test-accordion" class="accordion"> <div class="accordion-toggle">トグル1</div> <div class="accordion-content">コンテンツ1</div> <div class="accordion-toggle">トグル2</div> <div class="accordion-content">コンテンツ2</div> <div class="accordion-tog
- March, 28th, 2017: DHTML Chess for WordPress. DHTML Chess is now available as a WordPress plugin in a free and PRO version. Learn more. - January, 16th, 2017: LudoJS Progress Bar. Samples of progress bars in the LudoJS Javascript framework on my site ludojs.com. - January, 13th, 2017: DHTML Chess 3.0. The new DHTML Chess 3 has been ported to jQuery. New demos are also available. The home of DHTM
liquidicity 165 Vector Icons, Now in 5 Colours You seemed to like our original set of 165 vector icons, so we thought you might like them again. 次のような165のフリーなWeb2.0風ベクターアイコンが配布されています。 イラストレーターのベクター形式なので、ちょっと変更したり、色を変えたり拡大したりと自由自在ですね。 サイト作成用の素材によさそうです。 関連エントリ ブログに使えるフリーな超キュートアイコン集「Tiny Little Icons」 12500以上のハイクオリティなアイコンをまとめたサイト「IconArchive」 iPhone風アイコン作成用PhotoShopテンプレート 16x16ピクセルの芸術的favicon集 小さくて可愛
CSS Juice Tools Below is the complete list of online generators and tools WEBデザインに便利なオンラインジェネレーター＆ツール集。 WEB2.0なサイトのデザインを作る際にかなり使えるブラウザツール集がまとまっていました。 角丸コーナージェネレート Roundedcornr Spiffy Corners Sitepoint Spanky Spiffy Box CSSフォーマッター、オプティマイザー Code Beautifier Clean CSS CSSDrive Compressor CSS Optimiser Web2.0ロゴジェネレーター Web 2.0 logo creatr Creatr Web 2.0 Stylr Web 2.0 Free Logo Generator ストライプ背景画像ジェネレーター
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
Boks - A Visual Grid Editor サイトのレイアウトがサクサク作れるAIRアプリ「Boks」。 Boksを使えば、グリッド内をドラッグ＆ドロップして直感的にレイアウトを作っていけます 作ったレイアウトは「Export」で簡単にHTML+CSSに出来ます。 HTMLとCSS複数が吐き出されます 基本設定として、グリッドの設定なんかも調整できて、自由度はあります サイトのレイアウトがめんどくさいという方はこういうものでサクっと済ませちゃうというのもありですね。 関連エントリ CSSレイアウトのチート集「CSS Layout Cheats」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 フリーで使えるCSSレイアウトのテンプレート配布サ
「DESIGN LABEL」で、JSでモーダルウィンドウやダイアログボックスを実装する方法がたくさん紹介されています。 ざっといくつかご紹介。 » Prototype Window prototypeフレームワークをベースにしたjavascript » Simple Modal いろいろなタイプのモーダルダイアログボックスを作るjQueryベースのプラグイン » Moodalbox Ajaxで外部コンテンツを表示する。mootoolsを使用 » jqModal マルチモーダルダイアログ（モーダルの中にモーダル）が可能なjQueryプラグイン » Lightwindow pdf、flash、QuickTimeなどのファイルをJSダイアログボックスで開ける » Facebox 画像やdiv、ページ全体を表示するためのFacebookスタイルのlightbox クールなインターフェースが揃ってい
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
Hundreds of Web Design and Programming ToolsThis site contains an application to help web site and graphic designers, interior decorators etc. pick color schemes - combinations of colors that are pleasing to the eye. The tool is based on a color wheel, and it generates monochromatic, contrast, triad, tetrad, and analogic color schemes.
Tutorials Round-Up: Ajax, CSS, PHP and More | Smashing Magazine Ajax/CSS/PHP等のチュートリアルまとめが公開されてます。 英文のサイトは本当にチュートリアルが充実していますね。 Ajax AJAX Desktop Tutorial AJAX Matters Blog Ajax RSS reader AJAX Tutorial Ajax: What is it Good For? → 続きを読む CSS Advanced CSS Layouts: Step by Step Beginner’s guide from a seasoned CSS designer CSS Advanced Guide CSS and HTML examples and tutorials by Ove Klykken CSS Basic
サイト制作に役立つチュートリアルや素材を探している。 そんなときにおすすめなのが、『45 Must-See Incredible Resources And Inspirational Collection To Discover The Best Of The Web In January』。素晴らしいWebの素材&チュートリアル45選だ。 以下にいくつかご紹介。 ↑のキャプチャは刺激的な3Dタイポグラフィー70個 アーティスティックなサイト25個 実用的でクリエイティブなjQueryの使い方20 デザインテンプレート&PSDファイル45個 フリーのXHTML/CSSテンプレート38個 その他のリストは以下から。 » 45 Must-See Incredible Resources And Inspirational Collection To Discover The Best Of
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
