読者です 読者をやめる 読者になる 読者になる

クレカ入力インターフェースをリッチにするライブラリ

Card ― make your credit card better in one line of code 入力したカード情報が反映される。 ブランドも判別してロゴを表示 CVCの入力でフリップして裏面が表示される かっこいいけどクレカ入力フォームだけ浮きそう。 あとJCBはロゴなし。

スピードメーターのように数字を表示するライブラリ「odometer」

Odometer ― Transition numbers with ease スピードメーターみたいにアニメーションして数字を表示できるライブラリ。 ちょっと触ってみて遊んでいた。 jQueryなど依存ライブラリ無し。 テーマがいくつか用意されていて、シンプルなやつから 使い所がなさそ…

クレジットカード情報の入力フォームをリッチにする「Skeuocard」

Skeuocard by kenkeiter 入力したカード番号によって、カード種別を判別して表示してくれます。 表を全部入力すると、裏面を入力するためのガイドがでます。 裏面 こういう実世界の質感をそのまま反映したようなデザインを「Skeuomorphic Design」っていうん…

テキストをアニメーションさせるライブラリ Textillate.js

Textillate.js リンク開くとだいたいどんなことができるのかわかります。 テキストを表示させる、消すときにいろいろなアニメーションをさせることができます。見てて面白い。ドキュメントみる限り結構自由にカスタマイズできそうです。

twitter bootstrapのthumbnailsの表示くずれ

css

twitter-bootstrapのthumbnails http://twitter.github.com/bootstrap/components.html#thumbnails 2行目からレイアウトが崩れる調べてみたらgithubにissueとして上げられてました https://github.com/twitter/bootstrap/issues/3494 もうclosedになってます…

画像リストの表示をアニメーションさせるliffect

たまたまみつけて面白そうだったのでメモliffect http://ademilter.com/lab/liffect/画像の一覧を表示するページで、表示をアニメーションさせるためのコードを生成してくれます。 アニメーションはたくさん種類があって、Duration、Delay、Randomと動作をカ…

kickstrapのdebug表示について

この間作ったtodoアプリの場合、knockout.jsに依存したtodoというappsを作りました。 config.ksはこうです knockout.min.js, //http://netdna.getkickstrap.com/Kickstrap/apps/knockout/knockout.min.js todo.js,todo.css kickstrap.lessの@appsはtodoのみ…

kickstrapでkickstrap.lessのコンパイル結果をキャッシュする

kickstrap.lessに以下のような部分がありますので、@importのコメントを外すだけです @import "Kickstrap/extras/caching.less"; // Cache Kickstrap (Makes your site faster) // Use "clearCache()" in the console to update. localStrageにコンパイル結…

Django+Kickstrap+Knockout.js+TastypieでTodoアプリ

最近さわっているdjango-tastypie、kickstrap、knockout.jsなどを使ってよくある感じのTodoアプリを作ってみました。 http://django-kickstrap-todo.herokuapp.com/ 削除や更新のたびにリストを取り直しているせいか動作がちょっともっさりしてます。 ソース…

djangoでkickstrapを使うサンプル

先日使ってみたkickstrapをdjangoと組み合わせて動かせるようにしてみました。 site_media以下にkickstrapのファイルを置いて、参照できるようにsettingsやhtmlの参照をちょっといじったくらいですが。あとkickstrap.lessに定義してあるカスタマイズ用の変数…

Bootstrapに様々なPlugin、テーマを追加したKickstrapがだいぶ変わったのでもう一度みてみる

以前ちょっとさわってみたKickstrapですが、久しぶりにチェックしたらかなり進化していたのでもう一回見てみました。 フォルダ構成 ダウンロードして展開するとこのような構成になってます。 トップディレクトリにあるファイルが少なくなってシンプルになり…

カードをひっくり返したようなエフェクトを実現するFlip!を試してみた

カードをひっくり返すようなエフェクトを実現するライブラリを探していて、いくつか候補が見つかったのですが、なかでもとっつきやすそうだったFlip!を試してみました。 使い方は単純なのでオフィシャルのサイト見ればすぐに分かります。つくってみたのがこ…

Bootstrapに様々なPlugin、テーマを追加したKickstrap

Twitter Bootstrapに機能を追加したKickstrapというツール?フレームワーク?の中身を色々みてみました。https://github.com/ajkochanowicz/Kickstrap $ git clone https://github.com/ajkochanowicz/Kickstrap.git $ cd Kickstrap $ open index.html これで…

boilerstrapを試す

githubにboilerstrapというプロダクトがあったので試してみました。 https://github.com/emorikawa/boilerstrap HTML5 BoilerpalateとTwitter bootstrapを同時に使うWebサイトのテンプレート、って感じでしょうかとりあえずgit cloneでソースを持ってきます …