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

Post on:2010年5月28日

sponsors

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

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

デフォルトの状態

画像を表示

コンテンツを表示

動画を表示

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

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

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