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

関連記事

  1. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  2. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  3. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  4. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  5. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  6. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP