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.
