Carregar apresentação
A apresentação está carregando. Por favor, espere
PublicouLuiz Fernando Castel-Branco de Lacerda Alterado mais de 8 anos atrás
1
Design Gráfico Introdução ao Web Design Prof° Ms. Claudio Benossi Aula 05 Introdução ao Web Design Prof° Ms. Claudio Benossi Aula 05
2
Imagens e Formatação Vamos Continuar a formatar o nosso Site;
3
Imagens e Formatação Cor de Fundo;
4
Imagens e Formatação Resultado
5
Imagens e Formatação Fazendo da forma correta, usando CSS
6
Imagens e Formatação O mesmo resultado;
7
Imagens e Formatação Cor de Fundo e Cor (background- color) e da Letra (color);
8
Imagens e Formatação Resultado;
9
Imagens e Formatação Mudando as cores - RGB;
10
Imagens e Formatação Resultado;
11
Imagens e Formatação Imagem de Fundo background-image:url(fundo.jpg);
12
Imagens e Formatação Resultado
13
Imagens e Formatação Novidade - RGBA
14
Imagens e Formatação Resultado
15
Imagens e Formatação Voltando ao normal
16
Imagens e Formatação Resultado
17
Imagens e Formatação Inserindo legenda na Imagem
18
Imagens e Formatação Resultado Muito importante no processo de busca
19
Imagens e Formatação Inserindo borda na imagem
20
Imagens e Formatação Resultado
21
Imagens e Formatação Ajustando o tamanho
22
Imagens e Formatação Resultado
23
Imagens e Formatação Alterando a borda, com efeito
24
Imagens e Formatação Resultado
25
Imagens e Formatação Resultado
26
Imagens e Formatação Ajustando a posição da legenda
27
Imagens e Formatação Resultado – Não ficou muito bom, vamos ajustar!
28
Imagens e Formatação Diferença entre posição “Absolute” e “Relative”
29
Imagens e Formatação Resultado
30
Imagens e Formatação Cor de fundo na legenda
31
Imagens e Formatação Resultado
32
Imagens e Formatação Ampliar o campo de visão da legenda Cor da Letra e tamanho da Legenda
33
Imagens e Formatação Resultado
34
Imagens e Formatação Inserir espaçamento e ajustar a borda
35
Imagens e Formatação Resultado
36
Imagens e Formatação Controlar a Opacidade opacity:0;
37
Imagens e Formatação Resultado
38
Imagens e Formatação Controlando a Opacidade com o mouse - Hover
39
Imagens e Formatação Resultado
40
Imagens e Formatação Tempo de Transição na legenda transition: 1s;
41
Imagens e Formatação Resultado
42
Imagens e Formatação Visualizando o Código – está ficando grande...
43
Imagens e Formatação Vamos criar um arquivo só para a formatação o arquivo estilo.css
44
Imagens e Formatação Resultado
45
Imagens e Formatação O uso dos comentários /* muito importante */
46
Imagens e Formatação Vamos retirar a formatação do arquivo HTML
47
Imagens e Formatação Vamos inserir no arquivo estilo.css
48
Imagens e Formatação Vamos ligar os arquivos:
49
Imagens e Formatação Resultado
50
Design Digital Dúvidas?
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.