110のビンテージカラー背景素材集:phpspot開発日誌
110 PS CS Vintage Colored Motive Pattern by Hexe78 on deviantART 110のビンテージカラー背景素材集。 次のようなシンプルですが、特徴のある背景画像集がダウンロード可能です。色合いを加工すればビンテージ感とは趣向を変えて便利に使えそうですね 関連エントリ 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 オシャレでモダンな背景画像パターン集「The Pattern Library」 背景画像を指定要素のサイズにフィットさせられる「jquery.background-fit」 画像にあえてBlur効果をつけて背景画像にできるjQueryプラグイン「Blurr」
レスポンシブに要素を消さずに変形するテーブル実装jQueryプラグイン「Basic Table」:phpspot開発日誌
Basic Table Demo レスポンシブに要素を消さずに変形するテーブル実装jQueryプラグイン「Basic Table」。 テーブルのレスポンシブ対応は厄介で色々な対応方法がありますが、なかなかスマートな対応ができるプラグイン。 次のように一見普通のテーブル。 ブラウザの幅を狭めると、次のように変形します。 テーブルにmaxHeightを設定して、縦に大きくなり過ぎないような配慮も出来ます。スマホなのでは縦に長すぎると困ることもあるので、便利ですね 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 複数条件で結果を絞
シンプルなツリービューを実現できるjQuery「Bonsai」:phpspot開発日誌
jQuery Bonsai by aexmachina シンプルなツリービューを実現できるjQuery「Bonsai」。 olなどで階層的にリストを定義して初期化すれば簡単にツリービューが作れます。 ツリーにチェックボックスをつけることも可能。シンプルなだけに使い勝手がよさそう シンプルなリスト チェックボックスありのリスト 関連エントリ キーボードでも操作できるツリービュー実装jQueryプラグイン「a11yTree」 OS標準のツリービューが実装できるjQueryプラグイン「fancytree」 ULリストをツリービュー状に開閉できるようにするjQueryプラグイン「Sapling」 階層データを複数選択できるUIを実装できるjQueryプラグイン「treeselect.js」
ブロック要素の高さをレスポンシブに揃えられる「jquery-match-height」:phpspot開発日誌
liabru/jquery-match-height GitHub ブロック要素の高さをレスポンシブに揃えられる「jquery-match-height」 以下のように、高さの異なるブロックも瞬時に同じ高さに揃えて統一感が出せます ブラウザのリサイズで要素もリサイズされるので便利。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」 フラットでレスポンシブなギャラリー実装jQueryプラグイン「lightGallery」 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブでタッチフレンドリな軽量LightB
フルスクリーンでかつスクロールする迫力あるギャラリー実装が可能になる「Intense Images」:phpspot開発日誌
Intense Images フルスクリーンでかつスクロールする迫力あるギャラリー実装が可能になる「Intense Images」 単なるフルスクリーンではなく横長の画像であればマウス位置に追従してスクロールするというカッコいいギャラリーが作れます。 写真メインのサイトではこれぐらい写真が大きいと見やすいな、というのが実感できます。 関連エントリ 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」
超カッコいいテキストアニメーション効果を作れるjQueryプラグイン「LetterFX」:phpspot開発日誌
LetterFX jQuery Plugin | TuxSudo Web Development 超カッコいいテキストアニメーション効果を作れるjQueryプラグイン「LetterFX」。 豊富なアニメーションを選んで、更にそれらをカスタマイズして動かせます。サイト上でパラメータをいじりながら遊んだりできます。 テキストを動かしてインパクトを与えたい場合に覚えておいて損はなさそう 関連エントリ Flashみたいに美しいCSSテキストアニメーションデモ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」
ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」:phpspot開発日誌
Responsive tables ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 レスポンシブなテーブルというと、どうせ何か削るんでしょう、と思うところですが、主要項目を隠しつつも、見たい項目を選択して表示できるレスポンシブ方式。 テーブルは悩みどころではありますが、１つの解決策として知っておくとよさげ。 デザインもBootstrapベースで使いやすそうです 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 クールに実装できるレスポンシブなモーダルダイアログ「Remod
移動、拡縮、最小化、最大化が可能なBootstrap用モーダルダイアログ実装jQueryプラグイン「jsPanel」:phpspot開発日誌
jsPanel | a jQuery Plugin 移動、拡縮、最小化、最大化が可能なBootstrap用モーダルダイアログ実装jQueryプラグイン「jsPanel」。 次のようなデザインのダイアログが実装できます。標準のモーダルよりも機能が必要な場合に使えそうです。 ドキュメントがしっかりしていて使いやすそう 関連エントリ フリーのBootstrapテーマが満載「Bootstrap Zero」 Bootstrap標準のModalを進化させた「Bootstrap-modal」 Bootstrap用、横スライド式メニュー等の追加コンポーネントが使える「Jasny Bootstrap」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 Bootstrapなalert,confirm,promptが実装できる「Bootbox.js」
レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」:phpspot開発日誌
Responsive and Mobile-Friendly Tooltip ? Osvaldas Valutis レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 ツールチップというと、どうしてもPC用でマウスオーバー表示というものが多かったのですが、レスポンシブでデザインも美しいツールチップが実装可能です。 タップすると次のように綺麗なツールチップが表示されます。 関連エントリ フラットデザインが美しいシンプルかつスモールなツールチップjQueryプラグイン「Tipr」 フラットでシンプルさがいい感じのツールチップライブラリ「Simptip」
電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」:phpspot開発日誌
jQuery Autotab Demo 電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」 電話番号フィールドを複数にわけているけど、入力がおわったら次のフィールドに自動でうつる、というアレが簡単に実装できます。 単に移動するだけではなくて、入力値をフィルタすることも可能です 関連エントリ Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 より良いフォームの入力ヒント実装jQueryプラグイン「Label Better」 フォーム要素にフォーカスした際のヒント表示を簡単に実装できるjQueryプラグイン「FormHelp」
複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」:phpspot開発日誌
Multifilter - Sort a table on Multiple inputs. A jQuery plugin from Tommy Palmer. 複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」。 テーブル内容をフィルタするのに用意されているものは１個というのが殆ですが、条件を複数指定して絞り込めるフィルタプラグインです。 アイテム量が多い場合なんかに使えそうですね 関連エントリ テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「
reddit風のGoodかBadの投票機能実装サンプル:phpspot開発日誌
AbhiTech: HOW-TO: Reddit-style Voting With PHP, MySQL And jQuery reddit風のGoodかBadの投票機能実装サンプル。jQuery+PHP+MySQLにて実装されています。 シンプルで直感的な分かりやすい投票機能をページに実装したい方は参考にするとよさそうです。 星型の段階的な投票よりも、白黒ハッキリさせたい投票機能として使えそうですね。 データベースのデータ形式もシンプルなので取得したデータを活用するのも容易です。 関連エントリ jQueryとPHPでダイナミックな投票スクリプトを作成 投票用ウィジェットを簡単に作成できるサービス「Vizu」 PHP＋MySQLで投票機能を作成するチュートリアル＆ＤＬ
テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」:phpspot開発日誌
テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」 2013年10月02日- jQuery Super Easy Text Rotator by Pete R. | The Pete Design テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」 「Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style」 というマークアップがあった場合、Super Simple Text Rotator with Style、のSimpleの部分がカンマ区切りで区切られたテキストにアニメーションしながら切り替わるという
画像のdiffができるjQueryプラグイン「TwentyTwenty」:phpspot開発日誌
ZURB ? Interaction Design and Design Strategy 画像のdiffができるjQueryプラグイン「TwentyTwenty」。 画像の上にスライダーを付けて、ドラッグ＆ドロップで移動できるようなUIが作れます。 激的ビフォアアフターなUIを作りたい場合に最適。 マークアップとJSコードは以下。超簡単。 関連エントリ Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 サムネイルをクリックでその場で画像ズームできるjQueryプラグイン「Ion Zoom」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 画像レイアウト関連で便利なjQueryプラグイン等まとめ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」
200個のフラットなフードアイコンセット:phpspot開発日誌
200 Foodie Pack: A Free Set Of Food Icons | Smashing Magazine 200個のフラットなフードアイコンセット。 次のようなフラットなフラットなフードアイコンセットです。 フード系のアイコンはあんまり無くて、外食系のサイトデザインの際に使えそうですね 関連エントリ 天気予報用のアイコンがセットになったアイコンフォント「Forecast Font」 地図と共に使えそうな２００のフリーベクターアイコン集 フラットが美しすぎるアイコン24個セット アイコン画像をアップして独自のアイコンフォントがブラウザ上で作れる「Iconvau.lt」 シンプルで使えそうな５０のベクターアイコンセット
Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」:phpspot開発日誌
Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 2013年06月18日- Easily Remove Image Backgrounds Online - Clipping Magic Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 画像をアップするとブラウザ上に編集ツールが現れ、緑色のペンで残したい部分、赤色のペンで背景を適当になぞればリアルタイムに背景が消えてくれます。 リアルタイムに消えてくれるので、間違っていた場合も簡単に良い結果が得られるまで修正を加えられます 写真から背景を簡単にくりぬきたい時に使えそうですね 関連エントリ Bootstrapなサイトで使えそうなクールなツールチップ実装jQueryプラグイン「Smallipop」 色々とカスタマイズが可能なツールチップ実装
ボタンに直接ローディングアニメーションを付けられる「Ladda」:phpspot開発日誌
Ladda ボタンに直接ローディングアニメーションを付けられる「Ladda」。 ボタンを押すとボタンに回転するアニメーションが付与され、そのまま結果をまつ、というような分かりやすいUIが実現可能です 文字＋ボタンを円形のボタンにして背景をグレーにしたり、そのボタン自体をプログレスバーにしてしまうなど、面白いデモが詰まっていますので一度是非試してみて下さい 色々なUIのデザインの仕方があるなぁという関心をしてしまいますね 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画面にリアルな雪を降らせられるjQueryプラグイン「Snowfall」:phpspot開発日誌
変わったUIの日付＆時刻ピッカー実装jQueryプラグイン「DateTime Picker」:phpspot開発日誌
クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」:phpspot開発日誌