ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」:phpspot開発日誌
Adipoli jQuery Image Hover Effects 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」 画像にカーソルを合わせるとアニメーションを画像に重ねて、インタラクティブな効果を持たせることができます ただ画像を並べるよりも面白いものが作れそうです $('#image1').adipoli(); 使い方もこんな感じで死ぬほど簡単です 勿論多彩なオプションでカスタマイズ可能です 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」
Facebookのタイムラインを作る際に便利なPhotoshopテンプレート:phpspot開発日誌
Facebook Timeline Hack Template (update) Facebookのタイムラインを作る際に便利なPhotoshopテンプレート。 PSDを開くと次のようなfacebookのタイムラインに型どられたセットが開きます。 zipファイルに atn というPhotoshopアクションファイルも入っているのでインストールしておきます。 レイヤーに分かれており、マスクがかかっているので、マスクフォルダ以下に好きな画像を配置してデザインします。 アバター画像、背景画像をデザインしましょう。最初にインストールしたPhotoshopアクションを実行すれば、ファイルを保存というところまでウィザードでやってくれるので後はfacebookに画像をアップするだけでカッコいいタイムラインの出来上がり facebook上でも画像を移動したりできるわけなのですが、Photoshopの自由度
写真を一瞬でクールに出来るPhotoshopアクションが色々:phpspot開発日誌
写真を一瞬でクールに出来るPhotoshopアクションが色々なエントリが公開されていたのでご紹介。 次のように、写真をクリック数回で素晴らしく加工できてしまうアクション配布サイトがまとまってます。 リンク先は以下のエントリから参照してください。 The Big Collection Of Amazing Photoshop Actions | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net 関連エントリ １クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集 デザインを高速に行える技巧的なPhotoShopアクション集 PhotoShopのアクションやシェイプなどリソース一杯「Ladyoak.com」
これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック:phpspot開発日誌
Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック
JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌
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!'); });
GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」:phpspot開発日誌
GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」 2009年03月03日- BeautyTips Demo Page GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」が公開されました。 Google Map 風がなかなか面白いです。Google Mapじゃないけどページ内にGooglemap風の吹き出しを表示できます。 次のような角丸＆枠付＆半透明という高度なツールチップを作ることも可能です。 以下のようなFacebookスタイルも実現できます。 エレメントの上下左右に表示することが出来るみたい。 関連エントリ JavaScriptを使わずCSSのみでシンプルなツールチップ実装 ツールチップを作るのならこれかもという多機能jQueryプラグイン「Simpletip」 カスタマイズ
写真みたいなのにシームレスな背景として使えるテクスチャ配布サイト「SeamlessTextures.net」:phpspot開発日誌
写真みたいなのにシームレスな背景として使えるテクスチャ配布サイト「SeamlessTextures.net」 2009年02月16日- SeamlessTextures.net - Free Seamless Textures 写真みたいなのにシームレスな背景として使えるテクスチャ配布サイト「SeamlessTextures.net」 ページの背景にしてもシームレスにつながるので次のような、芝生を背景にしたようなデザインも簡単に作れます。 紙、コンクリート、ファブリック、雲、木目などのカテゴリに分かれていて色々探せます。 普通の写真でつなぎ目をうまく合わせるのは大変ですが、こうして最初からシームレスになっていると良いですね。 関連エントリ デザイナーが知っておくべき背景画像のリソースサイト集 伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」 サイトデザインをオシ
CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」:phpspot開発日誌
CSS Decorative Gallery I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images.CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」。 イメージにＣＳＳをあてることで、次のように、セロハンテープで貼り付けたり、画鋲でとめたりといった効果を出すことができます。 デモページはこちらでＩＥ６でも問題なく動作。 沢山種類があって、色んな場面で使えそうです。 これは久しぶりに感動しました。
デザインを高速に行える技巧的なPhotoShopアクション集:phpspot開発日誌
Photoshop actions: 124 Free Photoshop Actions to Boost Your Designs An action is a series of tasks that you play back on a single file or a batch of files - menu commands, palette options, tool actions, and so on. デザインを高速に行える技巧的なPhotoShopアクション集。 複数の処理を一括してまとめて行えるPhotoShopのアクション機能。 高度な画像処理を行うアクションがまとまっていましたので紹介。 フィルタではなく、アクションなので、それぞれの細かな動きも見ることができてPhotoShop自体の学習用にもよさそう。 （アクションの読み込み方は本エントリの最後を参照） 画
CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌
Create Resizing Thumbnails Using Overflow Property | Css Globe This tutorial is aimed at controlling the size of the thumbnails appearing on your page. CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。 次のように、CSSで画像を固定サイズにトリミング表示できます。 更にマウスオーバーで画像を元サイズに。 実装について見ていきましょう マークアップが次のようにあったとします <p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p> そして、次のＣＳＳを適用。 p.thumb{ float:left; margin:.5
クオリティの高いPhotoShopブラシいっぱい:phpspot開発日誌
Free Photoshop brushes download As a part of our regular promotional resources we here at PixelMoon Studio are offering a collection of 12 high quality Photoshop brush sets made by our members and friends. クオリティの高いPhotoShopブラシがサムネイル付きで沢山紹介されています。 月と星のブラシは、神秘的なサイトデザインや、使い場所はかなり幅広い気がします。 鳥の羽なんかも、高級感を出す上でいいかもしれませんね。 ブラシは全て、getbrushes.com で配布されているものです。 getbrushes については下記を参照 100以上のクールなPhotoShop用ブラシがダウン
JavaScriptでの画像プレビュー自由自在「PopBox」:phpspot開発日誌
PopBox! - Javascript Image Magnification PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page.JavaScriptでの画像プレビュー自由自在「PopBox」。 ページ内の画像をクリックするとページ内でそのまま、アニメーションしながら拡大。 PopBoxを使えば、そんな効果を実装することが可能です。 拡大だけではなく、比率の変更や、画像の移動、画像の縮小を行うことも出来ます。 凄く軽くて使いやすいです。もう、別ページで画像を拡大させるのは古い、と言われてしまうのかもしれませんね。
ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」:phpspot開発日誌
Drawter.com - DrawAble Markup Language ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」。 次のように、グラフィックソフトを扱うように、範囲をドラッグ＆ドロップで囲ってブロックが作れます。 好みのレイアウトが出来たら、後は、Code メニューから「Generate Code」を選ぶだけでコードが作れます。 ブロックベースのレイアウト作成ツールはありますが、こういった自由な形に作成できるものは珍しいですね。 凄く凝ったレイアウトを作る際になかなか使えそうです。 関連エントリ 質問に答えるだけで1〜3カラムのCSSレイアウトページ生成 ビジュアルにドラッグ＆ドロップでCSSレイアウトをデザインできる「YAML Builder」 WYSIWYG型オンラインCSSデザインツール「CSSEZ」
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌
Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi
光のモーションで画像を超カッコよくするPhotoShopチュートリアル:phpspot開発日誌
Creating light motion trails & glowing sparks | Veerle's blog A technique often used in advertising these days, is these glowing lines. 光のモーションで画像を超カッコよくするPhotoShopチュートリアル。 PhotoShopで光のモーションを作って画像をすごくカッコよくする流れが見れます。 本テクニックを使えば、まるで雑誌広告のようなクールな画像が作れてしまいます。 実際に上記のような画像を作るには練習が必要だと思いますが、マスターすればいろんなところで使えそうです。 関連エントリ スライムのような質感のWeb2.0風ロゴを作成するPhotoShopチュートリアル 硬い金属のような文字を作成するPhotoShopチュートリアル テキストにツララが重なっ
60の使える＆エレガントなウェブデザイン:phpspot開発日誌
Inspiration Package: 60 Usable & Elegant Designs We all love beautiful, usable and impressive web designs. 60の使える＆エレガントなウェブデザイン。SmashingMagazineより。 31Three North x East Youtilize.com Oaktree Creative CodeIgniter WebRevolutionary Pop Labs nPanorama.ru 続きを見る 最近のウェブデザインはやはり、「Web2.0風」がトレンドのようですね。 読みやすく、シンプルにまとまっていてどのサイトも参考になりそうなサイトばかりです。 関連エントリ WEBデザインの際に使える５０のソース 2007年3月、クリーンかつ印象的なデザインサイト集 PhotoShopで
利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」:phpspot開発日誌
利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」 2007年07月10日- Window.Growl 2.0 利用者にメッセージを分かりやすく伝えるJavaScriptライブラリ「Window.Growl 2.0」 「Window.Growl」を使えば、クリックするとフェードイン表示し、数秒後に消える、というようなメッセージボックスを簡単に実装できます。 実装コードは次のように超シンプル。 Growl.Smoke({ title: 'Window.Growl By Daniel Mota&apos', text: 'http://icebeat.bitacoras.com', image: 'growl.jpg', duration: 2 }); これはなかなか使えそうですね。 ライブラリには、mootoolsフレームワークを使用して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集:phpspot開発日誌
テキストの上に雪がのっかったようなロゴを作るPhotoShopチュートリアル:phpspot開発日誌