Plugins | jQuery Plugins 画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」 $(element).blurimage(); のようにするだけで画像に次のようなぼかし効果を与えられます。 使い方はアイデア次第ですが、なかなか面白いですね。 関連エントリ HTMLで書けるパワポ風プレゼンテーション実装jQueryプラグイン「Slippy」 画像にクリック位置に注釈を入れられるjQueryプラグイン
Parse XML with jQuery | Papermashup.com jQueryでXMLをパースして表示するコードサンプル例が公開されています。 jQueryマスターな方には無用の物かも知れませんが、スニペットとしても使えそうなので便利かも、というのでご紹介。 $.ajax でサイト内にある .xml ファイルを取得して、success のハンドラによってXML処理させます。 普通に書くと大変ですが、jQueryを使うことで次のように簡単になります。 .xml のパスはサイト内のURLであれば何でもいいので、サーバ側に xml を出力するようなAPIが既にある場合、jsonに変換することなく簡単に使えますね。 jQueryのDOM操作の簡単さによってこれだけ短縮できているところが何とも凄いです。
Ketchup Plugin オシャレにフォームのエラーをヒント表示してくれるjQueryプラグイン「Ketchup」。 次のように、Submit した時点でのエラー表示を吹き出しつきの枠をもってわかりやすく表示してくれます。地味にアニメーションする部分もいいです。 Validateというと、どういう値が正しいかという指定が必要なのですが次のように class に指定することで定義するようです。 class に指定するということで好き嫌いが分かれそうな気もしますね。ちょっと改造してもよさそうです。 <input type="text" class="validate(required, username, rangelength(3,20))" /> max, min, range, digits, mail, url など、基本的なバリデート指定は最初から実装されているみたいです。 関連
迫力あるWEBサイト作成に使えそうな煙やスプラッターブラシのまとめ。 濫用するとグチャグチャしてしまうかもしれませんが、うまく使えば迫力あるWEBサイトに仕上げられるかもしれないブラシ集です。 スモークブラシ 様々な形状の煙のブラシ 21 Awesome Smoke Brushes | Qbrushes - Photoshop Brushes 21種類のリアルなスモークのブラシセット Colorburned | Stunning Smoke Effects: 42 High Resolution Photoshop Brushes 迫力あるスモークブラシ Smoke Brush by ~eMelody on deviantART Smoke Brush Set by ~eMelody on deviantART Smoke Brush Set by ~wiim on deviantART
これは絶対覚えておいた方がよいシルエットの素材集。 85サイトのフリーかつハイクオリティなシルエット素材集が物凄い勢いでまとまっています。 覚えておくと色々な場面で使えることは間違いなさそう。 人型だけじゃなくて、動物や昆虫・植物などそろってます。 リンク先は以下のURLから参照してください 85 Free High Quality Silhouette Sets | Graphics
IE6 Update IE6ユーザへのアップデートをスマートに促すことが可能な「ie6update.js」。 Windowsユーザの方ならご存知の、ブラウザ最上部に表示される情報バーのようにやんわりとアップデートを促してくれるJavaScriptコードです。 最近、海外のサイトを見ているとこの仕組みを使ったサイトをよく見かけますよね。 実装は、サイト上に掲載されているコードを貼り付けるだけで実装できるという容易さもGood! コードは以下で、googleのホスティングするjQueryコードなどを読み込むものになっています。 <!--[if IE 6]> <script type="text/javascript"> /*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("
使えそうなCSS3等を使ったサンプルや各種CSSリソース集をまとめてみました。 CSS3に関しては対応ブラウザはまだ主流ではないとはいえ、CSS3等も徐々に学んでいきたいですね。 Text Blocks Over Image | CSS-Tricks 画像上にかっこよく文字を合成するチュートリアル →デモページ ZURB ? Super Awesome Buttons with CSS3 and RGBA css3の機能を使ってリッチなボタンを作成するチュートリアル Carsonified ? 30 Essential CSS3 Resources CSS3を学ぶのに使えるリソース集 CSS Gradients via Canvas | Weston Ruter Canvasを使ったCSSグラデーション作成 The Definitive Guide to Using Negative Ma
ASCII.jp:iPhoneがJavaScript+SQLiteでGPSレコーダーに!|古籏一浩のJavaScriptラボ 古籏一浩さんによる、iPhoneをJavaScript+SQLiteでGPSレコーダーにするチュートリアルが公開されています。 HTML5で追加される予定のAPI「Client-side database storage」が先取りで実装されているため、こうしたことが出来るようです。 データベース1つにつき5MBバイトまでデータを保存できるということで、他にも色々チャレンジできるかも JavaScript でやれるということで、お手軽に誰でも試すことができそうですね。 関連エントリ iPhoneアプリ開発に便利な43のリソース 開発者・WEBデザイナが使えるiPhoneアプリ集 iPhoneで動くドラムアプリを作成する分かりやすいチュートリアル
「IETester」バージョン0.3.3が5月11日にリリース IE8正式版に対応、各機能もバージョンアップ:CodeZine IE5.5、IE6、IE7、IE8という4つの異なるバージョンのIE(Internet Explorer)で、ウェブページのレイアウトを一気に確認できる便利なツール「IETester」のバージョン0.3.3が、5月11日にリリースされた。IE8正式版に対応した「IETester」が公開されたそうです VistaとXPに対応しているようです。 最近、IE6等でサイトを見ると、IE6自体が落ちてしまうというサイトが結構あるみたいですが、こうしたツールでまとめてチェックしておくとよいかも 関連エントリ My DebugBar | IETester / ChangeLog
Add Twitter to your blog (step-by-step) Twitterのメッセージをページに載せられるJavaScript「Twitter.js」。 Twitter.jsを使えばJavaScriptオンリーでTwitterのメッセージが載せられるみたい。 実装方法は以下の2ステップで簡単 (1) HTMLコンテナの定義 表示させたい位置に以下のHTMLコードを記述 <div id="tweet"> <p>Please wait while my tweets load <img src="/images/indicator.gif" /></p> <p><a href="http://twitter.com/rem">If you can't wait - check out what I've been twittering</a></p> </div> (2)
Photoshopテンプレートを使ってWii/PS3/DS/Xbox360など独自のゲームパッケージを作る 2009年04月24日- Photoshopテンプレートを使ってWii/PS3/DS/Xbox360など独自のゲームパッケージを作る。 deviantARTにてゲームパッケージ作成用の面白いPSDが公開されているみたいです。 Photoshopでレイヤーに分かれているので、自分の写真やサイトのロゴなんかで容易にゲームパッケージが作れます。 Create your PS3 Box Game PlayStation3のゲームパッケージ作成用PSDキット。 Make An Wii Game Cover Wiiのゲームパッケージを作れるPSDキット。 Make An Xbox 360 Game Cover XBox 360のゲームパッケージを作れるPSDキット。 Make A Nintend
CSS2/DOM - Styling an input type="file" input type=fileをCSSでクールにスタイルするサンプル。 input type=fileのファイル選択ボックスをスタイルしてクロスブラウザで動作させるのはそれなりに大変そうなのですが、そのサンプルが公開されています。 綺麗にデザインされたサイトなのに、ファイルの部分だけ「参照」ってなってて普通のボタンだとかっこ悪いかもという場合にこのサンプルが使えそうです。 実際にスタイルされたボックスは以下。 ファイル名が入る部分も角丸になっていて、ボタンもなかなかクールに仕上がっています。 一応ですが覚えておくとよさそうなテクニックですね。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」 CSSでデザインされたテーブルレスでクールなフォームサンプル クリー
Fun With CSS Shapes - Nettuts これは驚き!CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
GX - Full-Featured Javascript Animations Framework JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。 jQueryと組み合わせて使うアニメーションライブラリです。 jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。 勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。 以下でその凄さが分かるはず $('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
30 High-Quality Grunge Photoshop Brush Sets クールなPhotoshop用グランジブラシ集。 なかなかカッコいいブラシが集まっていて、サイトに使えばよりクールになりそう。 Photoshop Grunge Brush Set Grunge brushes 04 Sticky Tape Destroyed Heraldry Double Grunge Circles 全部見る アーティスト向けサイトなんかにはもってこいのブラシセットですね。 関連エントリ CSSでテキストにグランジ効果を与えるサンプル クールに演出したい局面で使える63のグランジフォント
WEB開発に活用できる、2009年初お目見えアイコンセット集。 知っていると思っていても、まだまだ知らないアイコンは色々あるみたい&生まれているみたい。 Proxal Icon Set v2 by !valkyre on deviantART 細かくデザインされたミニアイコンセット Sanscons シンプルだけど背景色が選べて汎用に使えそうなアイコンセット iconset "sketch'd up!" on the Behance Network スケッチがいい味をだしているアイコンセット WebDev Icon Pack WEB開発に使えそうなものがかなり沢山詰まっている Irokez CMS Icon Set CMSに使えそうなアイコンセット集 参考エントリ:50 of the Best Ever Web Development, Design and Application Ico
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く