Um dos elementos mais "Web2.0" presentes na atualidade é o "modal", ou lightbox, como preferirem. Este tipo de elemento tem como particularidade dar uma sensação ao usuário que ele não está acessando um outro documento/endereço no navegador, e faz com que o mesmo se sinta em uma espécia de Sistema Operacional Virtual.
O problema maior em implementar estas "caixinhas" de diálogo flutuantes está na compatibilidade delas com os outros navegadores (Firefox 2, Firefox3, Firefox 3.5, Safari, Chrome, IE 6, IE7, IE8, etc).
Para que a feature funcione em todos os navegadores são implementadas funcionalidades em Javascript que além de assumirem o comportamento esperado, realizam workarrounds para que o modulo funcione de forma eficaz para todos.
Imagine então implementar algo parecido, porém de uma forma mais simples, usando apenas CSS! Sim, apenas utilizando regras de herança e de semântica para que um modal simples, sem efeitos de transição seja exibido.
Seguindo esta linha, que surgiu a proposta de um tutorial disponibilizado no blog (carsonfield.com/blog) que cria um modal utilizando apenas CSS.
No blog o autor fala da compatibilidade da solução com diversos navegadores, entretanto tive alguns problemas de interface (background) no IE 6 de uma VM que utilizo aqui. Creio que é algo relacionado ao background transparente, o qual existem problemas para renderizar no IE 6.
Destaco a importância deste tutorial pelo fato de que atualmente a média de tamanho de plugins e JS´s para implementação de modal em conjunto com CSS supera o tamanho de 6Kb, sendo que neste caso do exemplo, temos apenas 900Bytes de CSS para a implementação de modais estáticos, sem necessidade de muitos efeitos e interaçoes.
O link do tutorial é : http://carsonified.com/blog/design/css/how-to-create-a-valid-non-javascript-lightbox/
O problema maior em implementar estas "caixinhas" de diálogo flutuantes está na compatibilidade delas com os outros navegadores (Firefox 2, Firefox3, Firefox 3.5, Safari, Chrome, IE 6, IE7, IE8, etc).
Para que a feature funcione em todos os navegadores são implementadas funcionalidades em Javascript que além de assumirem o comportamento esperado, realizam workarrounds para que o modulo funcione de forma eficaz para todos.
Imagine então implementar algo parecido, porém de uma forma mais simples, usando apenas CSS! Sim, apenas utilizando regras de herança e de semântica para que um modal simples, sem efeitos de transição seja exibido.
Seguindo esta linha, que surgiu a proposta de um tutorial disponibilizado no blog (carsonfield.com/blog) que cria um modal utilizando apenas CSS.
No blog o autor fala da compatibilidade da solução com diversos navegadores, entretanto tive alguns problemas de interface (background) no IE 6 de uma VM que utilizo aqui. Creio que é algo relacionado ao background transparente, o qual existem problemas para renderizar no IE 6.
Destaco a importância deste tutorial pelo fato de que atualmente a média de tamanho de plugins e JS´s para implementação de modal em conjunto com CSS supera o tamanho de 6Kb, sendo que neste caso do exemplo, temos apenas 900Bytes de CSS para a implementação de modais estáticos, sem necessidade de muitos efeitos e interaçoes.
O link do tutorial é : http://carsonified.com/blog/design/css/how-to-create-a-valid-non-javascript-lightbox/
