Com o que temos disponível neste momento no que toca ao CSS3, criar uma tipografia fantástica em um website tornou-se uma tarefa mais fácil, sem a necessidade de utilizar ferramentas como o Adobe Photoshop para, inclusivamente, criar sombras e efeitos nas letras. Com a utilização de sombras, gradientes e transições de cores, é possível criar um lettering vistoso que irá captar a atenção dos seus visitantes. Antes de mais, queremos salientar que não temos nada contra os leitores que utilizam o Internet Explorer, e lamentamos informar que a compatibilidade desse mesmo navegador com algumas das últimas novidades em CSS3 é escassa quando comparado com outros navegadores, pelo que sugerimos que utilize aquele que na nossa óptica é o melhor navegador da atualidade, Google Chrome, ou em alternativa aquele é o seguinte na lista de compatibilidades, Mozilla Firefox ( Poderá verificar uma lista atualizada das compatibilidades aqui ). Feito o aviso e também a sugestão, chegou a hora de passarmos à ação e Criar Tipografia do outro mundo com CSS3!

css3

1. CRIAR O DOCUMENTO HTML

O primeiro passo é obviamente criar condições para levarmos avante o nosso artigo, pelo que iremos criar um documento HTML com um cabeçalho e um parágrafo de texto, apenas para efeitos de teste. Para tal, escolha um editor de código de sua preferência, (ou se não tiver algum, poderá utilizar o simples bloco de notas, uma vez que vamos fornecer todo o código utilizado) e insira o seguinte código:

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="refresh" content="3">
	<title>Criar Tipografia do outro mundo com CSS3</title>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
     <h1 titulo="Escola Criatividade"> <a href="#"> Escola Criatividade </a> </h1>

</body>
</html>

De notar que adicionámos um pequeno truque que irá fazer com que o documento HTML seja atualizado a cada 3 segundos no navegador com a linha <meta http-equiv=”refresh” content=”3″>. A introdução deste elemento é opcional.

2. ESTILIZAÇÃO

A estilização é o ponto chave neste artigo. Aquilo que pretendemos é alcançar o look na typografia que dá a sensação que foi feito em Photoshop, com sombras e caracteristicas que dificilmente alguém que não esteja dentro do assunto irá dizer que é apenas CSS3. Desta forma, vamos indicar-lhe os passos necessários para no final ter uma typografia de excelência que irá surpreender os seus visitantes e leitores. Crie um documento CSS e linke-o ao documento HTML.

Primeiro vamos definir um item básico, que é a cor de fundo do nosso documento, e definir um pequeno padding para puxar o conteúdo um pouco para dentro do documento:

body {
		background: #fff;
		padding: 3em;
	}

De De seguida passamos a definir alguns itens para o h1 utilizado no HTML, definindo o tamanho do tipo de letra e o seu tipo:

h1 {
		font-size: 100px;
		font-family: 'Verdana', helvetica, arial, sans-serif;
		letter-spacing: -2px;
}

Este passo apenas definiu alguns itens básicos, de notar o letter spacing negativo para juntar um pouco os caracteres. Poderá jogar com estes valores e chegar a um valor que mais de adeque ao que necessita.

De seguida vamos começar a introduzir a estilização que vai dar o look que pretendemos ao texto à tag h1 (adicione ao CSS existente):

position: relative;
text-shadow: 1px 2px 2px #292929;
-webkit-text-stroke: .5px grey;

Escola Criatividade

Isto vai fazer com que sura uma sombra no texto, definida pelos valores apresentados e com a cor definida. Mais uma vez, poderá alterar estes valores e cor de acordo com aquilo que pretende. A propriedade text-stroke irá adicionar uma pequena linha nos caracteres de .5 pixeis de cor cinzenta. Poderá alterar estes valores.

De seguida e uma vez que neste caso estamos a utilizar o texto como uma hiperligação, vamos definir alguns elementos para esse caso:

h1 a {
		text-decoration: none;
		color: #fff;
		position: absolute;

		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(240,230,140,0)), to(rgba(240,230,140,1)));
		text-shadow: 0 1px 0 #e9e9e9;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		transition: all .3s;
	}

Neste trecho de código temos várias situações. Primeiro definimos que não existem text decorations neste elemento, definimos a sua cor e adicionamos uma máscara que irá permitir que seja criado o gradiente no texto. Definimos qual o tipo de gradiente, definimos a sua direcção e por fim definimos as cores através de RGBA, que não só define as cores como também define a sua opacidade. Definimos ainda a velocidade de transição dos elementos, tentando fazer com que seja compatívl também com Firefox (mais uma vez recomendamos a utilização de Google Chrome). A cor que irá surgir na zona transparente será definida no h1:after que vamos introduzir a seguir.

Introduza o seguinte código na sua folha de estilos em cascata:

h1:after {
		color: #dadada;
		content : attr(title);
	}

Neste pequeno trecho de código poderá reparar na linha content: attr (title); – isto faz com que o valor definido no HTML com o atributo title seja puxado dinamicamente, permitindo assim que não seja necessário estar a alterar o CSS quando necessitar de alterar as palavras ou palavra utilizadas.

No entanto, apesar de já termos definido alguns elementos chave para a conclusão deste artigo, falta um dos mais importantes que é o hover. O hover é quando você passa o mouse por cima do elemento (neste caso é texto), e poderá adicionar alguns eventos quando isso é feito. Assim, aquilo que pretendemos é que quando o mouse passar por cima do conteúdo, ele se altere e adquira diferentes cores, ainda utilizando um gradiente suave. Para isso adicione o seguinte código à sua folha de estilos em cascata:

h1 a:hover {
		color: #ffd700;
		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.8)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,.8)));

	}

Escola Criatividade

Aqui definimos novas cores e opacidade para o gradiente, fazendo com o que o texto mude de cor quando é feito o hover. Basicamente este técnica consiste na utilização de técnicas CSS3 que infelizmente não são compatíveis com todos os navegadores existentes, limitando um pouco a sua visibilidade por parte de alguns visitantes. Mais uma vez saliento que pessoalmente prefiro a utilização de Google Chrome, que além de ser um navegador super rápido é aquele que mais compatibilidades oferece em relação aos elementos CSS3 existentes atualmente.

Para os nossos leitores que não estão à vontade com a conclusão deste artigo, facultamos os ficheiros fonte aqui para que possa ter tudo nas suas mãos e experimentar novas cores, novos valores e aprender praticando aquilo que foi falado aqui hoje. Sem dúvida que a melhor maneira que você tem para aprender algo é praticando, experimentado e errando, aprendendo com os seus erros, tirando notas e conclusões que lhe irão ser úteis no futuro, não se restringindo apenas a seguir instruções dadas em um tutorial como este. Abra o seu editor de código preferido e nos ficheiros fonte deste artigo e experimente, invente e tente coisas novas, e garantidamente irá aprender um pouco mais do que aquilo que estava à espera inicialmente.

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Theo K. Silva
    15 de maio de 2012

    Estou doido pra fazer um curso e me especializar na área. Acho isso tudo tão lindo! :D



    • Diogo Espinha
      18 de maio de 2012

      Olá Theo, CSS é definitivamente uma área interessante, e apoio o seu interesse em querer aprender e se especializar na área. Obrigado pela sua visita e comentário, abraço!


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz