Card ? make your credit card better in one line of code クレジットカード番号の入力を直感的にできる「Card.js」 同様のスクリプトを以前にも紹介しましたが、こちらはカード上に直接入力の形ではないものの、別にフォームがあってカード型のデザインに値を反映させるというもの。 フォームのデザインはブラウザ上なのでフォームっぽい方が分かりやすく、そして入力した値がカードのどの位置のものか、がすぐ分かって分かりやすいです。 関連エントリ クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」

loonkwil/jquery.keep-ratio GitHub 要素のアスペクト比を維持できる「jquery.keep-ratio」。 特定のエレメントを16/9等に高さor幅をベースにアスペクト比をを維持しつつレスポンシブにできるにできるjQueryプラグインです。 画面のサイズが変わってもアスペクト比はそのままにしたい場合に使えそう。 関連エントリ ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 Bootstrapなサイトでの通

動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 HTML5 Video 実装 HTML 現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。 <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> オーバーレイで表示するコンテンツは、通常通りの実装です。 <div class="overlay"> コンテンツ </div> CSS まずは、動画をフルスクリー

SNS Share jQuery Plugin Twitter,FB,Lineなどへのシェアを実現するシンプルなjQueryプラグイン「SNS Share」。 ボタンのデザインなどはあくまで自分で行い、ボタン押下時のアクションのみをプラグインに任せることが可能です。 ボタンのデザインは自分でやりたい、という方には便利そう。 HTMLは次のように、シンプルに。自分でスタイリングも容易です。 関連エントリ レスポンシブかつフラットなソーシャルボタンを実装できる「rrssb」