Nossos colegas mais de .líquido revista, a revista mais vendida do mundo para web designers e desenvolvedores, amam nada mais do que ficarem sujos com um pedaço de código fonte.

Seu site apresenta uma riqueza de informações para os criadores de sites que abrangem assuntos como CSS, JavaScript, PHP e muito mais.

Aqui estão cinco dos seus tutoriais de CSS que você pode usar para melhorar o seu site de maneira rápida e fácil. Nenhum desses projetos leva mais de 20 minutos para ser concluído.

Clique nos links abaixo para ver os tutoriais completos e os arquivos de suporte.

1. Codifique layouts flexíveis
Hoje em dia, uma resolução de tela de 1.024x768 pode ser considerada 'padrão', fornecendo assim mais espaço, especialmente em termos de largura, para projetos de site. Este é também um momento em que somos continuamente martelados com informações, e os clientes regularmente exigem que você mostre simultaneamente 40 bilhões de coisas diferentes nos sites que você está criando para eles. Layouts flexíveis baseados em CSS, com base em uma estrutura de grade e medianiz subjacente, para sites com informações cheias de conteúdo, layouts flexíveis podem ser sua resposta.
Layouts flexíveis de código de leitura

2. Transforme seu tipo usando uma grade de linha de base
Uma grade de linha de base é algo que força o texto a aderir ao espaçamento em um bloco pautado. O ritmo vertical é mantido na página, o que é particularmente útil para livros, porque as palavras em uma página não serão visíveis nas lacunas entre as linhas do verso. No entanto, isso também resulta em ótimo espaçamento que é fácil para os olhos. O problema de impressão não é tão relevante online, mas o ritmo é - o texto pode ser difícil de ler na tela, então qualquer método que possa facilitar esse processo vale a pena investigar.
Leia Transforme seu tipo usando uma grade de linha de base

3. Construa uma barra de navegação gráfica escalável
Neste tutorial, o escritor explora uma barra de navegação gráfica semelhante à da Apple.com, mas que não é construída usando imagens fixas. Em vez disso, utiliza uma lista HTML (com texto HTML para o conteúdo do item da lista, significando que o texto pode ser ampliado), além de CSS para estilos, incluindo imagens de fundo.
Leia Construir uma barra de navegação gráfica escalonável

4. Crie mapas do site usando listas
Mapas de locais típicos são listas de seções, muitas vezes abrigando subseções, que por sua vez podem abrigar suas próprias subseções. Embora um desenho baseado em vetor seja um meio perfeitamente bom de ilustrar tal coisa, também existe uma lista básica de pontos de bala, com itens recuados representando o conteúdo da subseção. O único problema com uma lista de pontos é que o relacionamento entre as páginas e seus irmãos não é muito claro, mas - como os especialistas em CSS saberão - as listas de HTML são bastante versáteis e podem ser estilizadas de muitas maneiras diferentes, trazendo algum panache visual e usabilidade para o que era originalmente apenas um monte de bolhas pretas e palavras.
Leia Criar mapas do site usando listas

5. Alterne estilos de site com facilidade
Imagine todos no planeta sabendo como redimensionar o texto usando o navegador. Felicidade! Mas, infelizmente, eles não o fazem - uma campanha publicitária internacional seria necessária até para fazer um arranhão. Não apenas as pessoas não têm o conhecimento de como redimensionar o texto, a maioria não sabe que isso é possível, então elas não buscam informações sobre "como". Então, por que não incluir um alternador de estilo em seu site? Veja como.
Leia os estilos de site do Switch com facilidade

-------------------------------------------------------------------------------------------------------

Agora leia 10 tutoriais de Photoshop extremamente úteis e 10 tutoriais Flash extremamente úteis

Inscreva-se para receber gratuitamente o boletim informativo semanal da TechRadar
Receba notícias sobre tecnologia diretamente na sua caixa de entrada. Registre-se para receber a newsletter gratuita da TechRadar e fique por dentro das maiores histórias e lançamentos de produtos da semana. Inscreva-se em http://www.techradar.com/register

Siga o TechRadar no Twitter