Home > 技術 > HTML5とCSS3だけでLightbox - Pure CSS3, no javascript!!

HTML5とCSS3だけでLightbox - Pure CSS3, no javascript!!

HTML5 Pure CSS Lightboxを見てて、そういえばどうやってやってるか知らないな〜と思い自分なりに簡略化したデモページを作ってみました。
なるべく必要なスタイルだけを使うするようにしています。

CSS3の部

アニメーションは-webkit-animationを使っています。

HTML5の部

Sample1〜Sample4までが画像で、Sample5がテキストになっています。

デモサイト

WebkitGoogle Chromeで見るともれなくアニメーション機能が付いてきます。
CSS3 Lightbox Sample

また、HTML5のタグは以下のリンクを参考にさせていただきました。(すごく見やすい!)
ありがとうございます!
HTML5リファレンス

■関連リンク
animation-timing-function-CSS3リファレンス
animation-direction-CSS3リファレンス

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1268
Listed below are links to weblogs that reference
HTML5とCSS3だけでLightbox - Pure CSS3, no javascript!! from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > HTML5とCSS3だけでLightbox - Pure CSS3, no javascript!!

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top