Jardim Web

Local para cultivar idéias e talentos

Uma demonstração do visual construído com CSS. Escolha qualquer estilo da lista para carregar um novo design.

Faça o download dos arquivos de exemplo html e css.

O caminho da evolução

Entulhando uma escura e aterrorizante estrada jazem as relíquias antigas de elementos específicos a navegadores, DOMs incompatíveis e falta de suporte correto ao padrão CSS.

Precisamos limpar as nossas mentes das práticas passadas. A evolução Web foi atingida graças aos esforços incansáveis de pessoas como os membros do W3C, WaSP e dos criadores dos principais navegadores em uso atualmente.

O Jardim Web convida você a relaxar e meditar nas importantes lições do Mestres. Comece a ver com clareza e aprenda a usar as técnicas consagradas pelo tempo de maneira nova e revigorante.

Sobre o que é este site?

Existe uma clara necessidade de que artistas gráficos e desenvolvedores Web levem o padrão CSS mais a sério. O Jardim Web tem como alvo entusiasmar, inspirar e encorajar a participação de todos. Para começar, veja alguns dos designs existentes na lista. Ao clicar em qualquer um deles, a folha de estilo correspondente será carregada nesta página. O código permanece o mesmo; a única coisa que muda é o arquivo .css externo. Sério!

O CSS permite o controle completo e total sobre o modo como um documento é renderizado. O único modo pelo qual esse fato pode ser demonstrado de uma maneira que entusiasme as pessoas é demonstrar quão verdadeira é a realidade do mesmo, uma vez que as rédeas são colocadas nas mãos daqueles que são capazes de criar beleza a partir da estrutura. Até o dia de hoje, a maior parte dos exemplos e truques interessantes que podem ser feitos nesta área foram demonstrados por desenvolvedores. Artistas gráficos ainda caminham pouco por este jardim.

Participação

Qualquer pessoa podem participar. Você vai modificar o visual desta página e, para isto, uma boa dose de habilidade com o CSS é requerida, embora os arquivos de exemplo estejam comentados o suficiente para permitir que mesmo novatos com o padrão possam usá-los como uma base para seus experimentos. Para dicas e tutoriais avançados sobre CSS veja o site do Maujor.

Você pode modificar a folha de estilo de qualquer maneira que achar necessária, mas o código HTML deve ser deixado como está. Isso pode parecer difícil no começo se você nunca trabalhou desse modo antes, mas use os arquivos de exemplo como guias e o as ferramentas de desenvolvimento dos navegadores.

Faça o download dos arquivos de exemplo html e css para trabalhar localmente. Assim que você completar a sua obra-prima (e, por favor, não envie trabalhos incompletos). Envie seu trabalho para povoar nosso jardim.

Benefícios

Para quê participar? Para obter reconhecimento, inspiração, e um recurso ao qual todos nós poderemos nos referir quanto batalharmos pelo uso de designs baseados em CSS. Um dia esta galeria será uma curiosidade histórica; porém, este dia ainda não chegou.

Requerimentos

Nós gostaríamos de ver o máximo possível de CSS2. O uso de CSS3 deve ser limitado aos elementos suportados pelos navegadores em uso atualmente. O Jardim Web existe para demonstrar o uso prático e funcional do padrões Web. O único requerimento real, entretanto, é que o seu CSS esteja válido.

Infelizmente, criar o design dessa maneira colocará em evidência as falhas nas várias implementações CSS disponíveis atualmente. Diferentes navegadores comportam-se de maneira distinta quanto a alguns elementos, mesmo quando o CSS é válido. Isso pode se converter em uma fonte de frustrações, principalmente quando uma correção para um navegador atrapalha outro. Compatibilidade total com todos navegadores ainda é um sonho e nós não esperamos que você consiga um design perfeitamente preciso até o último pixel em todas as plataformas. Mesmo assim, teste em todas que conseguir.

Nós pedimos que você envie ilustrações originais. Por favor, respeite as leis de copyright. Mantenha o material questionável ao mínimo: pornografia, ou crime será rejeitada imediatamente.

Este é um exercício de aprendizado na mesma medida em que é uma demonstração. Você manterá o copyright completo de todos os seus gráficos, mas pedimos que você libere o seu CSS sob uma licença Creative Commons idêntica à deste site de modo que outros possam aprender do seu trabalho.