Light Modal

CSS

パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSSモーダルを実装することができます。コンテンツを表示させることはもちろん、画像をモーダルウィンドウ内に表示させることもできます。アニメーションの種類もかなり豊富なのがうれしいですね。

Light Modal

デモ

デモページでは、Open Simple Modal、Modal With Header/Footer、Open Image Modalの3つのサンプルが設置されています。各ボタンをクリックすると、それに応じたモーダルウィンドウが表示される仕組みです。

お洒落なアニメーションとともに表示されるモーダルウィンドウは、思わず見入ってしまいますね。

「Choose an Animation」から、さまざまなアニメーションを選択することができます。アニメーションの種類には、bounce、flash、pulse、rubberBand、shake、swing、tada、wobble、jelloなど、まだまだ他にもたくさんのアニメーションがあります。

ちなみに、アニメーションはAnimate.cssを使用します。

Light Modal

no-image画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」前のページ

シンプルでモダンなSVGチャートを実装できる「Frappe Charts」次のページFrappe Charts

関連記事

  1. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  2. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  3. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  4. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  5. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  6. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP