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?
Download
