Quantcast
Channel: Abduzeedo - Design Inspiration and Tutorials
Viewing all articles
Browse latest Browse all 5330

Experimentos com Swiss Style no CSS

0
0
Experimentos com Swiss Style no CSS

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


Viewing all articles
Browse latest Browse all 5330

Latest Images

Trending Articles





Latest Images