Layout De Revista
A enorme quantidade de tutoriais disponíveis demonstrando as possibilidades do CSS 3 transparece a excitação da comunidade em torno do assunto. Todas as possibilidades são exploradas e demonstram como esta nova versão do CSS tem o potencial de mudar a web.
Um problema compartilhado pela maioria dos tutoriais é a restrição no funcionamento do código à ultima versão dos navegadores. O que torna a utilização e implementação do código para uso rotineiro bastante difícil.
Pensando nisso, decidi criar uma página, que apesar de trazer todas as novidades, ainda assim consegue funcionar nos navegadores que ainda não oferecem suporte ao CSS 3 e HTML 5 (IE..).
A disposição dos elementos será feita tendo como base a utilizada pelas revistas, onde o texto é divido em colunas e existem blocos para assuntos relacionados. Será utilizada uma fonte não padrão e adicionados efeitos utilizando apenas CSS. Veja abaixo o resultado final no Firefox 3.6 :
Não serão utilizados nem código javascript nem behaviors para que o CSS funcione em todos os navegadores. O principal objetivo deste tutorial é mostrar a aplicação de seletores e propriedades CSS 3 o que limita o funcionamento completo às últimas versões dos navegadores. Claro que haverá um cuidado para que funcione no maior número possível de navegadores, mas apenas o que for possível através do CSS.
O HTML
O único javascript utilizado será para evitar que o layout quebre nos navegadores que não interpretam o HTML 5. No cabeçalho da página será adicionado:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Entre as tags body vai o seguinte código:
<div class="global-div">
<header>
<h1>Lorem ipsum</h1>
</header>
<div class="esq-div">
<article>
<div class="citacao">
<aside>
< blockquote> Aenean non enim eget diam aliquam tristique.</ blockquote>
</aside>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean odio sem, mattis malesuada, consectetuer eu, ultricies convallis, lacus. Praesent non orci. Donec sagittis metus vel massa. Nulla facilisi. Proin justo. Aenean ac massa. Quisque vel risus. Morbi ipsum. Integer odio eros, dapibus eget, egestas sed, lacinia dictum, nunc. Maecenas pellentesque rhoncus lectus. Nulla facilisi. Pellentesque eget libero et tortor hendrerit venenatis. Aliquam tempus, felis in ornare congue, lacus mi consectetuer risus, sit amet luctus orci nisl at dui. Aenean ligula sem, pretium sed, tincidunt sit amet, accumsan eget, justo. Nam in massa. Cras turpis velit, volutpat eu, vestibulum at, pellentesque vel, dui.</p>
<p> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent rutrum malesuada urna. Aliquam sollicitudin. Pellentesque id nisi. Duis in mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac elit. Etiam posuere venenatis ante. Nunc ullamcorper neque ac justo. Donec id purus. Aenean non enim eget diam aliquam tristique. Mauris pellentesque pulvinar dui. Donec et arcu ut leo laoreet vulputate. Aenean a magna et massa ornare congue. Phasellus a tellus vitae enim ornare laoreet.<br>
Integer viverra, odio sed sollicitudin malesuada, magna mauris cursus nulla, non ultricies arcu massa in tellus. Duis velit nibh, porttitor non, sodales at, iaculis eget, lectus. Curabitur vitae ante. Mauris dapibus consequat mi. Sed at quam a lacus varius tempus. Phasellus scelerisque suscipit justo. Morbi ac justo eu arcu ornare facilisis. Donec et est. Morbi et lectus. Suspendisse et augue. Vivamus enim eros, condimentum vel, sodales vel, ullamcorper vitae, purus.<br>
Donec non felis quis augue interdum accumsan. Nulla at libero. Nunc ultricies auctor sapien. Praesent quis quam et massa tincidunt luctus. Vivamus nibh. Sed ligula. Nunc non est a augue tempor lacinia. Mauris lectus pede, porta tempus, ultrices sed, dignissim sed, justo. Suspendisse porta. Fusce arcu. Sed vehicula libero a odio.
<br>
Ut magna urna, tincidunt nec, eleifend sit amet, auctor pretium, nisi. Suspendisse arcu enim, commodo at, facilisis in, feugiat sit amet, quam. Praesent ut lacus. Maecenas sed metus. Nulla sed urna. Donec vitae ipsum quis quam cursus porttitor. Curabitur justo elit, pulvinar eu, condimentum consectetuer, tristique vel, velit. Suspendisse libero massa, scelerisque eget, malesuada ut, ultricies aliquam, neque. Curabitur elementum est sed magna. Morbi enim. Ut dignissim mattis justo. Nunc justo.<br>
Fusce purus. Curabitur eu ligula. Vestibulum ultricies hendrerit elit. Nulla a metus. Aenean aliquam. Phasellus nec massa. Nullam vehicula neque id magna ornare elementum. Phasellus luctus, lorem non ornare laoreet, ligula elit ultrices metus, vel scelerisque dolor velit nec risus. Ut orci. Nullam luctus, mauris et ultricies mattis, nisi felis auctor dui, sed elementum nisl felis sit amet lectus. Donec mauris odio, condimentum sit amet, semper sed, scelerisque eu, est. Aliquam pellentesque, ipsum id fermentum pretium, augue orci convallis magna, ut vulputate magna est vel enim. Nulla quis est mattis massa scelerisque tristique. Vestibulum id turpis. Proin ultrices. Proin lacinia nisi vehicula nunc. Nullam nec velit nec erat aliquam scelerisque.Aliquam pellentesque, ipsum id fermentum pretium augue orci convallis magna.<br>
</p>
</article>
</div>
<div class="dir-div">
<article>
<figure>
<img src="img.jpg" width="276" height="184" alt="imagem">
<figcaption>Lorem ipsum é um texto padrão em latim.</figcaption>
</figure>
<p>Em design gráfico e editoração, Lorem ipsum é um texto utilizado para preencher o espaço de texto em publicações (jornais, revistas, e websites), com a finalidade de verificar o lay-out, tipografia e formatação antes de utilizar conteúdo real. Muitas vezes este texto também é utilizado em catálogos de tipografia para demonstrar textos e títulos escritos com as fontes.</p>
<p>Lorem ipsum é um texto padrão em latim. Em documentos utilizados para testes, este tipo de texto é utilizado para evitar que as pessoas foquem a atenção no texto e se concentrem nos aspectos visuais. O lorem ipsum simula com razoável fidelidade um texto real, por possuir palavras de diversos tamanhos e sinais de pontuação, permitindo testar também a forma como o texto flui nas caixas e campos de formatação.</p>
<p>Ao contrário da crença popular, Lipsum (Lorem Ipsum abreviado) não é simplesmente um texto qualquer com um monte de letras. Ela tem raízes numa peça clássica da literatura latina de 45 A.C., fazendo com que este famoso texto tenha mais de 2000 anos de idade. Richard McClintock, um professor de Latim na Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em Latim, "consectetur" , da passagem de Lipsum, e indo a fundo nas citações da literatura clássica descobriu de uma fonte segura que Lipsum vem das seções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal) escrito por Cícero em 45 A.C.. Este livro trata da teoria de ética, muito popular durante a Renascença.</p>
</article>
</div>
<footer>
<p >Escrito por <a href="http://www.maiconweb.com" title="Web designer">Maicon Sobczak</a> para <a href="http://www.webmaster.pt" title="Tutoriais ">Webmaster.pt</a></p>
</footer>
</div>
<code>
Sobre as tags HMTL 5 no código: a <strong>header</strong> define o título da página; a <strong>article</strong> engloba conteúdo que pode ser isolado da página sem perder o significado; a <strong>aside</strong> define uma citação; <strong>figure</strong> indica imagem; <strong>figcaption</strong> a legenda para a imagem e <strong>footer</strong> o rodapé com informações adicionais.
Você pode saber mais sobre estas tags acessando a página com os tutorias sobre HTML 5:
<ul>
<li><a href="http://www.webmaster.pt/html5-parte1-4955.html">Conheça O HTML 5 Parte 1</a></li>
<li><a href="http://www.webmaster.pt/html5-parte2-5094.html">Conheça O HTML 5 Parte 2</a></li>
</ul>
<h2>Gradiente No Fundo</h2>
O fundo do texto terá um gradiente do azul claro para o branco. E vamos fazê-lo sem a necessidade de imagens. Apenas com a propriedade <strong>gradient</strong>. No código abaixo estão listadas apenas as regras necessárias para o efeito deixando de forma as demais responsáveis pelo posicionamento e outros aspectos.
<code>
body{ background:#e8fdff;}
.global-div{
background:-moz-linear-gradient(top, #e8fdff, #fff);
background:-webkit-gradient(linear,left top, left bottom, color-stop(0,#e8fdff), color-stop(.5,#fff));}
O fundo da página será azul claro. A div que contém o texto terá um gradiente no fundo. As regras para o Firefox e Chrome/Safari diferem neste ponto. Na primeira regra, já definimos no nome que é um gradiente linear, ele parte do topo com a cor azul claro e termina na base com a cor branca, tendo como ponto médio subentendido o meio.
Já a regra para o Chrome/Safari, exige mais parâmetros. Você informa que ela será linear a partir do canto esquerdo superior em direção ao esquerdo inferior, com a cor do topo no ponto zero e a cor inferior a partir do meio do gradiente.
Fica como dica esta ferramenta [4], que pode auxiliar na criação dos gradientes.
A Fonte
No título e primeira letra do texto utilizaremos uma fonte não padrão dos navegadores. A England Hand DB. Mas ao invés de usar uma das tantas soluções de substituição de fonte com flash, javascript ou PHP, vamos utilizar a propriedade CSS @font-face.
Será preciso importar fonte no formato TrueType e OpenType que funciona na maioria dos navegadores e Embedded OpenType para o Internet Explorer. Um tanto de trabalho…
Mas para nossa sorte, existe um website fantástico chamado Font Squirrel que disponibiliza fontes grátis para uso comercial em pacotes prontos para utilizar com a @font-face. Siga os passos:
- Acesse Font Squirrel [5];
- Digite no campo de pesquisa à direita superior “england” e mande pesquisar;
- Clique sobre a fonte England Hand DB para ser levado à página dela. Nesta página faça o download clicando no link “@font-face kit”;
- Salve na pasta da página que estamos criando renomeando a pasta descompactada para “fonte” e deixe ela na raiz do website.
Veja na pasta “fonte” que temos todos os formatos necessários. Tem também um arquivo do tipo folha de estilo chamado “stylesheet.css”. Abra o arquivo. No conteúdo temos as linhas:
@font-face {
font-family: 'EnglandHandDBRegular';
src: url('england-webfont.eot');
src: local('☺'), url('england-webfont.woff') format('woff'), url('england-webfont.ttf') format('truetype'), url('england-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
Copie tudo e cole no arquivo CSS que vamos trabalhar.
Na propriedade ‘font-family’ definimos como vamos os referir a fonte no decorrer do código. Mude de ‘EnglandHandDBRegular’ para somente ‘England’. Desta maneira fica mais fácil de trabalhar.
Na linha seguinte inicia a busca pela fonte que será implementada. Primeiro é pesquisada a fonte ‘.eot’ para que funcione no Internet Explorer. Depois é feita a busca no próprio computador do usuário. Substitua o smile pelo nome completo da fonte ‘EnglandHandDBRegular’. Não encontrando no computador do usuário, é importada a fonte no formato ‘woff’, um formato aberto para uso na internet. Em seguida buscada a fonte nos formatos TrueType e SVG se nenhum dos anteriores funcionar.
Como os arquivos estão dentro da pasta ‘fonte’, precisamos alterar o caminho. Este trecho alterado na nossa folha de estilo fica:
@font-face {
font-family: 'England';
src: url('fonte/england-webfont.eot');
src: local('EnglandHandDBRegular'), url('fonte/england-webfont.woff') format('woff'), url('fonte/england-webfont.ttf') format('truetype'), url('fonte/england-webfont.svg#webfont') format('svg');
font-weight: bold;
font-style: normal;
}
O Título E Primeira Letra
Com a fonte configurada, podemos utilizá-la na estilização do título do texto.
h1{
font: 12em England;
color:#ffae00;
text-align:center;
margin:-20px 0 8px 0;
text-shadow:3px 2px 0 #d2eef1;
-webkit-transition:color .5s ease-out;
transition-property:color .5s ease-out;}
h1:hover{
color:#d2eef1;
text-shadow:3px 2px 0 #ffae00;
-webkit-transition-property:color .5s ease-out;
transition-property:color .5s ease-out;}
header{display:block;}
Por ser uma fonte script, a England funciona melhor com a fonte em tamanho grande. Merece menção o text-shadow que cria uma sombra levemente mais escura que o fundo. A transição, grande estrela do CSS 3, funciona somente no Chrome e Safari. Nesta linha, é definida que a propriedade cor, se for diferente da amarela, vai retornar a ela em meio segundo; mais rapidamente quando chegar ao final do efeito (ease-out).
No estado :hover ocorre apenas a inversão das cores do texto e da sombra. Também com efeito.
A tag header é definida como elemento de bloco para ocupar toda a extensão superior da página.
Para capitular a primeira letra do texto vamos utilizar uma soma de seletores para evitar a utilização de marcação desnecessária.
.esq-div p:first-of-type:first-letter{
font-family:England;
font-size:600%;
margin:10px 30px 0 0;
float:left;}
Lendo de trás para frente selecionamos a primeira letra(first-letter) do primeiro elemento parágrafo (first-of-type) existente dentro da ‘esq-div’.
A fonte será England e 600 por cento maior que o restante do texto. Para encaixar entre as três primeiras linhas é flutuada à esquerda.
O Texto Em Colunas
Com o CSS 3 podemos facilmente dividir o texto em quantas colunas quisermos, ainda definindo a distancia entre elas e o divisor.
.esq-div > p:not(:nth-child(2)){
-webkit-column-count: 2;
-webkit-column-gap: 30px; >
-moz-column-count: 2;
-moz-column-gap: 30px;
column-count: 2;
column-gap: 30px;}
.esq-div p:nth-child(2){margin-bottom:15px;}
Na nossa página, o primeiro parágrafo não será divido para que a citação fique mais bem encaixada. Então temos que excluí-lo da seleção. Mais uma vez fica mais fácil entender lendo os seletores de trás para frente. Exceto (:not) os dois primeiros parágrafos(:nth-child(2)) pertencem à ‘esq-div’, todos os outros serão divididos em duas colunas distantes 30 pixels uma da outra.
Na regra seguinte selecionamos o primeiro parágrafo para aplicar uma margem inferior de forma a distanciá-lo do restante do texto e melhorar o resultado final.
A Citação
O primeiro parágrafo esta corrido, enquanto o restante do texto esta dividido em duas colunas. Agora vamos encaixar a citação.
.citacao{
width:150px;
height:150px;
padding:30px;
position:relative;
float:right;
margin:5px;
background:#ffae00;
-moz-border-radius:150px;
-webkit-border-radius:150px;
border-radius:150px;
-moz-box-shadow:3px 3px 0 #d2eef1;
-webkit-box-shadow:3px 3px 0 #d2eef1;
box-shadow:3px 3px 0 #d2eef1;
}
.citacao:hover{
-webkit-transform:rotate(-15deg) scale(1.2);
-moz-transform:rotate(-15deg) scale(1.2);
transform:rotate(-15deg) scale(1.2);
z-index:900;
-webkit-box-shadow:0 0 5px #999;
-moz-box-shadow:0 0 5px #999;
box-shadow:0 0 5px #999;}
.citacao blockquote{
text-align:center;
font:bold italic 2.3em "Times New Roman", Times, serif;
line-height:1.4em; }
.citacao blockquote:before, .citacao blockquote:after{
content:'\201C';
display:block;
margin:0 0 -20px 0;
font-size:3em;
color:#cb8a00;
text-align:left;}
.citacao blockquote:after{
content:'\201D';
margin:0 5px -5px 0;
text-align:right;}
Para que a div fique redonda é necessário que tanto a largura quanto a altura sejam do mesmo tamanho. O arredondamento das bordas por sua vez será igual a largura ou altura dela. Uma sombra na mesma direção e cor da aplicada no título adiciona um leve efeito e assegura a integridade.
Quando o mouse pousar sobre esta div, ela vai ‘pular’, aumentando de tamanho. Para isso é utilizada a propriedade transform. No efeito, existe a rotação anti-horária em 15 graus negativos com o leve aumento do bloco. Para tornar o efeito mais verossímil, a sombra é alterada do azul claro chapado para um cinza com bastante difusão. O elemento também é trazido para a frente de todos os outros com o z-index.
As aspas em torno do texto são inseridas utilizando os pseudo-elementos :after e :before. Na propriedade content é definido o conteúdo a ser adicionado. Não são utilizados os valores “open-quote” e” close-quote” porque o Chrome/Safari não interpretam. Então usamos os caracteres unicode correspondentes.
Caixa De Texto
A exemplo das matérias de uma revista ou jornal foi adicionada uma caixa de texto na lateral com informações ligadas ao texto principal.
.dir-div{
position:relative;
float:left;
width:280px;
height:auto;
background:#fff;
padding:10px;
-moz-box-shadow:0 0 7px #ccc;
-webkit-box-shadow:0 0 7px #ccc;
box-shadow:0 0 7px #ccc;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;}
Além das propriedades habituais para definir largura, posicionamento e espaçamento, foram adicionadas mais algumas para melhorar a aparência. Uma sombra bem difusa, mas com um cinza claro destaca a caixa. Os cantos arredondados tornam o design mais agradável.
Mais uma vez além da propriedade normal, é necessário adicionar os prefixos referentes aos navegadores.
O texto da caixa é um pouco menor que o da matéria além de ter a primeira linha mais destacada.
.dir-div p{font-size:1.2em;}
.dir-div p:first-of-type:first-line{font-weight:bold; }
.dir-div p:not(:last-child){margin-bottom:10px;}
Primeiro o tamanho do texto é reduzido. E começam os seletores CSS 3. Iniciamos os trabalhos procurando pela primeira linha do primeiro parágrafo deste texto para finalmente adicionar negrito. É adicionada margem entre os parágrafos para tornar a leitura mais agradável, exceto o último parágrafo para evitar espaço excessivo em relação à borda.
Legenda Para A Imagem
Quando o mouse pousar sobre a imagem, será mostrada uma legenda na parte superior da imagem. Mas primeiro vamos relembrar a estrutura HTML desta parte.
<figure>
<img src="img.jpg" width="276" height="184" alt="imagem">
<figcaption>
Lorem ipsum é um texto padrão em latim.
</figcaption>
</figure>
A tag figure informa que o conteúdo é uma imagem (…) enquanto a figcaption serve justamente para ser uma legenda da imagem.
.dir-div img{
border:2px solid #c7b3a0;
margin-bottom:10px;
position:relative;
float:left; }
figcaption{
display:none;
font:1.2em Arial, Helvetica, sans-serif;
background-color:#fff;
background-color:rgba(255,255,255,0.8);
border:2px solid #eaeaea;
position:absolute;
top:10px;
width:90%;
padding:3px;
text-align:center;
border-bottom:1px solid #fff;
text-shadow:0 0 1px #999;}
.dir-div img:hover + figcaption{
display:block;
z-index:500; }
A propriedade chave na estilização do elemento imagem é o posicionamento relativo. Com isso ela se torna o ponto de referência para a legenda.
E falando na legenda, a principio ela não é mostrada graças ao display:none. Por que dois background-color? O primeiro vale para o IE, que não entende o RGBA. Definindo a cor do plano de fundo com o RGBA permite a você definir transparência, representada pelo canal Alpha do nome. A legenda é posicionada absolutamente em relação à imagem e o texto tem uma sombra para melhorar o contraste.
Agora vamos fazer com que ela apareça. Isso ocorre quando o mouse pousar sobre (:hover) a imagem. Isso acontencendo o figcaption adjacente será mostrado com o display:block e posicionado acima dos outros elementos com o z-index.
Rodapé
O HTML 5 tem uma tag especial para englobar informações adicionais, como por exemplo o autor, comentários. É a footer. Vamos estiliza-la para finalizar a página.
footer{
display:block;
float:left;
width:100%;
background:#ffae00;
margin-top:10px;
padding:5px;
text-align:center; }
Pelo que nós já vimos até aqui, até que esta estilização esta tranquila de entender. O bloco ocupa toda a extensão disponível com o texto centralizado e bem espaçado.
Conclusão
Como você pode conferir, apesar da aparência simples, nesta página foram aplicados grande parte dos seletores e propriedades trazidos pelo CSS 3.
Se você ficou um pouco perdido, acesse aqui no Webmaster.pt os artigos explicando tanto os aspectos do HTML 5:
Download do código usado neste tutorial: Layout De Revista Com HTML5 E CSS3 [8]
