Na semana passada eu comecei a fazer experimentos com CSS para o meu novo site pessoal. Decidi pular a parte Photoshop/Fireworks/Illustrator e ir de rascunhos e ideias para o HTML/CSS. Esse processo me ajuda a melhorar minhas habilidades de código, especialmente para rapid prototyping. O primeiro experimento que fiz foi criar uma página simples com texto e textos com ângulos de 45 graus, inspirado no "Swiss Graphic Design Style".

Neste post eu quero mostrar para vocês um pouco do processo criativo por trás da ideia. O design todo usa fontes básicas, se você usa MAC vai ver em Helvetica, enquanto outras plataformas podem fazer render em Arial ou Roboto (android).

Fiquem a vontade para comentar, dar sua opinião e sugestões para melhorar o código.

Passo 1

Para começar, vou mostrar o arquivo HTML básico. Você pode ver a estrutura do documento. Pode parecer que tem muitos nested DIVs mas fiz isso porque no futuro vou extender o conteúdo do site. Agora vamos focar no texto.

Passo 2

Agora vamos colocar o foco no texto angulado. Usei H1 e H2 para o texto e coloquei eles dentro de um DIV com um class chamado "roatedtext"

Passo 3

A primeira coisa a fazer é ajustar o tamanho das fontes usando CSS

Passo 4

Para girar o texto vamos usar CSS transformation (transform:rotate(deg)). A primeira coisa a fazer é girar o bloco 90 graus. Use transform:rotate(-90deg);. Use negative para trocar a direção.

Passo 5

Agora apenas gire o container DIV com os textos. Use 45 graus para criar um texto perfeito Swiss style.

Conclusão

Aqui está o CSS final de quando finalizei o experimento.

DEMO

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.