Nesta aula vamos aprender como aplicar efeitos de transição nos links da página e como utilizar fontes do

Google.

Por um bom tempo um site com animações precisava do Flash para criar uma interação. Hoje o CSS3 já possui
suporte para realizar efeitos, algo que permite que funcione com mais rapidez e em dispositivos móveis.

Usar fonte para embelezar o texto era algo restrito, mas hoje, através do Google, podemos aplicar fontes
modernas no nosso site.

11. Propriedade Transition.

Com CSS3, podemos adicionar um efeito quando o navegador troca de um estilo para outro, sem usar
animações em Flash ou JavaScript.

A propriedade Transition permite essa interatividade.

Veja algumas propriedades de transição.

transition-property

Essa propriedade define as propriedades CSS que serão aplicadas às transições. Observe os exemplos a seguir.

seletor {

transition-property: background-color; // transição na cor de fundo

seletor {

transition-property: background-image, color; // transição na imagem de fundo e cor do texto

seletor {

transition-property: all; // transição em todas as propriedades elegíveis para transição

seletor {

transition-property: margin-left, font-size, color; // transição na margem esquerda, tamanho de fonte e cor
do texto

transition-duration

Essa propriedade define quanto tempo, em segundos, a transição vai levar para acontecer. Observe os
exemplos a seguir.

seletor {transition-duration: 1s;}

seletor {transition-duration: 5s;}

seletor {transition-duration: 10s;}

1
 transition-delay

Essa propriedade define o tempo de espera para o início da transição.

seletor {transition-delay: 5s;}

seletor {transition-delay: 2s;}

seletor {transition-delay: 6s;}

transition

Assim como na maioria das propriedades css, podemos usá-las de forma abreviada. Caso queira usar todas as
propriedades mostradas anteriormente de forma abreviada, pode-se usar apenas transition. Observe os exemplos
a seguir.

seletor {transition: color 1s ease-in 4s } // transição de cor em 1s, animação ease-in, tempo de retardo de 4s

seletor {transition: color 2s linear, border 4s linear; } // transição de cor em 2s e borda em 4s, animação linear.

11.1. Fontes

Quem trabalha com design sabe que uma boa fonte é a base para qualquer projeto gráfico de sucesso. Existem
diversos sites construídos especialmente para servir como verdadeiros armazéns de tipografias diferentes, e um
dos mais famosos deles é o Google Fonts. Como seu nome sugere, trata-se de um serviço criado pela Gigante das
Buscas e talvez seja justamente por isso que ele tem um catálogo tão diversificado.

Outro grande diferencial do Google Fonts é o fato de que ele trabalha exclusivamente com web fonts, ou seja,
aquelas fontes que são licenciadas para uso em projetos online (como websites e qualquer tipo de peça publicitária
digital). Elas são diferentes das desktops fonts, que você utiliza no Word para fazer um trabalho escolar, por
exemplo. Isso facilita muito a vida de quem precisa de uma tipografia especial para seu blog ou sua página pessoal.

O que muita gente não sabe é que os arquivos hospedados no Google Fonts também podem ser baixados para
seu computador e instalados na máquina, podendo ser usados normalmente em qualquer software de design ou
editoração presente no PC.

Para acessar digite:

fonts.google.com e em seguida, pressione a tecla enter.

2
 11.2. Exercícios de Conteúdo

Olá, seja bem-vindo a nossa área de exercícios. Desenvolvemos uma série de atividades para que você domine
todo conteúdo abordado nesta aula, por isso é muito importante você fazer todos os exercícios e, qualquer dúvida,
chame o seu instrutor.

Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor para que ele lhe ajude a criar uma ou oriente a encontrá-la.

Exercício 1:

Este exercício tem como objetivo definir um efeito de transição quando o ponteiro do mouse passar sobre a
área retangular trocando de cor de fundo.

Veja o nosso modelo em que o background muda para a cor vermelha ao passar o ponteiro do mouse:

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

3
5) Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>

<html lang="pt-br">

<head>

<title>Exercício 1</title>

<style>

div {

font:normal 14px arial;

text-align:center;

display: block;

background-color: #666;

color:white;

width: 200px;

height: 40px;

border: solid 5px black;transition: 1s;

cursor:pointer;

line-height:40px;

div:hover {transition: 1s; background:red; }

</style>

</head>

<body>

<div>Galeria de Fotos</div>

</body></html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula11-exercicio1.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

4
 Exercício 2:

Este exercício tem como objetivo alterar o tamanho das caixas das datas das notícias quando o ponteiro do
mouse passar sobre os quadros.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>

<html lang="pt-br">

<head>

<title>Exercício 2</title>

<style>

p{font:normal 26px arial;}

div {

font:normal 18px arial;

text-align:center;

display: inline-block;

background-color: #666;

color:white;

width: 50px;

height: 50px;

border: solid 5px black;

transition: 0.5s;

5
 cursor:pointer;

line-height:50px;

div:hover {transition: 0.5s; width:60px; height:60px; line-height:60px; }

</style>

</head>

<body>

<p>Notícias</p>

<div>10/03</div>

<div>11/03</div>

</body></html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula11-exercicio2.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 3:

Este exercício tem como objetivo criar um efeito de transição dentro de um campo de formulário.

Veja o nosso modelo, quando o ponteiro do mouse passa sobre.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

6
5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>

<html lang="pt-br">

<head>

<title>Exercício 3</title>

<style>

p{font:normal 26px arial;}

input{

font:normal 15px arial;

background-color: #666;

color:white;

width: 200px;

height: 20px;

border: solid 1px black;

-webkit-transition: all 0.5s linear;

input:hover{background:green;}

</style>

</head>

<body>

<p>Formulário</p>

<input type="text"/>

</body></html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula11-exercicio3.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

7
Exercício 4:

Este exercício tem como objetivo arredondar apenas dois lados do retângulo.

Veja o nosso exemplo:

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>

<html lang="pt-br">

<head>

<title>Exercício 4</title>

<style>

p{font:normal 26px arial;}

div {

font:normal 18px arial;

text-align:center;

display: inline-block;

background-color: #666;

color:white;

width: 80px;

height: 50px;

border: solid 5px black;

transition: 0.5s;

8
 cursor:pointer;

line-height:50px;

div:hover {transition: 0.5s; border-radius:0 10px 0 10px; }

</style>

</head>

<body>

<p>Downloads</p>

<div>Jogos</div>

<div>Músicas</div>

<div>Filmes</div>

</body></html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula11-exercicio3.

8)Para visualizar clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Bom, concluímos aqui os exercícios passo a passo. Lembre-se, pratique, pois essa é a única maneira de
aprender. Refaça os exercícios e, qualquer dúvida, chame o instrutor.

Até a próxima aula!