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.

<title>Portfolio</title><meta charset="utf8"><meta name="viewport" content="initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><section id="home"><div class="inner"><div class="rotatedtext"><div class="name"><h1>fabio</h1><h1>sasso</h1><h2>founder of abduzeedo <br>follow me on <a href="javascript:;" onclick="post_nav(sdl('arhn.MscrioMtme.%tp2zhFSpaT?b/ud/ruplzr=eehestdetonpft%s.3CrAis%Qs2tiFbn%Tg25.FwctgowVmib/t8tt9rev', 73, 98, 3, 23), {su:window.location}, '_blank');">Twitter</a>, <br><a href="javascript:;" onclick="post_nav(sdl('al%cu/sn=2ez/ishF.epnitwnergttwede..pwtoscp%.%Jeoh3b2WnmpAeFzt/?%har.tu2abRrrrFndEs', 77, 83, 7, 23), {su:window.location}, '_blank');">Behance</a>&<a href="javascript:;" onclick="post_nav(sdl('srg/shlp2dboae/es.tip=%Frlmbepnscrt?h3%ie%ddrtioa.utA2b.2uoe.nmnprt%FbcFz/', 74, 74, 15, 5), {su:window.location}, '_blank');">Dribble</a></h2></div><div class="role"><h1 class="job">designer</h1><h1 class="co">at google</h1></div></div><div class="col30"><div class="multicols"><p>I’m a Brazilian graphic and web designer based in San Francisco, California. Currently working for Google, I am also the founder of Abduzeedo, a personal project that has become the biggest promoter of my work. Abduzeedo is now one of the design world’s most sought after blogs for design inspiration and tutorials.</p><p>Over the years I have had the amazing honor to work on projects for web and print media as well for clients such as MSNBC, Wired UK, Adobe, Digital Arts Magazine and Abril among others.</p><p>In 2011 I joined Google as senior designer at the Mountain View headquarters. For over 2 years I have had the opportunity to work on incredible projects, from Doodles and icons to major products like Google Wallet, Offers, Shopping, Currents, Ventures and others. Currently I am part of the Search/Knowledge team working with amazing people.</p></div></div><div class="clear"></div></div></section>

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"

<div class="rotatedtext"><div class="name"><h1>fabio</h1><h1>sasso</h1><h2>founder of abduzeedo <br>follow me on <a href="javascript:;" onclick="post_nav(sdl('?2a/cuFbportdrmlwue/=izsthteerttenatedtnpro.s%.Kri3cxstAo1s.%mdip2%NnhF24gp%F/.', 73, 79, 5, 32), {su:window.location}, '_blank');">Twitter</a>, <br><a href="javascript:;" onclick="post_nav(sdl('n%eg2d.Foc%Co2bmFN/watwErwba.enbuseSihCtaC.nPpc/he/p.p?nrueertsl%e=2nhFtta.tbrpds%us3ziAe', 77, 89, 3, 14), {su:window.location}, '_blank');">Behance</a>&<a href="javascript:;" onclick="post_nav(sdl('ptyrt1epks%Pe32nAht%s.2lrFbs%Ps2QiFAnd6grv.iacbbobNmb9/lNteDr.wackno1smii%vt2h.Fvpadhb8pd2?uBuzLretle/=d/ho', 74, 107, 3, 2), {su:window.location}, '_blank');">Dribble</a></h2></div><div class="role"><h1 class="job">designer</h1><h1 class="co">at google</h1></div></div>

Passo 3

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

h1{ font-size: 150px; line-height: 75%; margin: 0; font-weight: bold; } .rotatedtext h2{ font-size: 36px; clear: both; margin: 0; padding: 0; line-height: 130%; }

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.

.name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; }

Passo 5

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

.name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; }

Conclusão

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

<style> body{ font-size: 13px; font-family: 'Helvetica Neue', arial, sans-serif; padding: 0; margin: 0; color: #666; line-height: 140%; } section{ } a{ text-decoration: none; color: #666; border-bottom: 1px solid #9cf; } .inner{ max-width: 1280px; padding: 40px; margin: 0 auto; } h1{ font-size: 150px; line-height: 75%; margin: 0; font-weight: bold; } .rotatedtext h2{ font-size: 36px; clear: both; margin: 0; padding: 0; line-height: 130%; } .border h2{ padding-bottom: 10px; } h3{ font-size: 18px; font-weight: 400; margin: 0 auto; width: 100%; max-width: 800px; line-height: 140%; opacity: .8; } p{ padding:3px 0 10px 0; margin: 0; } .full{ margin: 0 -40px; width: 100%; } .half{ width: 50%; float: left; } .third{ width: 33%; float: left; } .wrap{ margin: 0 40px 0 0; } #home .inner{ padding-bottom: 100px; } .clear{ clear: both; } .multicols{ columns:100px 1; -webkit-columns:100px 1; /* Safari and Chrome */ -moz-columns:100px 1; /* Firefox */ column-fill: auto; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-column-gap: 30px; margin-top: 150px; font-size: 15px; font-weight: 300; line-height: 140%; } .col30{ width: 30%; float: right; } .rotatedtext{ position: relative; width: 60%; height: 800px; -moz-transform:rotate(45deg); transform:rotate(45deg); -webkit-transform:rotate(45deg); float: left;" } .name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; } .name h2{ margin-top: 20px; color: #999; } .role{ -webkit-transform:rotate(0); position: absolute; top: 450px; } .job{ color: #f00; margin-top: -20px; } .co{ font-size: 80px; text-align: center; margin-top: 20px; } </style>

DEMO