[CSS]画像やコンテンツや動画を表示するCSS3で実装したLightbox
Post on:2010年5月28日
画像だけでなく、コンテンツや動画も表示できるCSS3で実装したLightboxをSix Revisionsから紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010052809.png)
Semantic CSS3 Lightboxes
デモページ
デフォルト時は下記のようになり、各テキストのリンクをクリックすると画像やコンテンツや動画がLightbox風のエフェクトで表示されます。
![デモのキャプチャ](/wp-content/uploads-2010/2010052808.png)
デフォルトの状態
![デモのキャプチャ](/wp-content/uploads-2010/2010052805.png)
画像を表示
![デモのキャプチャ](/wp-content/uploads-2010/2010052806.png)
コンテンツを表示
![デモのキャプチャ](/wp-content/uploads-2010/2010052807.png)
動画を表示
対応ブラウザはFirefox, Chrome, Safari, Operaの最新のバージョンで、IE6/7ではJavaScriptを使用することで動作させています。
スタイルシートのオフ時には、各リンクはページ内アンカーとして動作し、下記のように表示されます。
![デモのキャプチャ](/wp-content/uploads-2010/2010052810.png)
スタイルシートのオフ時の表示
sponsors