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のTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

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

    CSS

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

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

  3. CSS

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

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

  4. CSS

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

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

  5. Media Queriesの@media
  6. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP