[CSS]クロスブラウザ対応、validなXHTMLとCSSで実装されたLightbox風エフェクト

validなXHTMLとCSSでLightbox風エフェクトを実装するチュートリアルをCarsonifiedから紹介します。

デモのキャプチャ

How to Create a Valid Non-Javascript Lightbox
demo

対応ブラウザはIE6/7/8, Fx, Safari, Chromeで、上記はSafari4、下記はIE6のキャプチャです。
IE6/7では背景色が濃いです。

デモのキャプチャ

IE6でデモをキャプチャ

Lightbox風エフェクトで表示されるコンテンツは、HTMLの最後にリスト要素として配置されており、IE対策として条件付きコメントが使用されています。

sponsors

top of page

©2024 coliss