前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」:phpspot開発日誌
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」 2013年05月02日- PhotoCradle.js. An elegant wrap of your photo collection. 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」。 次へ、前へでどんな画像が表示されるのか気になりますが、予めポップアップで表示してくれる親切なスライダーを実装できます。 更に、画像下に表示されているサムネイルにカーソルを合わせると、他の前後の画像がうっすら表示されます。 何度もボタンを押して切り替えるよりもカーソルを合わせるとより多くの画像が一覧できるというのはなかなか便利そう 関連エントリ マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maski
POSTやファイルアップロード等がPHPから簡単に行えるHTTPライブラリ「Unirest」:phpspot開発日誌
Unirest - Simplified, lightweight HTTP libraries in multiple languages POSTやファイルアップロード等がPHPから簡単に行えるHTTPライブラリ「Unirest」 かなり簡単なコードでHTTPの操作が可能になるライブラリのご紹介。PHPだけじゃなくて、Java、Ruby、Pythonの他、Objective-Cにも対応。 次のようなコードで簡単にPOST操作ができます ファイルアップロードも簡単。。 これは知っておくと楽ができそうですね 関連エントリ 軽量で便利に使えるPHP用DB操作ライブラリ「Medoo」 レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 PHPのエラー画面をリッチにしてくれるライブラリ「PHP Error」
レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」:phpspot開発日誌
Unslider ? the super-tiny jQuery slider レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 クロスブラウザ・キーボードショートカット・タッチ等にも対応しており、最近の環境にマッチした使い方ができます。 コールバック、スピード調整等のオプションも指定可能。 シンプルなスライダーを実装する際にレスポンシブでタッチ対応というのはなかなかありがたいところですね 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 タッチ可能でレスポンシブなスライダー実装「RoyalS
Windows8のパネル風UIを作成するサンプル＆デモ:phpspot開発日誌
Fullscreen Layout with Page Transitions | Codrops Windows8のパネル風UIを作成するサンプル＆デモ。 タブレットなどでも使いやすいインタフェースを実現するためのサンプルが配布されています。 カッコいいのでそのままカスタマイズして使えそうです。 タッチ範囲が大きくないとタッチ端末では使いにくくなりますがこれだと十分な大きさですね 関連エントリ モダンなサイトを作成するためのCSS3チュートリアル集 CSS3でChrome風ウィンドウを作成するチュートリアル PHPでOAuthサーバを作成するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル テキストを円形に描画するチュートリアル
ペーストするテキストにフィルタをかけて変換できる「FilteredPaste.js」:phpspot開発日誌
FilteredPaste.js ペーストするテキストにフィルタをかけて変換できる「FilteredPaste.js」。 コピーしてペーストした際に、スタイルを消したり、付け足したり、定義関数によって自由に変換することができるjQueryプラグインです ペーストする際に無駄な特定タグを除去したりして予めフィルタする際に便利そうです 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDiff」 テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 テキスト表現力を豊かにするタイポグラフィ関連jQueryプラグイン１０ テキストを要
レスポンシブでクールなドロップダウンメニュー実装例:phpspot開発日誌
Drop-Down Navigation: Responsive and Touch-Friendly Osvaldas Valutis レスポンシブでクールなドロップダウンメニュー実装例 次のようなレスポンシブなドロップダウンメニューのデモです。デモページはこちら。 シンプルですがかなり良い感じに動いているみたいです。 そのまま使うのもいいですし、１から実装する際の参考にしてみてもよいかもしれませんね。 関連エントリ レスポンシブな画像ギャラリーが作成できるjQueryプラグイン HTMLメール用のレスポンシブテンプレート「Antwort」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなパララックス効果付きサイトを作るフレームワーク「Coo
シンプルで使えそうな５０のベクターアイコンセット:phpspot開発日誌
Simplicity Vector Icon Set | Web Icon Set シンプルで使えそうな５０のベクターアイコンセット。 次のようなイラストっぽいい感じのベクターアイコンがダウンロード可能です。 ピクトグラムといっても、ちょっとユニークなデザインのアイコンですね 関連エントリ Windows8風デザインのソーシャルアイコン９６個セット「Simple Icons」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 iPhone用のアイコン３００個セット「ICON BEAST」 汎用で使えそうなフリーのアイコンフォント「Genericons」 クオリティの高いミニアイコンセットからワード検索ができて便利な「Icons Explorer」 Webフォントとして使えるピクトグラムアイコンセット「MFG Labs icon set」
FlatなUIが美しいJSレスなUIライブラリ「TopCoat」:phpspot開発日誌
TopCoat FlatなUIが美しいJSレスなUIライブラリ「TopCoat」。 デスクトップ、モバイル対応でレスポンシブ、CSSで作られたUIライブラリです。 Bootstrapよりフラットなデザインが特徴でしょうか。Bootstrapのライバルとなるような物が出てきて、それぞれよい面を取り入れていってほしいですね 関連エントリ フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 BootstrapをベースとしたフリーのUIKit「Flat UI」
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
HTML5を使った超クールなフリーのWordPressテーマ集35:phpspot開発日誌
35 Free HTML5 WordPress Themes For Your Blog | Free and Useful Online Resources for Designers and Developers HTML5を使ったフリーのWordPressテーマ集35。 良い感じのテーマが集まっています。ぼちぼち今のテーマにも飽きて、もう、これからはHTML5だぜ、という方は試してみても良いかも。 関連エントリ 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 HTML5を使ったクールなサイトデザイン集２１ クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 WebCamで撮影をHTML5で実現するデモ HTML5のゲームエンジン「Quintus」 フリーでHTML5ベースのリッチな管理画面テンプレート オープ
テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」:phpspot開発日誌
Sieve jQuery Plugin テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」。 テーブル行数が多いと探すのが大変だったりしますが、このプラグインでインクリメンタル検索で表示要素を絞り込むことができるようになります。 地味に便利で簡単に実装できるので覚えておくとよさそう 関連エントリ HTMLのあらゆるエレメントに注釈を入れられるjQueryプラグイン「Chardin.js」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter
親ボックス要素内に複数の要素を縮小して格納できる「VerticalShift」:phpspot開発日誌
VerticalShift jQuery Plugin 親ボックス要素内に複数の要素を縮小して格納できる「VerticalShift」 １つのdiv内に沢山のエレメントが格納されている場合もこのプラグインで初期化すると、幅を狭め、親エレメント内におさめてくれます ただ小さくするだけでなく、マウスオーバーで対象エレメントが拡大されます 本棚のようなインタフェースを実現する際に使えるかもしれませんね 関連エントリ 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 画像レイアウト関連で便利なjQueryプラグイン等まとめ
リアルタイムにCSSを編集してサーバに保存できる「bluePen」:phpspot開発日誌
bluePen Editor | online visual CSS editor ? bluePen Editor リアルタイムにCSSを編集してサーバに保存できる「bluePen」 CSSを編集→サーバにアップ、という作業が通常ですが、このツールであれば、ブラウザ上で呼び出して編集→保存ボタンで即反映、なんていう事が可能になります PHPをサーバに設置してCSSを直接書き換えてしまうという方法で実現されています。WP、Drupalのプラグインの他、独自実装も可能。 ちょっと気が向いた時に編集ができる、というのは開発効率が上がりそうですね。 第三者につかわれてしまわないように注意が必要ではありますが、なかなかおもしろい仕組みです 関連エントリ JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」
Googleカレンダーっぽい物や日付ピッカー等カレンダー関連のjQueryプラグイン集15:phpspot開発日誌
15 Useful JQuery Calendar and Date Picker Plugins - DesignM.ag Googleカレンダーっぽい物や日付ピッカー等カレンダー関連のjQueryプラグイン集15がまとまっていました。 今日では実に沢山のカレンダー関連プラグインが存在するので、カレンダー関連のプラグイン実装の際の参考にできそうです。 関連エントリ レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダーやDateピッカー関連のjQueryプラグイン20 これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」
フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」:phpspot開発日誌
ququplay/jquery-mobile-flat-ui-theme GitHub フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」。 jQueryモバイルのテーマとして利用できます。なんというシンプルで美しいUIなんだろうと思ってしまいました。 デフォルトのjQueryモバイルテーマは見飽きたという方は試してみても良さそう UIはこうしてライブラリがどんどん出てくる、という中で、WEBエンジニアとして出来ることを今後考えなくてはいけないな、と思いますね 関連エントリ スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン GoogleAnalyticsの結果をjQueryMobileでモバイル端末で表示するサンプル モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery Fastbutton」
レスポンシブな画像ギャラリーが作成できるjQueryプラグイン:phpspot開発日誌
jQuery Responsive Thumbnail Gallery Plugin レスポンシブな画像ギャラリーが作成できるjQueryプラグイン。 jQueryプラグインを使えば簡単にできる事は多くなりましたが、レスポンシブでもできるものはこれからどんどん出てきそうですが、その１つといえそう。 画像の下にサムネイルがあってクリックするとその画像に切り替わるというシンプルなものですが、レスポンシブに動いてくれて便利に使えそう レスポンシブじゃなきゃ使ってもらえない、なんていう時代がもうそこにあるのかも 関連エントリ HTMLメール用のレスポンシブテンプレート「Antwort」 レスポンシブでクールなCMS「Bolt」 レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 レスポンシ
美しいSVG背景パターンギャラリー「SVG Patterns Gallery」:phpspot開発日誌
SVG Patterns Gallery 美しいSVG背景パターンギャラリー「SVG Patterns Gallery」 パターンをクリックで背景に設定してお試しでき、気に入れば background-image: url(data:image/svg+xml.... の形式でコードを簡単に入手出来ます コードの例。インラインで使いやすそうです 関連エントリ 高級っぽさを演出できるPhotoshopパターン500 CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 色をベースにフリーの背景画像や色パターンが検索できる「ColRD」 青ベースのPhotoshop背景パターン１００種類
オーバーレイするグリッドの超クールなデモ:phpspot開発日誌
App Showcase with Grid Overlay オーバーレイするグリッドの超クールなデモ。 はじめてこういうのは見た気がしますが、なかなかクールなのでデモだけでも見ておくとよさそう。 見せ方として面白いデモになっていて、ソースも公開されているので応用してみると面白い物ができそう 有り物や流行りを使うだけではなく、こういう物を自分で考えて作れるデザイナーというのは価値が高そうですね 関連エントリ 垂直アイコンメニュー実装デモ＆サンプルプログラム「Vertical Icon Menu」 ブラウザ上でまるで美術館。3Dイメージギャラリーデモ PayPalの読込中アイコンをCSSで実現したデモ フルスクリーンでページめくりをするUI実装デモ レスポンシブ＆タッチフレンドリなWEBベースの音楽プレイヤー実装デモ これは新しい!パネルレイアウトが美しいスライドショー実装デモ 既にここまで
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」:phpspot開発日誌
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 2013年04月11日- kamens/jQuery-menu-aim GitHub 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 次のような新しいamazonのメニュー。amazonといえば品揃えや安さだけでなく、秀逸なUIによって売上を伸ばしてきたといってもよいと思いますが、新しく実装されたドロップダウンメニューLikeなものを実装できるプラグインです。 デザインは違いますが、動作は同じです。 なかなか汎用的に使えそうなデザインですね。 関連エントリ HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 シンプルだけどデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
selectボックスをiPhoneのOn/OffスイッチっぽくできるjQueryプラグイン「switchy」:phpspot開発日誌