Neste tutorial ensinarei como criar um CSS Poster utilizando as fontes disponibilizadas pelo Google Font API e um pouco de CSS3. A idéia principal deste tutorial é de explorar de forma criativa o novo recurso da Google, além de provar a enorme aplicabilidade, beleza e importância que a tipografia possui no web design.
Veja o que iremos criar:
OBS: Esta página foi testada nas versões mais atuais dos seguintes navegadores: Google Chrome, Safari e Firefox. Obviamente não irá funcionar corretamente em nenhuma versão do Internet Explorer e pode apresentar algumas poucas falhas no Opera.
1.Estrutura XHTML
Cada trecho de texto possui uma fonte e configuração distintas, por isso trataremos individualmente de cada um através de classes específicas.
Adicione ao cabeçalho do documento os códigos das fontes que serão utilizadas, pegue-os no Google Font Directory. Serão elas:
Cantarell
Lobster
Yanone Kaffeesatz
Reenie Beanie
As fontes Cantarell e Yanone Kaffeesatz, ficarão em o negrito portanto você terá que pegar o código oferecido pelo Developers Guide.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Font API CSS Poster</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="content">
<div id="main-poster">
<div id="logo-bg">
<div id="logo-bg2">
<span class="logo"><a href="http://www.be-insight.com">Insight</a></span>
<span class="presents">presents</span>
</div>
</div>
<div class="description">A Google Font API concert</div>
<span class="city-and-colour">CITY AND COLOUR</span>
<div class="tegan-and-sarah">Tegan and Sarah</div>
<div id="image-poster">
<img src="img/poster-img.jpg" /></div>
<div class="details">
06/23/10 . Chicago, IL . Great Kitchen . All ages . Free
</div>
</div>
</div>
</body>
O resultado será esse:
2. Folha de Estilo / CSS
2.1. body e content
Utilizei um pattern de madeira como imagem de fundo para o body e adicionei algumas configurações padrões. Delimitei a largura (width) do content em 500px e ajustei sua margem e espaçamento, para que o conteúdo se apresente sempre centralizado.
body {
background-color:#fff;
background-image: url(img/pattern.jpg);
background-repeat:repeat;
background-position:center;
margin:0 auto;
color:#363636;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
#content{
margin:0 auto;
padding: 0 auto;
width:500px;
}
2.2. main-poster
Além de uma cor chapada, fiz o uso de uma textura de papel, editada no Photoshop CS5. A textura utilizada pode ser encontrada neste link. Fiz uso do box-shadow para dar a impressão de que o pôster está colado na parede.
#main-poster{
width:500px;
background: #c7b299 url(img/poster-bg.jpg) no-repeat top;
padding:20px;
margin: 30px 0 30px 0;
-webkit-box-shadow: 0px 4px 8px #000;
-moz-box-shadow: 0px 4px 8px #000;
}
2.3. logo
Usei o border-radius com um valor exagerado a fim de criar círculos ao invés de quadrados (padrão) e cores RGB com transparência para o preenchimento.
#logo-bg{
background: rgba(0, 0, 0, 0.2);
padding:5px;
margin:0px;
width:93px;
height:93px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}
#logo-bg2{
background:rgba(0, 0, 0, 0.2);
padding:5px;
margin:3px;
width:78px;
height:78px;
-webkit-border-radius:80px;
-moz-border-radius:80px;
}
Tratei as palavras Insight e presentes separadamente, centralizando-as.
.logo a{
font-family:'Lobster', arial, serif;
text-decoration:none;
position:relative;
top:20px;
font-size:23px;
color:#fff;
padding:0 auto;
margin:0 auto;
}
.presents{
font-family:'Cantarell', arial, serif;
position:relative;
top:15px;
left:13px;
font-size:10px;
color:#fff;
padding:0 auto;
margin:0 auto;
}
2.4. Descrição – A Google Font API Concert
.description{
font-family:'Cantarell', arial, serif;
font-weight:bold;
font-size:15px;
margin:20px 0 0;
padding:5px 0;
width:100%;
border-top:5px solid #363636;
border-bottom:5px solid #363636;
color:#363636;
}
2.5. Atração principal – city-and-colour
Usei um valor alto para o tamanho da fonte (fazendo esse trecho ocupar a largura total do main-poster) e utilizei diversos text-shadows para criar um efeito de profundidade em 2D.
.city-and-colour{
font-family: 'Yanone Kaffeesatz', arial, serif;
font-weight:bold;
font-size:100px;
padding:0 auto;
margin: 0 auto;
text-shadow: 1px 1px #c7b299, 2px 2px #c7b299, 3px 3px #c7b299, 4px 4px 1px #ac977f, 5px 5px 1px #ac977f;
}
2.6. Abertura – Tegan and Sarah
Tratei este trecho criando uma div para poder controlar melhor suas dimensões. Fiz uso do recurso transform para inclinar o elemento.
.tegan-and-sarah{
font-family: 'Reenie Beanie', arial, serif;
font-size:30px;
position:relative;
top:-25px;
left:295px;
color:#fff;
background:#de6540;
margin:0px;
padding:2px;
width:202px;
height:36px;
-webkit-box-shadow: 0px 2px 6px #313131;
-moz-box-shadow: 0px 2px 6px #313131;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}
2.7. Imagem / Ilustração
#image-poster img{
border:5px solid #363636;
width:490px;
height:392px;
padding:0 auto;
margin:-40px 0 0 0;
}
2.8. Detalhes adicionais
Todo show tem data, hora e local para acontecer. Fiz uso de uma margem superior negativa para “colar” esse elemento à ilustração.
.details{
font-family:'Cantarell', arial, serif;
font-weight:bold;
font-size:17px;
color:#c7b299;
background:#363636;
width:100%;
padding:0 0 7px 0;
margin:-5px 0 0 0;
}
Esperamos que tenha gostado do resultado e que de alguma forma este tutorial possa te ajudar na exploração deste novo e excelente recurso que a Google está disponibilizando gratuitamente.
Mais informações sobre o Google Font API:
