ビフォーアフターをわかりやすく表現できるjQueryプラグイン「Before/After」:phpspot開発日誌
jQuery Before/After Plugin ビフォーアフターをわかりやすく表現できるjQueryプラグイン「Before/After」が公開されてます。 このプラグインを実装すると中央にツマミが現れます。修正前・修正後という形でインタラクティブに見分けることができます。 ドラッグで移動すると、画像が切り替わります。 面白いですね。いざ実装するとなるとかなり大変そうですが、jQueryプラグインなので次のように１行というところが素晴らしいです。 $(function(){ $('#container').beforeAfter(); }); 関連エントリ そのまま編集が可能なテーブル実装用jQueryプラグイン「Zentable」 複雑な数式を出力したい際に使えるjQueryプラグイン「jsLaTeX」
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル:phpspot開発日誌
Making A Cool Login System With PHP, MySQL & jQuery ? Tutorialzine jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実装演習になってます。 ログインボタンを押す ヘッダーからそのままログインフォームが降りてきてそこからログイン可能です。 ソースコードのダウンロードも可能です。 関連エントリ ログインフォームのデザイン集１００種 Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル 超クールなログインフォームを作成するチュートリアル
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
グラデーションをうまく使って立体感を出したサイトデザイン集:phpspot開発日誌
25 Great Examples of Using Gradient Effects in Web Designs グラデーションをうまく使って立体感を出したサイトデザイン集。 うまくグラデーションを使うことで、質感の表現や、ゴージャスな印象を生み出しています。 ECTOMACHINE クールな画像とともにグラデーションされた背景が印象を強くしています Reinvigorate うまくグラデーションと背景イメージを混ぜ合わせたデザイン 単色にするよりグラデーションの方が高級感が出ているのが分かります Central Snowsports 平面ですがうまく立体的にしてさらにそれが分かりやすいメニューになっている点が参考にできそう Tim Van Damme コントロールパネルっぽいデザインを立体的にデザインしている例 シンプルで分かりやすいページ構築の際の参考になるかも Rise Crea
木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット:phpspot開発日誌
600 Nature Brushes for Photoshop 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセットが紹介されていました。 写真に映して、切り取ってオリジナル素材作成なんてことも出来ますが、こうしたものを利用すればお手軽に自然が表現できてしまいますね。 木に関するブラシ Complete Tree Brush Pack リアルな樹木を一発描画できますね Trees Brushes 色々な形の、ロゴ横なんかにつかえそうな綺麗なブラシ 葉っぱに関するブラシ Leaves Brushes 色々な形の葉っぱ型ブラシ Leaves Brushes リアルな形をした葉の形のブラシ 雲に関するブラシ Cloud Brushes リアルな雲が描画できます Beautiful Clouds 山に関するブラシ Mountain Brushes Vector Mountains 雪
5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル:phpspot開発日誌
A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg
１クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集:phpspot開発日誌
30 Photoshop Actions for Touch Ups and Enhancements - Part 2 １クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集が公開されています。 色合いの微調整で調整していくのもいいですが、数あるアクションをそれぞれ試してみてどれがいいかを見比べる、なんていうアジャイル(?)なレタッチ方法があってもいいのかも。 50 Photoshop Postwork Actions 50ものアクションが詰まったアクションパック SA-Cool Action 1.06 写真をクールな印象に仕立てるアクション Pack Actions 01 １１のアクションが含まれている。次のようなエフェクトをそれぞれかけられるみたい SA-Cool Action 2.06 写真を色々な色調に仕立て上げてくれるアクション集。 全部見る deviantA
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」:phpspot開発日誌
クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」 2009年03月18日- Visifire クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」。 以下にある画像のような、ちょっと他ではなかなか無いグラフを提供してくれます。フリーで使えます。 画像編集ソフトを使えば綺麗なグラフはかけるかもしれないのですが、相当大変です。 が、このライブラリを使ってxmlでデータを書いておけばグラフ描画できます。 データ作成ツールもあるので、xmlも面倒っていう場合にも使えます→ Chart Designer もっとギャラリーを見る ネックはSilverLightなのですが、一旦描画したものをキャプチャして画像に変換してから使ってもよいぐらいクオリティが高いですね。 今後、SilverLightが一般的になっていくことも考えられ、覚えてお
チェックボックスを綺麗に並べるCSSサンプル:phpspot開発日誌
Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集 CSSでフォームデザインをする際のチュートリアル
クールな名刺を作る際のチュートリアル集:phpspot開発日誌
11 Tutorials for Business Card Design | Vandelay Design Blog クールな名刺を作る際のチュートリアル集が公開。 かなり奇抜なデザインが多く、デザイナーの方なんかが持っておくとデザインのスキルをアピールを出来るだけでなく、覚えてもらえそうな名刺を作れそう。 Design a Print Ready Business Card for Designers Making a Grungy Business Card Making a Print-Ready Business Card Using Only Photoshop 全部見る 最近は家庭用プリンタでもきちんとした印刷が出来るのでありがたいですね。 関連エントリ 凄くクールな名刺を作成するPhotoShopチュートリアル
エクセレントな４５のイラストレーターのブラシ集:phpspot開発日誌
45 Excellent Sets of Adobe Illustrator Brushes エクセレントな４５のイラストレーターのブラシ集。 次のようなハイクオリティのブラシセットの紹介です。 どれも応用範囲は広く、活用すればデザインの仕事もすぐ終わってしまうかもしれません。 35 Free Abstract Illustrator Brushes 104 Incredible Retro-Style Pixelated Illustrator Brushes 30 Illustrator Pattern Brushes for Making Flowers and Circular Designs Fresh Brushes Floral n Veins Brushes ClickPopMedia Brushes 16 Sketchy Illustrator Brushes Illus
超クールなWordpressテーマ「Cellar Heat」がPSD付きで公開中:phpspot開発日誌
Cellar Heat: A Free WordPress Theme | Freebies | Smashing Magazine And we try to do our best to make the Web design community stronger and the Web a little bit prettier.超クールなWordpressテーマ「Cellar Heat」がPSD付きで公開中。 次のようなクールなテーマになってます。 次のような明るいバージョンもあるみたいです。 PSDつきなので、自由にカスタマイズも可能ですね。 関連エントリ 非常に美しいWordPressテーマ「Outdoorsy」 WordPressの素材集 クリエイティブなWordPressで構築されたデザインサイト集
ハイクオリティなフリーのPhotoshopファイルが一杯:phpspot開発日誌
30 Free High Quality .PSD Files to Grab Part:2 | Naldz Graphics ハイクオリティなフリーのPhotoshopファイルが一杯。 次のようなグラフィックが画像だけでなく、Photoshopファイル(PSD)付きで公開されています。 解析してスキルを上げるなり、加工して遊ぶなり色々と出来そうですね。 関連エントリ 使えるPhotoshopのテクニックが満載のブログ「PSD learning」 サイト作成に便利に使えるPSD付きアイコン集
コーポレートサイトでも使える20のWordpressテーマ:phpspot開発日誌
20 Free Corporate WordPress Themes | TechZoomIn These are the 20 Great corporate WordPress themes I came across at Blogsessive. コーポレートサイトでも使える20のWordpressテーマがまとめられていました。 どれもシンプルですが、分かりやすいデザインとなっています。 プレビュー＆ダウンロードはこちら 関連エントリ 非常に美しいWordPressテーマ「Outdoorsy」 凄くクールなフリーのWordpressテーマ「Infinity」 ノートをイメージしたカッコいいWordpressテーマ「Notepad Chaos」
一流のサイトデザインを一から作成する手順集:phpspot開発日誌
The 60 Best Photoshop Tutorials to Design Your Own Amazing Site | 一流のサイトデザインを一から作成する手順集。 次のようなクールなサイトデザインをPhotoshopで作っていくチュートリアル集が公開されています。 Photographer Portfolio layout Unique Grungy Website Layout Game Layout with Scratched Menu Wedding Layout Simple Business Style Agency Layout 全部見る 参考に作ればデザインの苦手な人でもそこそこのページが出来そうですね。
うずまき型のPhotoshopブラシいろいろ:phpspot開発日誌
400 Swirls, Curls, and Fleurons | Design Reviver Ornamental web design is often comprised of swirling, curling, or flower shaped elements. うずまき型のPhotoshopブラシがいろいろと紹介されています。 Curly Brushes Floral Deco Brushes Floral Deco Brushes 2 Decorative swirls Vine Love Brushes 全部見る 背景なんかに使うとオシャレなサイトが出来そうですね。 関連エントリ ゲームみたいな可愛いPhotoshopブラシ集 クオリティの高いPhotoShopブラシいっぱい PhotoShop用、超クールなフラクタルブラシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プレミアムなWordpressテーマ集ｘ７:phpspot開発日誌