Windows7のような透過ウィンドウを実現するjQueryプラグイン – creamu
Windows7のようにウィンドウを透過させたい。 そんなときに使えそうなのが、『AeroWindow』。Windows7のような透過ウィンドウを実現するjQueryプラグインです。 divを透過させて、重なったときに後ろが透けて見せることができますね。ダブルクリックすると、びよーんと拡大したり、右下をドラッグするとリサイズすることができます。 デモは以下から。 オンラインデモ 動きが気持ちいいので、一度見てみてください。 AeroWindow gihyoさんでの連載が始まりました。最近のかっこいいUIについて考えたり、作り方を紹介したりしていくので、よろしければご覧ください。 第1回 使いやすいメニューはどう作る？ ?水平メニュー あと代官山で物件を見てきました。めちゃくちゃかっこいいんだけど、うーんもうちょい探そうかな。
a要素のマウスオーバー時にテキストをふわっと切り替えるjQuery – creamu
マウスオーバー時のエフェクトに凝りたい。 そんなときに使えそうなのが、『HoverAttribute jQuery plugin』。a要素のマウスオーバー時にテキストをふわっと切り替えるjQueryです。 アンカーテキストにマウスオーバーすると、a要素かrel要素に指定してあるテキストに、ふわっと切り替わります。ちょっと変わったエフェクトをつけたいときによさそうですね。 デモファイルがダウンロードできるので、一度見てみてください。 HoverAttribute jQuery plugin 大阪と神戸と京都を満喫中。めちゃ楽しい。もうちょっと京都を楽しんで東京に帰ります。
マウスカーソルの横にローディング画像を表示するjQueryプラグイン – creamu
Ajaxの処理中にローディングバーを表示させたい。 そんなときに使えそうなのが、『prettyLoader』。マウスカーソルの横にローディング画像を表示するjQueryプラグインです。 マウスカーソルの側っていうのがわかりやすくていい感じですね。 This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones, just leave my informations at the top of the files. Donations are always welcome. とのことで、商用利用も可能となっています。ファイルの先頭のクレジットを残してほしいとのことですね。 一度見てみてください。 prettyLo
チャート・グラフが作れるオンラインツール22 – creamu
97859900/ iStockphoto/ Thinkstock チャートやグラフを手軽に作りたい。 そんなときにおすすめなのが、『22 Useful Online Chart & Graph Generators』。チャート・グラフが作れるオンラインツール集です。 便利そうなのが揃っているのでご紹介しますね。 Rich Chart Live Flashでチャートが作れるツール Online Chart Generator 素晴らしいジェネレータ。かっこいい3Dのグラフを簡単に生成できる Chartle.net シンプルに使えるオンラインチャートジェネレータ JS Charts 棒グラフや円グラフなど、様々なタイプのチャートが作れるJavaScript Google Chart Tools Webサイト上でライブチャートが作れるGoogle Chart Tools Google Char
ブラウザ上でプレゼンができるjQueryプラグイン – creamu
89540785, Comstock Images/ Comstock/ Thinkstock ブラウザ上でプレゼンがしたい。 そんなときに使えそうなのが、『jQuery Presentation Plugin』。ブラウザ上でプレゼンができるjQueryプラグインです。 シンプルなUIのプレゼンテーションファイルが作れますね。矢印キーでページ遷移が可能です。 繊細なフェードイン&アウトの動きになっています。 「slides」IDのdivの中の、「slide」クラスにページごとの内容を記述する形になっていますね。 デモは以下から。 take a look at a demo さっとプレゼンファイルを作りたいときにいかがでしょうか？ jQuery Presentation Plugin: Say NO to Keynote! いつかの分を挽回。 今日も寒いですね〜。代官山でランチしてきました。
jQueryで作るiTunesライクなスライダー – creamu
手動で切り替えられるフォトスライダーを作りたい。 そんなときにおすすめなのが、『How to Create a Simple iTunes-like Slider』。jQueryで作るiTunesライクなスライダーです。 右に表示される矢印アイコンをクリックすることで、サムネイルと写真が切り替わる動きになっています。なかなか気持ちのいい動きですね。 jquery.jsとmocha.jsというのを使っていて、ソースはとてもクリーンになっています。 デモは以下から。 Demo View It Online 一度見てみてください。 How to Create a Simple iTunes-like Slider tuts+ネットワークのサイトが、それぞれデザインリニューアルされていますね。細部の改善を図ったとのことですが、よりメリハリのある、すっきりとしたデザインになっていると思います。 さて
アイコンがふわっと拡大するjQuery – creamu
マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQuery: Your First jQuery Plugin, “BubbleUP” ブログ遅くなりました。。昨日は書けなかった。すんまへんm(_ _)m 急いで作業しているところでOSが起動しなくなり、ここ数年で一番大変な日を過ごしました。。。 セキュリティーについて深く考えさせられたので、心機一転してがんばります。
フォームで使えるjQuery25 – creamu
フォーム周りでjQueryを使いたい。 そんなときにおすすめなのが、『25 jQuery Tutorials for Creating and Working with Forms』。フォームで使えるjQuery集です。 かっこいいものが揃っていますね。いくつかご紹介します。 Creating a Slide-in jQuery Contact Form クリックするとスライドインして現れるコンタクトフォーム Build an Incredible Login Form with jQuery クリックすると、ぐいんと勢いよく現れるフォーム Using Form Labels as Text Field Values ラベルタグの内容をテキストフィールドの値にして透かしテキストにしたフォーム Create a Progress Bar with JavaScript フォームの進捗状況をプ
フリー素材を配布するデザインブログ20+ – creamu
デザインに使えるフリー素材を探している。 そんなときにおすすめなのが、『20+ Design Blogs that Release Quality Freebies』。フリー素材を配布するデザインブログ集です。 有名なサイトからちょっとマイナーなサイトまで、たくさん揃っていますね。いくつかご紹介します。 Lost and Taken フリーのテクスチャを配布しているサイト。商用無料のものもあり Bittbox クオリティーの高いブラシやベクター素材で知られるBittbox。最近はフリーのテクスチャパックを多く配布している Fudge Graphics ブラシやテクスチャ、ベクター素材、壁紙などを配布しているFranz Jeitz氏のブログ Colorburned Photoshopやillustrator用のブラシを配布している。ベクター素材やパターンなどもあり Think Design
CSS3でIEにも角丸を適用させるhtcファイル – creamu
CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-border-radius: 32px;//for Firefox -webkit-border-radius: 32px;//for Safari and chrome border-radius: 32px;//CSS3 behavior: url(border-radius.htc);//for IE すごく簡単な方法なので、CSS3での角丸はこれで決まりな
装飾系フォント46 – creamu
それだけで絵になるフォントを探している。 そんなときにおすすめなのが、『46 Cool & Useful Dingbat Fonts』。装飾系フォント集です。 Nymphette 流線型のオーナメント。商用無料 We Spray スプレーが描けるフリーフォント WC Rhesus 液体がはねたようなフォント Border Corners レースの飾りなど、様々なコーナーの装飾 Zoologic 象やキリン、ワニやラクダなどの動物フォント DJ Horses かっこいい馬のフォント 4Yeo Sport スポーツシルエットのフォント Efon 絵本に出てくるような、かわいいイラストフォント Facetype たくさんの顔のシルエット 入れておくと何かと便利だと思うので、一度見てみてください。 46 Cool & Useful Dingbat Fonts これはすごいかも。確かに軽くなった感じ
クールなjQueryのlightbox系スクリプト集 – creamu
サイトのデザインに合うlightbox系スクリプトを探している。 そんなときにおすすめなのが、『The Best jQuery Lightbox Scripts』。クールなjQueryのlightbox系スクリプト集です。 知らないのもあったりでいい感じのものが揃っていますよ。 CeeBox アニメーションがかっこいいCeeBox。画像だけでなく、iframeやFlash、動画を読み込めて、カスタマイズが可能。Flashの表示にはswfobjectを使用 ColorBox おっと思うような動きをしてくれるColorBox。画像以外も読み込み可能 Facebox facebookスタイルで画像をオーバーレイ表示。これは有名ですね。シンプルでとてもいい Fancy Zoom 画像やFlashなどを読み込める。すーっと拡大してくる動き FancyBox 動きがとてもクールなFancyBox ほか
UIデザイン / モックアップ作成に使える素材集 – creamu
UIデザインやモックアップ作成のための素材を探している。 そんなときにおすすめなのが、『A UI Design and Prototyping Treasure Chest』。UIデザイン / モックアップ作成に使える素材集です。 テンプレートやアイコンなど、いろいろと揃っていますね。 Browser Templates For The Website / Web Application Designer デザインラフの確認に使える、SafariやIE、Firefoxのブラウザテンプレート。800x600px、1024x768px、1280x1024pxの3サイズがPSDで用意されていて、レイヤーに分かれているので使いやすそうです Vector Pack: Browser Screens and Website Elements こちらもSafariのテンプレート。aiとepsが入っていて
かっこいいjQueryのスライダー25 – creamu
WebDesignFanで、かっこいいjQueryのスライダーがまとまっています。 いくつかご紹介しますね。似たようなエントリーを書いていますが、あまり見たことのないものがいろいろあります。 jQuery Plugin – Feature List 左にナビゲーションがあって自動で切り替わる Accessible News Slider ナビゲーションがわかりやすいニューススライダー。広げる、たたむ機能もあり Animated JavaScript Accordion V2 シンプルで使いやすいアコーディオンメニュー Easy Slider 1.7 – Numeric Navigation jQuery Slider とてもクールなスライダー。左右にナビゲーションあり SlideItMoo 1.1 – improved image slider 左右のナビゲーションでスライドするタイプ M
フレッシュで便利なjQueryプラグイン5 – creamu
aext.netで、フレッシュで便利なjQueryプラグインが紹介されています。 ざっとご紹介しますね。 jQSlickWrap floatした画像の周りにテキストを配置させるプラグイン jQuery Slider plugin (Safari style) Safariスタイルのかっこいいスライダーを作ることができるプラグイン jQuery Shuffle Plugin 要素の順番を入れ替え（シャッフル）てくれる Flips スライドするボックスを作成。スピード等のカスタマイズが可能 JQuery Sprite Animation Plugin Flashのようなアニメーションを作ることができるプラグイン それぞれデモがあるので、一度見てみてください。 5 Fresh and Useful jQuery Plugins Were Born in November 2009 タブを40個く
Twitterでの最新の発言をブログ等に表示する方法 – creamu
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"> </script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&count=1"> </script> 「12345.json」の部分をIDに書き換えて、「yourid.json」という風にすればOKです。これでプレーンテキストで最新のTweetが取得できるようですね。 オプションでCSSでのスタイリングもソースが載っています。 一度見てみてください。 How To Display Your Last Tweet Using Javascript A
自動で写真のコラージュを作ってくれるジェネレータ – creamu
Shape Collage Onlineというサイトを見つけました。自動で写真のコラージュを作ってくれるジェネレータです。 URLをしていして「Create」ボタンを押すと、矩形とかハート型、月や星といった形に写真をコラージュしてくれます。作ってみたぞ。ちゃんと☆型になっとる。 サイトデザインも、グローバルナビやフォントカラー、背景色が綺麗で見ていて気持ちいいですね。グレーの使い方がうまいな。 あと機能的には、コラージュ後の画面にFacebookへのポストやEmbedタグもついていて、インターフェースとしても洗練されていると思います。 「Things to do」には、「別のコラージュを作る」リンクと、「ソフトウェアをダウンロードする」リンクがついていて、有料のアプリを紹介していますね。 シンプルだけど、とてもいいインターフェースだと思うので一度見てみてください。 Shape Collag
Webデベロッパーのためのフォトギャラリー作成スクリプト – creamu
TutZoneというサイトで、Webデベロッパーのためのフォトギャラリー作成スクリプトがいろいろと紹介されています。 いくつかご紹介しますね。 Carousel.us MooToolsを使った3DのJavaScriptカルーセル。Firefox 2+, Opera 9+, Safari 3+, IE 6+, Chrome 1でテスト済 Galleriffic フェードイン&アウトしながら表示されるクールなフォトギャラリー Zoomimage クリックでズーム、前後の画像へのナビゲーションもついているギャラリー jQuery Slider II サムネイルつきのクールなフォトギャラリー Space Gallery MacのTimeMachineのようなインターフェースで、クリックすると1枚ずつフェードアウトして消えて、次の写真がズームするギャラリー TimeMachineのとかすごいですね。
シンプルだけど便利なCSSプロパティー5 – creamu
WebDesignerWallで、シンプルだけど便利なCSSプロパティーが紹介されています。 ざっとご紹介しますね。 CSS Clip 画像にレクタングルのマスクをかける Min-height 高さの最小値を指定する「min-height」。コンテンツの高さがサイドバーよりも低いときなどに。IE6に対応させるハックもある White-space 「white-space:nowrap」を使って、アルファベットが途中で切れてしまうときに改行させる Cursor ボタンがDisabledになったときに「cursor:default;」を指定してクリッカブルでないことを明示する Display inline / block displayプロパティーを使って、ブロックレベル要素をインライン要素に。その逆もあり 復習がてらに一度見てみてください。 5 Simple, But Useful CSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のベンダープレフィクスを自動で追加してくれる「CSSPrefixer」 – creamu