JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌CSSUI - Pure CSS interactive components JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」 そこまでJSを使わない必要があるのか、と逆に思ってしまいますが、リッチなUIがCSSのみで作れてしまいます
PCでもスマホでもスワイプできるギャラリー実装プラグイン「jQuery.swapgallerywithdots」:phpspot開発日誌
jQuery.swapgallerywithdots PCでもスマホでもスワイプできるギャラリー実装プラグイン「jQuery.swapgallerywithdots」。 スマホ用のサイト等でよく見るあのインタフェースをサクっとjQueryで実装するプラグインです。 これさえ知っておけば特別な事はしなくても簡単に実装できるということで覚えておいて良さそう 関連エントリ HTML5＆CSS3なクールでレスポンシブが良い感じのイメージギャラリー実装jQueryプラグイン「least.js」 画像を細長切りにしたオシャレなギャラリーを作れるjQueryプラグイン「Stripte」 Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 レスポンシブな画像ギャラリーが
CSSアニメーションでページを紙芝居の様に切り替えるデモ:phpspot開発日誌
A Collection of Page Transitions | Codrops CSSアニメーションでページを紙芝居の様に切り替えるデモ。 迫力のある全画面切り替えをCSSで実現しており、そのアニメーションの種類も豊富で良いサンプルになっています。 デモとして学習用にもよさそうですが、Windows8っぽいプレゼン資料なんかを作る際にも使えそうです デモページ 関連エントリ Yahooが作ったピュアCSSのUIライブラリ「Pure」 エレメント上にラベルを付けるためのCSS「Label.css」 Flashみたいに美しいCSSテキストアニメーションデモ HTML/JS/CSSでAndroidアプリ風UIを作るフレームワーク「Fries」 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」
フラットが美しすぎるアイコン24個セット:phpspot開発日誌
Free PSD: 24 Flat Icons | Premium Pixels フラットが美しすぎるアイコン24個セット。PSD形式で配布されているそう。 iPhoneの時期OSがフラットになるとか、マイクロソフトやグーグルは既にフラットだとか、フラットの合理性に注目があつまっていたりしますが、フラットでもこれだけ美しくできるのだなと再確認させられるアイコンセット。 今後出てくるアイコンなんかもこうした美しいフラットアイコンだとWEBサイトやアプリも作りやすく、シンプルに美しくなるのかも。 関連エントリ シンプルで使えそうな５０のベクターアイコンセット アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル 地図と共に使えそうな２００のフリーベクターアイコン集 汎用で使えそうなフリーのアイコンフォント「Genericons」
アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル:phpspot開発日誌
Responsive Retina-Ready Menu | Codrops アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル アイコンフォントなら拡大縮小しても劣化はないということで、CSSとJavaScriptを使ってうまくアイコンもリサイズして綺麗にレスポンシブに、更にRetinaにまで対応してくれるデモです。 UIデザイナーな方はやること増えて大変ですが、チュートリアルをベースにライブラリも出てくれば対応は楽になりそうですね。 それにしても色んなテクニックやディスプレイが出てきたりと、この業界考えることが増えて大変ですね 関連エントリ 3DのソーシャルメディアボタンをCSS3で作成するチュートリアル モダンなサイトを作成するためのCSS3チュートリアル集 テキストを円形に描画するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニ
レスポンシブでクールなドロップダウンメニュー実装例:phpspot開発日誌
Drop-Down Navigation: Responsive and Touch-Friendly Osvaldas Valutis レスポンシブでクールなドロップダウンメニュー実装例 次のようなレスポンシブなドロップダウンメニューのデモです。デモページはこちら。 シンプルですがかなり良い感じに動いているみたいです。 そのまま使うのもいいですし、１から実装する際の参考にしてみてもよいかもしれませんね。 関連エントリ レスポンシブな画像ギャラリーが作成できるjQueryプラグイン HTMLメール用のレスポンシブテンプレート「Antwort」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなパララックス効果付きサイトを作るフレームワーク「Coo
オーバーレイするグリッドの超クールなデモ:phpspot開発日誌
App Showcase with Grid Overlay オーバーレイするグリッドの超クールなデモ。 はじめてこういうのは見た気がしますが、なかなかクールなのでデモだけでも見ておくとよさそう。 見せ方として面白いデモになっていて、ソースも公開されているので応用してみると面白い物ができそう 有り物や流行りを使うだけではなく、こういう物を自分で考えて作れるデザイナーというのは価値が高そうですね 関連エントリ 垂直アイコンメニュー実装デモ＆サンプルプログラム「Vertical Icon Menu」 ブラウザ上でまるで美術館。3Dイメージギャラリーデモ PayPalの読込中アイコンをCSSで実現したデモ フルスクリーンでページめくりをするUI実装デモ レスポンシブ＆タッチフレンドリなWEBベースの音楽プレイヤー実装デモ これは新しい!パネルレイアウトが美しいスライドショー実装デモ 既にここまで
テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン:phpspot開発日誌
Expanding Textareas jQuery Plugin テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン。 文字の量に応じて自動でリサイズするテキストエリアはブラウザ標準でも付けてもらいたいぐらい便利なのですが、最低の高さを設定したり、リサイズ時のコールバックを設定したりできるプラグインのご紹介。 テキストをいれてなくても最小のサイズが指定できるのは便利。 リサイズされた時のコールバック設定により、現在の行数なんかを表示することもできますね 関連エントリ textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」:phpspot開発日誌
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 2013年02月18日- Textillate.js CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」。 実に様々なテキストアニメーションが実現できてページにアニメーションエフェクトを付けたい際に便利。 CSS3非対応ブラウザは動作しませんが、そもそもスマホ等向けのサイトであれば活用できそう アニメーションの種類が実に様々。 Chromeなどで見るとアニメーションの滑らかさも素晴らしい。 関連エントリ 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 テキストを燃え上がら
吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」:phpspot開発日誌
Toolbar.js - jQuery plugin to create tooltip style toobars 吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」 次のように、初期化位置にカーソルを合わせるとポップアップするツールバーを設定でき、そこからアクションを選べます。 ありそうであまり無かったプラグインかもしれませんね。 縦バージョンにもできます これは便利に使えそう 関連エントリ UIがカッコいいオートコンプリート実装jQueryプラグイン「Ajax AutoComplete」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「Par
Google風のBootstrapテーマ「GoogleBootstrap」:phpspot開発日誌
Bootstrap Google風のBootstrapテーマ「GoogleBootstrap」。 Bootstrapベースに組まれているようですが、Google関連サイトライクなUIに出来る模様。 気づかない人はわからないかも、な変更ですが、分かる人には分かる、といった感じでしょうか。 Bootstrapの勢いは今年も続きそう 関連エントリ TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Twitter Bootstrapじゃなくfacebook Bootstrap？「Fbootstr
これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ:phpspot開発日誌
16 Ridiculously Impressive CSS3 & HTML5 Experiments | Free and Useful Online Resources for Designers and Developers これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ 数年前なら誰もがFlashで出来ていると疑わなかったようなデモがHTML5＆CSS3で実現されています。 これだけのことがWEBでできるんだという部分を把握しておく意味でも見ておいたほうがよさそうです これだけ出来ることが増えていくと自由な反面、WEBも開発コスト等があがっていきそうで怖いところがありますね 関連エントリ WebCamで撮影をHTML5で実現するデモ HTML5を使ったクールなサイトデザイン集２１ HTML5のゲームエンジン「Quintus」
コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」:phpspot開発日誌
jQuery Stick ’em: Make Content Sticky on Scroll, to a Point | Viget コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」。 最近よくある、ページをスクロールしてもついてくるサイドバー。position:fixedなどを応用して綺麗についてくるようにできますが、コンテンツが大きく３つに分かれている場合はちょっと実装が難しいかも。 そんな時に使えるのがこのプラグイン。デモページを見て頂ければ分かりますが、コンテンツごとに固定されるサイドバーをわけられるようです。 スクロールしても、サイドバー「Heading」と書かれた部分は右側に固定されて表示されます。 更にスクロールするとコンテンツが別れるので、それ以上は下に来ません。 １から実装するとなるとpositionの切り替えが結構大変で挫折しがちな
サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」:phpspot開発日誌
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
Eメールの入力間違えを防いでくれるjQueryプラグイン「mailcheck」:phpspot開発日誌
How we decreased sign up confirmation email bounces by 50% - Kicksend Blog Eメールの入力間違えを防いでくれるjQueryプラグイン「mailcheck」。 hotmailがhotnailになっていたり、yahooがyhooになっているのを検出してくれます。 よくありがちな間違いかと思うのでサイトのメール入力欄に入れておくと問題を解消できそう 英語仕様ですが、配列を次のように定義してあげれば対応できそうです。 docomo.ne.jp とか yahoo.co.jp とか自由に入れるだけです 関連エントリ 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」 ページめくりを実現するためのjQueryプラグイン集 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン
フォームをカッコよくするjQueryプラグイン集１５:phpspot開発日誌
15 Simple & Effective jQuery Plugins that Enhance Your Forms | Onextrapixel - Web Design & Development Online Magazine フォームをカッコよくするjQueryプラグイン集１５。 デフォルトのフォームってかっこ悪いですが、TwitterBootstrapばりにカッコよくしてくれるjQueryプラグインが色々。 既に紹介されているものも含まれていますが、新しいものもあるようなので是非チェックしてみましょう。 関連エントリ デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 時間の入力を楽にすることが出来るjQueryプラグイン アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」
ブラウザサイズに応じて全体に広がる背景を実装できるjQueryプラグイン「Backstretch」:phpspot開発日誌
ブラウザサイズに応じて全体に広がる背景を実装できるjQueryプラグイン「Backstretch」 2012年03月21日- Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page ブラウザサイズに応じて全体に広がる背景を実装できるjQueryプラグイン「Backstretch」 他にも同様のプラグインがありますが、まず使い方が超簡単で、「$.backstretch(http://dl.dropbox.com/u/515046/www/garfield-interior.jpg);」って必要なプラグインをロードした後に書くだけです。 配列として渡すことでスライドショーさせることもできます。 昔ならこんな大きな背景画像を使ったら怒
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」:phpspot開発日誌
画像をRetina用にリサイズしてくれるフリーのPhotoshopアクション「Retinize It」:phpspot開発日誌
Windows8風デザインのソーシャルアイコン９６個セット「Simple Icons」:phpspot開発日誌