10 Alternativas ao Lightbox em CSS3

Lightbox normalmente se refere a uma janela pop-in que pode ser usada para mostrar imagens, vídeos e conteúdos em HTML. Existem muitas variações do Lightbox em Javascript disponível na internet. No entanto, este artigos é focado em soluções de Modais em CSS 3.

Até agora o CSS 3 não é compatível com todos os navegadores, o que significa que o Lightbox em CSS 3 não será compatível com todos os navegadores, somente a última versão dos navegadores mais modernos.

Nesse post você verá 10 exemplos de Lightbox em CSS 3 e modais que você pode usar nos seus sites.

1.     Drop-In Modals

Para quem usa navegadores que utilizam a engine Webkit, com Safari e Chrome, os efeitos de CSS 3 podem ajudar a criar modais rápidos e simples, usando as propriedades transform, animation e mais alguns recursos de design.

O demo funciona melhor no Safari 4 ou Chrome 5.

2.     CSS 3 – Clickbox – Gallery

Usando seletores ‘irmãos’ do CSS 3 chegamos a Clickbox Gallery. Uma galeria de imagens que pode ser visualizada usando os botões ‘Anteriores’ e ‘próximos’ que aparece quando é feito o hover na imagem.

O demo funciona melhor no Firefox, Opera, Safari, Chrome, IE8, SeaMonkey e Floc.

3.     Futurebox, lightbox sem javascript e usando pseudo classe

Futurebox versão 3 introduz uma nova forma de mostrar e esconder um modal usando a pseudo classe checked para pegar o elemento alvo. Ele também mostra o carregamento do conteúdo dentro o futurebox modal.

4.     Efeito Lightbox com Tabindex e CSS 3

Um tutorial escrito em Francês, usando apenas HTML5 e CSS 3. Esse efeito funciona melhor no Webkit. A tecla Tab pode ser usada para pular as imagens.

5.     Lightbox Pure CSS3

Pure CSS 3 não precisa de javascript, nos navegadores com Webkit as animações ficam um pouco melhor. A pseudo classe :target é realmente é uma forte característica do CSS 3. Pegando um link direto pela URL com a hash tag irá disparar o “LighterBox” ao carregar.

6.     LightBox Full CSS 3

Lightbox Full CSS 3 não precisa de javascript, um experimento em CSS 3 por Benjamin De Cock.

7.     Lightbox 100% CSS 3

A parte do lightbox que é revolucionaria é a habilidade de reorganizar o evento clique. Suportado em Firefox 4+, Safari 4+ e Chrome (qualquer versão).

8.     Galeria de Imagem Pure CSS (Webkit)

Essa galeria é totalmente funcional com Webkit (desenvolvido e testado no Chrome). A funcionalidade principal é preservada no Firefox, pela propriedade –moz-transition não funciona muito bem por que usa as propriedades do elemento com focus ou com hover

9.     Sistema de Overlay em CSS 3

Um sistema de overlay para modal

10.     Lightbox em CSS 3 Semanticos

Esse tutorial mostra várias formas de mostrar conteúdo num lightbox, o qual torna a web mais acessível, exclui o Internet Explorer e não irá requerer scripts.