超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」:phpspot開発日誌
Percentage Loader 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 次のようなカッコいいローディングが簡単に実装できます。Canvas描画なのでサイズ変更等も自由にできるみたい 超シンプルに実装可能です なんとなくローディング後の画面を期待させる物となっていますので、ローディング後も気合を入れたいところですね 関連エントリ HTML5でプログレスバー付きファイルアップロードを実現する例 プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」
フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル:phpspot開発日誌
Fullscreen Image Blur Effect with HTML5 | Codrops フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプルが公開されています。 画像切替の際のぼかしアニメーションがなかなかいい感じです。サンプルをダウンロードできるので写真を置き換えればそれっぽく利用することができそうです FlashかHTML5なんていう話にもなったりしますが、画面のデザインがある程度CSSででき、画像の指定もHTMLでかけちゃうっていうのはデベロッパー側としては嬉しい場面も多そうですね 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 Flash使って
手書き風だけど綺麗にデザインされたソーシャルアイコンセット「Setway Icon Set」:phpspot開発日誌
design deck | Setway Icon Set 手書き風だけど綺麗にデザインされたソーシャルアイコンセット「Setway Icon Set」 次のようなfacebook,twitterを含むソーシャルアイコンセットです。 クセが強すぎず、どんなサイトでも使えそうという印象です ソーシャルメディアの重要性が上がるにつれてこうしたアイコンセットが増えてきている気がします。 関連エントリ 3Dの立体感が面白いソーシャルアイコンセット デザインが超良い感じのFacebook、Twitter等のソーシャルアイコン用PSDセット シンプル白黒がいい感じのソーシャルアイコン37個セット「LinkDeck」
レスポンシブWEBデザインのサンプル26:phpspot開発日誌
26 Responsive Web Designs - Web Design Blog ? DesignM.ag レスポンシブWEBデザインのサンプル26 パソコン、スマホ等のデバイスでアクセスされた際にCSSを使ってフレキシブルにデザインを変えるというレスポンシブWEBデザイン。 それぞれのデバイス専用の画面を用意するのではなく、画面幅等で判断してCSSを切替えられれば開発側としてみれば手間が少なくなり合理的な開発が行えますね。 そうしたレスポンシブWEBデザインを上手く使ったサイト集がまとまっていましたのでご紹介です。 今後ますますスマホが重要度を増し、こうした考え方がWEBデザインをする上で必須の物になってくるような気がしますね。 関連エントリ お洒落なECサイトデザイン集３８ 次のサービスに使えるかもしれないロゴデザイン集２２ 奥行きをうまく使ったサイトデザイン集３０
jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」:phpspot開発日誌
jqPagination, a jQuery pagination plugin (obviously) jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」。 次のようなインタフェースのページ送りのインタフェースを簡単に実現できます。 クリック時にコールバックを指定して何ページ目がリクエストされたかを知ることが出来るので、指定ページにJSで飛ばすだけという流れです 実装は次のように決められたマークアップをコードして、コールバックを指定しつつ初期化するだけです。 デザイン等はCSSで調整できそうです。 標準のデザイン的にはスマホなどで使えそうなものになってますね 関連エントリ 面倒なページ分けを簡単実装できる10のスクリプト集
汎用に使える４５０のアイコンセット「Nortwood icons」:phpspot開発日誌
汎用に使える４５０のアイコンセット「Nortwood icons」 有償で１つ＄９、１セット１５０個のアイコンセットです。 有償ですが、かなり安くハイクオリティなベクターアイコンが揃えられるのでスマホ用やサイト用に色々と使えそうです フリーアイコンへのニーズが高いのですが、その分有料アイコンを使っておくと、どこかで見たアイコンだ、というのは避けられそうですね Volume 1 Volume 2 Volume 3 関連エントリ デザインが超良い感じのFacebook、Twitter等のソーシャルアイコン用PSDセット アイコンをフォントで実現すると便利だと分かるサンプル 秀逸なiOSアプリケーションアイコンのサンプル色々
Windows8風のシンプルさがナイスなアイコンセット「Icons8」:phpspot開発日誌
Icons8 | Order Icons for Windows 8 for Free Windows8風のシンプルさがナイスなアイコンセット「Icons8」。 現在１４９種類あり、どんどん増えています。ここ最近、こういうシンプルなアイコンはGoogle+といい、色々な場所で増えてきてますね。 毎日見るものは派手じゃないほうがいい場合もありますし、好き嫌いがわかれないという利点もシンプルな物にはありそうです 沢山の人に使ってもらわれるようなサービスを作る場合はこういうシンプルなものがいいかもしれませんね。 関連エントリ デザインが超良い感じのFacebook、Twitter等のソーシャルアイコン用PSDセット ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」 アイコンをフォントで実現すると便利だと分かるサンプル
ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」:phpspot開発日誌
HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
カッコいいグラフィックスを作成する新しめのPhotoshopチュートリアル５０:phpspot開発日誌
50 Most Impressive Photoshop Tutorials of 2011 | The Design Inspiration カッコいいグラフィックスを作成する新しめのPhotoshopチュートリアル５０。 次のようなカッコいいグラフィックスを作成するチュートリアルが色々とまとまっていました。 参考にできそうでしたのでご紹介です 関連エントリ プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集 カッコイイWEB管理画面を作成するPhotoshopチュートリアル 広告デザインのためのPhotoshopチュートリアル１５
Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」:phpspot開発日誌
Red Plugin Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」 YoutubeのAPIを使って独自の再生ボタンを作ったり、再生時間なんかを表示させたり、埋め込み動画をその場でリサイズしたりすることが可能です 独自のテキストベースの再生・停止ボタン 現在の動画時間のリアルタイム表示 右下のつまみをドラッグ＆ドロップで動画をリサイズ（これは便利） APIを調べるのが億劫でも比較的簡単に実装できそうです 関連エントリ APIを使わずにYoutube動画のサムネイルを得る方法 Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」
画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」:phpspot開発日誌
Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、Youtubeの動画なんかも次のようにスライドショーさせることができてます。 単に写真を配置するよりもこうしたものを使うほうがよりよく写真を見てもらうことができるのかも。 インデックスもついていて、カーソルを合わせるとツールチップでサムネイルが表示されるなどのこだわりも見られます。 関連エントリ 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 迫力あるフルスクリーンの背景スライ
モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」:phpspot開発日誌
Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 Safari on iOS 、Android Browser、 BlackBerry Browser、 Internet Explorer on Windows Phone、Opera 、Firefox AndroidといったモバイルブラウザでのWEBストレージやWEB SQL、WEBソケットなど、対応状況が一目でわかって使う技術の選別に役立ちそうなチャートが公開されています。HTML5だけでなくCSS3についても記述されています。 モバイル用サイトやWEBアプリを作る際に参考にできますね。 関連エ
CSS3を使ったクリエイティブなテキストエフェクト集２３:phpspot開発日誌
23 Creative Uses of CSS3 Text Effects to Enhance Your Web Presence | Onextrapixel - Showcasing Web Treats Without A Hitch CSS3を使ったクリエイティブなテキストエフェクト集２３。 CSS3でいろんな事ができるのはご存知の通りですが、テキストだけでもかなり色々な使い方があって勉強になります。 ↓ 例えば、これが画像じゃないらしいです（笑） 他にも使えるテクニックが満載 早くすべてのブラウザでCSS3が使える時代が来てほしいですね。 もちろん、画像でやったほうが楽なところは画像でやっちゃいますが、楽出来る部分はかなり楽になりそう 関連エントリ CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル 味気ないサムネイルリストをCSS3で回転させてオシャレにす
WEB管理画面のテンプレート２２:phpspot開発日誌
22 Awesome Admin Panels For Web Developers | ZoomZum WEB管理画面のテンプレート２２がまとまっていました。 すでに紹介したものもあり、ほとんどが有償ですが、デザインの参考にしたり、１から作るのに比べれば相当安価なので便利だと思います。 管理画面のデザインはちょっと普通のサイトと違うパターンであったりするので学習素材としてもよさそうです。 デザインは奥が深いですね。 関連エントリ CSSデザインの実用的な管理画面テンプレート１０個 管理画面やダッシュボードのハイクオリティなテンプレート色々
Mac OS X Lionな感じのボタンを実現できる２００種のボタン素材:phpspot開発日誌
Apple OS X Lion Buttons in CSS | Improve your UI | Pixify Mac OS X Lionな感じのボタンを実現できる２００種のボタン素材。 次のようなボタン素材がダウンロード可能です。CSSスプライトによって実装されているので毎度新しい画像を読み込む必要もありません。 ライセンスは、Creative Commons CC-BY 。IEでも表示の差はありますが動くようです 関連エントリ 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン コピペで使えるCSS3ボタン６つのレシピ ステップで学べるCSS3ボタンのデザインチュートリアル
フリーの写真素材が入手出来る30サイト:phpspot開発日誌
30 Websites To Download Free Stock Photos フリーの写真素材が入手出来る30サイトがまとまってました。 すでにご存知のところもあるかもしれませんが、全部網羅したエントリを知っておくと探すときに便利ですね。 stock.xchng Studio7designs Woophy 沢山あるものですね。 関連エントリ フリーフォト、無料写真素材サイト「足成」 5000枚以上のパブリックドメインな写真素材集「Free Stock Photos」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のブラウザ別対応がアイコンで超分かりやすいサイト:phpspot開発日誌
手書き風の筆記体フォント色々:phpspot開発日誌