CSSアニメーションを使ったレスポンシブスライダー実装「Jcslider」:phpspot開発日誌Jcslider by JoanClaret CSSアニメーションを使ったレスポンシブスライダー実装「Jcslider」 1JS、1KBで60以上の切り替えエフェクトがはいっている、という優れもののようです。 関連エントリ 製品プレビュー用のクールなスライダー実装デモ＆サンプル タッチ端末でも動く数値入力のスライダーUI実装「rangeslider.js」 タッチ端末でスライダーを実装するならこれかも？なJSライブラリ「Swiper」
ヘッダ、フッタを固定したテーブルを実装できるjQueryプラグイン「jTableScroll」:phpspot開発日誌
Mike Allison - jTableScroll ヘッダ、フッタを固定したテーブルを実装できるjQueryプラグイン「jTableScroll」 テーブルが長くなると、これは何の数値だったかと分からなくなることがよくありますが、ヘッダを固定できるので、そういうことがないようにできます。 thead,tfootで定義をしておけばあとはこのプラグインで初期化するだけです。 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」
CSSで14種のローディングアニメーションが実現できる「waitMe」:phpspot開発日誌
waitMe CSSで14種のローディングアニメーションが実現できる「waitMe」。 次のようにフォーム送信時等にアニメーションを14種の中から選んで実装可能 呼び出しコードは以下のようにカスタマイズ性があるけど簡単。サイズや色など、テキストが自由にかえられて、どんなサイトでも使えそう 関連エントリ 背景色をなめらかに変更できるjQueryプラグイン「Spectrum」 １つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 タイル上にエレメントを並べられるjQueryプラグイン「jMosaic」 ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 楽譜をWEB上で打ち込めるUI実装jQueryプラグイン「jsNoteEditor」
JavaScriptで動画やWebcamからGIFアニメを作れる「gifshot」:phpspot開発日誌
gifshot - JavaScript library that can create animated GIFs from media streams, videos, or images JavaScriptで動画やWebcamからGIFアニメを作れる「gifshot」 ブラウザ上で動画や画像を読み込んで、GIFアニメに変換できるライブラリ。 GIFアニメなら<img>からお手軽に使えて使いやすいですし、再生できる端末も多いということで、サービスづくりに活用出来るかもしれません。 関連エントリ GIFアニメーションに再生ボタンを付けてYoutubeっぽく再生できる「gifplayer」
html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」:phpspot開発日誌
Rotate HTML elements by mouse in JavaScript - Propeller.js html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 自動で回転させることもできるし、ドラッグ＆ドロップによって回転させて加速度をつけたアニメーションをさせることもできます 汎用性はありませんが、ちょっとしたエフェクトとして使えそうですね 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 読み終わったらスライドアニメーションで他記事に誘導できるjQueryプラグイン「Promo Slide」 アニメーションするプログレスバーで達成度を視覚化できるjQueryプラグイン
プログレスバーにもなるフラットなボタン実装デモ:phpspot開発日誌
Progress Button Styles | Codrops プログレスバーにもなるフラットなボタン実装デモ。 ボタンを押すとボタン自体がプログレスバーになって進むというUIをフラットで、１８種類ものアニメーション付きで実装したデモです。 １つのUIパーツで複数の意味をもたせてよりシンプルなUIが実現できますし、フラットなので広範囲に使えるというメリットもあり使えそうなデモです 関連エントリ フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」 フラットなUIデザインキットPSD25個 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 フラットな大量のコンポーネントが詰まったフラットなモバイルUIキット「Flatastic Mobile UI Ki
iOSのON/OFFボタンなスイッチがBootstrapで作れる「Bootstrap switch」:phpspot開発日誌
Bootstrap switch - by Mattia Larentis and Peter Stein iOSのON/OFFボタンなスイッチがBootstrapで作れる「Bootstrap switch」 次のような美しいスイッチがBootstrapなサイトで実装できます またひとつ、Bootstrapを使う理由が増えました。 関連エントリ Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapベースのフラットUI実装フレームワーク「Furatto」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Twitter BootStra
画像やCSS/JSを動的に圧縮したり結合したりできるコンテンツ配信最適化ツール「Munee」:phpspot開発日誌
Munee: Standalone PHP 5.3 Asset Optimisation & Manipulation 画像やCSS/JSを動的に圧縮したり結合したりできるコンテンツ配信最適化ツール「Munee」 LESS, SCSS, CoffeeScriptのコンパイル、画像の圧縮・操作、CSS/JSを圧縮して１つのファイルにする、コンテンツのgzip化等、コンテンツ配信に便利なサーバインストール型のツールが公開されています。 サービスを作っているとよく使うコンテンツの最適化機能が入っていてなかなか便利そうです。 例えば、画像の縮小は以下のように指定して動的にリサイズをかけることが可能です。 <img src="/img/my-image.jpg?resize=w[200]h[300]e[true]s[true]"> JavaScriptもカンマ区切りで次のようにしてやればコンバインし
フリー＆プレミアムなTwitterBootstrapテーマ50:phpspot開発日誌
50 Awesome Twitter Bootstrap Templates フリー＆プレミアムなTwitterBootstrapテーマ50 Bootstrapベースとはいえ、Bootstrap臭があまりしないテンプレートが多数まとまっています。 通常サイトや管理画面等のテンプレートがまとまっていて、活用してサクっと仕事を終えられる事もあるかも Bootstrapの便利さを享受しつつ、うまくサイトデザインする際の参考にもできそうです 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」
apc,memcache等格納先を簡単に切替えられるキャッシュライブラリ「phpFastCache」:phpspot開発日誌
apc,memcache等格納先を簡単に切替えられるキャッシュライブラリ「phpFastCache」 2013年05月15日- phpFastCache - Fastest PHP Caching - Reduce mySQL Calls, Improve Speed - High Performance object caching system apc,memcache等格納先を簡単に切替えられるキャッシュライブラリ「phpFastCache」 過負荷に耐えるWEBサービス作成のための使えるPHPキャッシュテクニックまとめ、等で過去にPHPでのキャッシュ方法についてまとめましたが、このライブラリを使えば、apcとかmemcacheとかそれぞれのAPIを覚えなくても共通のインタフェースでset, get が可能。 phpFastCache::set, phpFastCache::get
アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル:phpspot開発日誌
Responsive Retina-Ready Menu | Codrops アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル アイコンフォントなら拡大縮小しても劣化はないということで、CSSとJavaScriptを使ってうまくアイコンもリサイズして綺麗にレスポンシブに、更にRetinaにまで対応してくれるデモです。 UIデザイナーな方はやること増えて大変ですが、チュートリアルをベースにライブラリも出てくれば対応は楽になりそうですね。 それにしても色んなテクニックやディスプレイが出てきたりと、この業界考えることが増えて大変ですね 関連エントリ 3DのソーシャルメディアボタンをCSS3で作成するチュートリアル モダンなサイトを作成するためのCSS3チュートリアル集 テキストを円形に描画するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」:phpspot開発日誌
WordpressベースのWEBサイト構築フレームワーク「Themosis framework」:phpspot開発日誌
フリーのiOS7アイコン800個セット:phpspot開発日誌