• Thiết kế website bán hàng miễn phí 2018

10 CSS3 Lightbox Alternatives - 10 ứng dụng trình diễn ảnh lighbox phổ biến

  Mình chia sẻ với các bạn 10 ứng dụng trình diễn, thể hiện hình ảnh bằng popup, các bạn chọn plugin nào phù hợp với website mình như thể hiện hình ảnh sản phẩm, photo ..... '

10 CSS3 Lightbox (modal windows) Alternatives

A lightbox often refers to a pop-in window that can be used to display images, videos and html content in modern web applications. There are many fantastic javascript Lightbox solutions available on the web, however this article is focusing on CSS3 Modal Window solutions.

CSS3 is still under development and not all browsers support it, which mean this CSS3 Lightbox solutions are not cross-browser compatible (only the latest versions of the modern non-IE web browsers support CSS3).

A big thank you to our sponsor who makes running this blog possible: DisciPlanner.

In this post, I’ll be featuring 10 awesome CSS3 Lightbox and modal windows that you can use on you web applications.



1. Drop-In Modals

For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.
Demo works best in Safari 4 or Chrome 5.

CSS3 Drop-In Modals

2. CSS3 – Clickbox – Gallery

Uses CSS3 adjacent sibling selector to produce a Clickbox Gallery. A series of images can be viewed using ‘Previous’ and ‘Next’ buttons that popup when hovering the images.
Demo works best in For Firefox, Opera, Safari, Chrome, IE8, SeaMonkey and Floc

CSS3 Clickbox Gallery

3. Futurebox, lightbox without the javascript and target pseudo-class

Futurebox version 3 introduces a new technique on showing and hiding modals using the checked pseudo-class rather than target. It also demonstrates loading content within a futurebox modal.

Futurebox, lightbox without the javascript and target pseudo-class

4. Lightbox effect with Tabindex and CSS3

A tutorial written in french! Only CSS3 and HTML5 languages are used right here. Lightbox effect best works for Webkit. Tab key on the keyboard can be used to jump to next image.

Lightbox effect with Tabindex and CSS3

5. Pure CSS3 Lightbox

Pure CSS3, no javascript. Webkit browsers get a little bonus animation. The :target pseudo selector is truly a powerful new feature in CSS3.
Targeting a link directly to the URL with the hash tag will trigger the “LighterBox” onload.

Pure CSS3 Lightbox

6. Full CSS3 Lightbox

Full CSS3 lightbox with no Javascript – a CSS3 experiment by Benjamin De Cock

Full CSS3 lightbox - no javascript

7. 100% CSS3 Lightbox

The core functionality, the part of the lightbox that is so revolutionary, is the ability of CSS to recognize a click event. To do so is a hack, but uses valid css3 and html5.

Fully supported by firefox 4.0+, safari 4.0+ and chrome (any version)

100% CSS3 Lightbox

8. Pure CSS image gallery (webkit mostly)

This gallery is fully functional in webkit (tested & developed under Chrome). Main functionality is also preserved in Firefox, but -moz-transition doesn’t work well if animated elements aren’t the ones that get :focused or :hovered.

CSS3 Overlay System

9. A CSS3 Overlay System

A CSS3 Overlay system for modal dialogs.

CSS3 Overlay System

10. Semantic CSS3 Lightboxes

This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all.

Share facebookShare facebook

Facebook Comments

Tin Cùng Chuyên Mục

Trang 1 / 1

Bạn đã đọc tin này chưa ?

Go Top