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

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

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

  2. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  3. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  4. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

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

    CSS

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

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

  6. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP