Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[CSS] Create a Lightbox effect only with CSS – no javascript neededCSSだけで作る、Lightboxっぽいエフェクト

  • Pocket
  • このエントリーをはてなブックマークに追加

これはなかなか興味深い。一時期かなり流行ったLightboxのエフェクトを、Javascriptなしで、CSSのみで作ろうという試み。ページ下部(コメント欄の上あたり)に、“That you can find up and running in this page”というリンクがあるので、そこからデモを見る事ができます。JSを使ってないので、Lightbox2のような、いわゆるフワっと出てくる動きのようなものは実装されていませんが、見た感じかなり近い。CSS記述だけでここまで作るのはたいしたものです。absolute指定でブラウザウィンドウ真ん中に表示させてて、出現後のウィンドウリサイズにもちゃんと追従します。Lightboxはいくら実装が簡単とはいえ、多少手間な上に、例えばJavascriptの使えないブログサービス等では実装のしようがありません。コレならサクっと簡単にできそう。

2 thoughts on “[CSS] Create a Lightbox effect only with CSS – no javascript neededCSSだけで作る、Lightboxっぽいエフェクト”

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください