Introdução ao Web Design
Prof° Ms. Claudio Benossi
Aula 05
Design Gráfico
Imagens e Formatação
• Vamos Continuar a formatar o nosso
Site;
Imagens e Formatação
• Cor de Fundo;
<body bgcolor=“#FF0000”>
Imagens e Formatação
• Resultado
Imagens e Formatação
• Fazendo da forma correta, usando CSS
Imagens e Formatação
• O mesmo resultado;
Imagens e Formatação
• Cor de Fundo e Cor (backgroundcolor) e da Letra (color);
Imagens e Formatação
• Resultado;
Imagens e Formatação
• Mudando as cores - RGB;
Imagens e Formatação
• Resultado;
Imagens e Formatação
• Imagem de Fundo
background-image:url(fundo.jpg);
Imagens e Formatação
• Resultado
Imagens e Formatação
• Novidade - RGBA
Imagens e Formatação
• Resultado
Imagens e Formatação
• Voltando ao normal
Imagens e Formatação
• Resultado
Imagens e Formatação
• Inserindo legenda na Imagem
Imagens e Formatação
• Resultado
Muito importante no processo de busca
Imagens e Formatação
• Inserindo borda na imagem
Imagens e Formatação
• Resultado
Imagens e Formatação
• Ajustando o tamanho
Imagens e Formatação
• Resultado
Imagens e Formatação
• Alterando a borda, com efeito
Imagens e Formatação
• Resultado
Imagens e Formatação
• Resultado
Imagens e Formatação
• Ajustando a posição da legenda
Imagens e Formatação
• Resultado – Não ficou muito bom,
vamos ajustar!
Imagens e Formatação
• Diferença entre posição “Absolute” e
“Relative”
Imagens e Formatação
• Resultado
Imagens e Formatação
• Cor de fundo na legenda
Imagens e Formatação
• Resultado
Imagens e Formatação
• Ampliar o campo de visão da legenda
Cor da Letra e tamanho da Legenda
Imagens e Formatação
• Resultado
Imagens e Formatação
• Inserir espaçamento e ajustar a borda
Imagens e Formatação
• Resultado
Imagens e Formatação
• Controlar a Opacidade
opacity:0;
Imagens e Formatação
• Resultado
Imagens e Formatação
• Controlando a Opacidade com o
mouse - Hover
Imagens e Formatação
• Resultado
Imagens e Formatação
• Tempo de Transição na legenda
transition: 1s;
Imagens e Formatação
• Resultado
Imagens e Formatação
• Visualizando o Código – está ficando
grande...
Imagens e Formatação
• Vamos criar um arquivo só para a
formatação o arquivo estilo.css
Imagens e Formatação
• Resultado
Imagens e Formatação
• O uso dos comentários
/* muito importante */
Imagens e Formatação
• Vamos retirar
arquivo HTML
a
formatação
do
Imagens e Formatação
• Vamos inserir no arquivo estilo.css
Imagens e Formatação
• Vamos ligar os arquivos:
<link rel="stylesheet" type="text/css"
href="_css/estilo.css">
Imagens e Formatação
• Resultado
Design Digital
• Dúvidas?