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

Imagens e Formatação Vamos Continuar a formatar o nosso Site;

Imagens e Formatação Cor de Fundo;

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 (background- color) 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 a formatação do arquivo HTML

Imagens e Formatação Vamos inserir no arquivo estilo.css

Imagens e Formatação Vamos ligar os arquivos:

Imagens e Formatação Resultado

Design Digital Dúvidas?