マウスオーバーをデザインする | DesignWalker
Sexy Drop Down Menu w/ jQuery & CSS - noupe
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key -- and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. According t
jQueryとCSSで驚きのページめくり効果を作るサンプル:phpspot開発日誌
Simple Page Peel Effect with jQuery & CSS jQueryとCSSで驚きのページめくり効果を作るサンプル。 利用者に対して驚きを与えるだけでなく、スペースも有効に使える便利なサンプルが公開されていました。 綺麗なアニメーションをするも、Flashは使っておらず、jQueryとCSSで表現されているところが凄くてそのテクニックにも注目。 以下のようなＵＩがあります。 右上のめくったところにカーソルを合わせるとペローンとページがめくられ、少ないスペースだったのに情報が表示されます。 該当のコードですが、以下のように、jQueryのanimateによって実現されています。 $("#pageflip").hover(function() { //On hover... $("#pageflip img , .msg_block").stop() .animat
CSSでピンバルーンを作成するチュートリアル:phpspot開発日誌
Create CSS pin balloons with ease CSSでピンバルーンを作成するチュートリアル。 次のような、カーソルを合わせるとハイライトされるような吹き出しをJavaScriptなしで作るチュートリアルです。 実際の動作はデモページを確認。 CSSのpositionとかhoverとかを組み合わせて作成してるみたいです。 吹き出し画像は透過PNG画像。 デモページ自体がサンプルページとなっているので、同じようなものを作りたい時に画像とCSSをちょっと書き換えて、サッと作れちゃうかもしれません。 タグ構造もとてもスッキリ <div id="map"> <div id="america"></div> <div id="europe"></div> <div id="africa"></div> <div id="asia"></div> <div id="australi
Project Deploy - The Future Of Robotics & Programming
Many medical institutes in the United States use some type of software to manage their records. It eliminates the use of paper, makes transferring information easier, and provides an easy to access database. Most would assume that such a system is also very secure. But programmers and physicians from the University of California recently showed […] Everyone dreams of making their own game, and wit
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
タブメニューなにか良いのないかなと思って探していたら、10 Javascript Ajax Tabsというエントリが後々使えそうなのでご紹介しておきます。 タブに関するまとめは以下で。 10 Javascript Ajax Tabs とりあえず10のJavaScriptAjaxタブメニューエントリはこちらから。 エントリの中でも、以下のメニューが面白かったですね。 口で説明するのは難しいですが、タブをクリックすると上下にスライドしながら違う文章を持ってきます。 以下からサンプル＆ダウンロード可能 タブメニューに関して 最近仕事のほうも忙しくなり、なかなか更新できないでいます。 そんなわけで、今回のようにタブを紹介するときにまとめて関連する記事を紹介する率も高くなってきました。 ピンポイント紹介ではなくなってきていますが、ご愛嬌と言う事でお願いします。 [JS]スムーズに切り替わるタブ型コン
Geekなぺーじ：右クリックで保存できない画像、コピペできない文字 (not javascript)
Javascriptなどを使わずに右クリックで保存できない画像の作り方を思いつきました。 もしかしたら、既にwell knowかも知れませんが。。。 あまり実用性はないと思いますが、まあ、ネタの一種だと思ってください。 以下に表示している画像の左半分は右クリックで保存できなくしてあります。 右クリックで画像を保存できないのは、スタイルシート設定で透明な蓋を画像の上に置いているからです。 右クリックは画像に対してではなく、DIVに対して行っている事になっています。 上記サンプルをHTMLをわかりやすく整形したものを以下に示します。 <html> <head> <style> <!-- #myfilter { position:absolute; z-index:2; filter:alpha(opacity=50); -moz-opacity:0.5; width:120px; height
320以上の高品質なミニアイコンがダウンロードできる「Mini Pixel Icons」:phpspot開発日誌
Mini Pixel Icons These mini icons are designed at 14x14px with transparent background. 320以上の高品質なミニアイコンがダウンロードできる「Mini Pixel Icons」。 再販禁止で、10個以上アイコンをサイト上で使う場合は http://www.ndesign-studio.com/ にリンクしなくてはいけない、というライセンスがあります。 リンクしたくない場合は30ドル払えばよいらしいです。 どれもWEBツールなんかに使えそうないい感じのものばかりなので、利用規約に沿って、使わせてもらうのも良いでしょう。 SILK ICONS なんかもクリエイティブコモンズで広く使われていますね。
CSSでクールなタブUIを作成するサンプル:phpspot開発日誌
OSResources - How to create CSS overlapping tabs? Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. CSSでクールなタブUIを作成するサンプル。 次のようなタブUIを作ることが出来ます。 サンプルのCSSを定義しておけば、後は次のようにシンプルなHTMLをコーディングするだけで上記画像のようなタブUIが作れます。 HTMLもクリーン。 <ul class="obtabs"> <li class="first"><span><a href="#">Jack</a></span></li> <li><span><a class="new
CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」:phpspot開発日誌
CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」 2006年10月04日- FreeStyle Menus Demonstration This script is a highly flexible means of converting HTML content into powerful popup menus, using either nested lists or DIV tags for menu data, and following best practice guidelines for powerful and accessible menus. CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」。 ブラウザ上で動くWindowsのメニュー風のUIは結構見かけ
とほほのＷＷＷ入門
HTML/JavaScript/CSS/CGIなど Webサイト作成に関する情報を満載した Web作成関連総合サイトです。
Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
Firebug :: Firefox Add-ons
Firebug 1.2.1 by Joe Hewitt, Justin Dolske, robcee Categories Web Development Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... Firebug 1.2 requires Firefox 2 or 3. 347 reviews Updated September 12, 2008 172,244 weekly downloads 8,436,061 total downloads M
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Aptana