[CSS]画像やコンテンツや動画を表示するCSS3で実装したLightbox

画像だけでなく、コンテンツや動画も表示できるCSS3で実装したLightboxをSix Revisionsから紹介します。

デモのキャプチャ

Semantic CSS3 Lightboxes
デモページ

デフォルト時は下記のようになり、各テキストのリンクをクリックすると画像やコンテンツや動画がLightbox風のエフェクトで表示されます。

デモのキャプチャ

デフォルトの状態

デモのキャプチャ

画像を表示

デモのキャプチャ

コンテンツを表示

デモのキャプチャ

動画を表示

対応ブラウザはFirefox, Chrome, Safari, Operaの最新のバージョンで、IE6/7ではJavaScriptを使用することで動作させています。

スタイルシートのオフ時には、各リンクはページ内アンカーとして動作し、下記のように表示されます。

デモのキャプチャ

スタイルシートのオフ時の表示

sponsors

top of page

©2018 coliss