aula 9 cores backgrounds - blogdoprofpc.files.wordpress.com · prof. paulo cesar f. de oliveira,...
Post on 10-Nov-2018
213 Views
Preview:
TRANSCRIPT
Aula 9Cores
backgrounds
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
12/05/15 © P C F de Oliveira 2015 1
12/05/15 © P C F de Oliveira 2015 2
E como fica a cor?
12/05/15 © P C F de Oliveira 2015 3
Background color
Border color
Font color
12/05/15 © P C F de Oliveira 2015 4
Green
BlueRed
Blue: 255(100%)
Red: 255(100%)
Green: 255(100%)
ModeloRGB
12/05/15 © P C F de Oliveira 2015 5
Blue: 128(50%)
Red: 128(50%)
Green: 128(50%)
ModeloRGB
12/05/15 © P C F de Oliveira 2015 6
Blue: 0(0%)
Red: 0(0%)
Green: 0(0%)
ModeloRGB
12/05/15 © P C F de Oliveira 2015 7
Blue: 130(51%)
Red: 200(78%)
Green: 178(70%)
ModeloRGB
12/05/15 © P C F de Oliveira 2015 8
Cores
Padrão
12/05/15 © P C F de Oliveira 2015 9
Exemplos
body {color: silver;background-color: gray;border-bottom-color: orange;
}
12/05/15 © P C F de Oliveira 2015 10
Selecionando uma cor
12/05/15 © P C F de Oliveira 2015 11
Especificando valores RGB
§ rgb (255,255,255)§ rgb (100%, 100%, 100%)§ #FFFFFF§ #FFF
12/05/15 © P C F de Oliveira 2015 12
Exemplo
body { background-color: rgb(204, 102, 0); }
12/05/15 © P C F de Oliveira 2015 13
Exemplo
body { background-color: rgb(80%, 40%, 0%); }
12/05/15 © P C F de Oliveira 2015 14
Exemplo
body { background-color: #cc6600}
12/05/15 © P C F de Oliveira 2015 15
Especificando valores em Hexadecimal
12/05/15 © P C F de Oliveira 2015 16
Contagem
Hexa
12/05/15 © P C F de Oliveira 2015 17
Como converter?
12/05/15 © P C F de Oliveira 2015 18
#CC 66 00
#1
12/05/15 © P C F de Oliveira 2015 19
CC
#2
12/05/15 © P C F de Oliveira 2015 20
66
#3
12/05/15 © P C F de Oliveira 2015 21
00
#4
12/05/15 © P C F de Oliveira 2015 22
Resultado
#CC 66 00
12/05/15 © P C F de Oliveira 2015 23
Site sobre cores
http://html-color-codes.info/
12/05/15 © P C F de Oliveira 2015 24
Códigos Interessantes
#FFFFFF ou #FFF ou rgb (255,255,255) = Branco
#000000 ou #000 ou rgb (0,0,0) = Preto
12/05/15 © P C F de Oliveira 2015 25
Exemplo<!DOCTYPE html><html><head>
<style> body { color: red; } h1 { color: #00ff00; } p.ex { color: rgb(0,0,255); }
</style></head><body>
<h1>Este é o cabeçalho 1</h1>
Continua no próximo slide…
Cor do texto (e borda)
12/05/15 © P C F de Oliveira 2015 26
Exemplo
<p>Este é um parágrafo comum. Note que este texto é vermelho. A cor padrão (default) do texto (text-color) para uma página é definida no seletor "body".</p>
<p class="ex">Este é um parágrafo da classe "ex". Este texto é azul.</p></body></html>
Continuação do slide anterior
12/05/15 © P C F de Oliveira 2015 27
Resultado
12/05/15 © P C F de Oliveira 2015 28
Exemplo<!DOCTYPE html><html><head>
<style> body { background-color: yellow; }h1 { background-color: #00ff00; }p { background-color: rgb(255,0,255); }
</style></head><body>
<h1>Este é o cabeçalho 1</h1><p>Este é um parágrafo.</p>
</body></html>
Cor
de
fun
do
12/05/15 © P C F de Oliveira 2015 29
Resultado
12/05/15 © P C F de Oliveira 2015 30
Imagens de background?
12/05/15 © P C F de Oliveira 2015 31
background-image
Inserir imagem de
fundo
body { background-image: url (star.gif); }
12/05/15 © P C F de Oliveira 2015 32
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");}
</style></head><body>
<h1>Alô Mundo!</h1></body></html>
12/05/15 © P C F de Oliveira 2015 33
Resultado
12/05/15 © P C F de Oliveira 2015 34
background-repeat
Ladrilhar imagem de
fundo
body { background-image: url (star.gif);background-repeat: repeat-x;
}
12/05/15 © P C F de Oliveira 2015 35
repeat-x
repeat-y
no-repeat
repeat
inherit
12/05/15 © P C F de Oliveira 2015 36
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");background-repeat: repeat-x;
}</style>
</head><body>
<h1>Alô Mundo!</h1></body></html>
12/05/15 © P C F de Oliveira 2015 37
Resultado
12/05/15 © P C F de Oliveira 2015 38
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");background-repeat: repeat-y;
}</style>
</head><body>
<h1>Alô Mundo!</h1></body></html>
12/05/15 © P C F de Oliveira 2015 39
Resultado
12/05/15 © P C F de Oliveira 2015 40
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");background-repeat: no-repeat;
}</style>
</head><body>
<h1>Alô Mundo!</h1></body></html>
12/05/15 © P C F de Oliveira 2015 41
Resultado
12/05/15 © P C F de Oliveira 2015 42
background-position
Posicionar a imagem de
fundo
body { background-image: url (star.gif);background-position: left center;
}
12/05/15 © P C F de Oliveira 2015 43
porcentagem
left
center
right
top
bottom
comprimento
inherit
12/05/15 © P C F de Oliveira 2015 44
Exemplo<!DOCTYPE html><html><head>
<style>body {
background-image: url("paper.gif");background-repeat: no-repeat;background-position: right center;
}</style>
</head>
Continua no próximo slide…
<body> <p>Lorem ipsum dolor sit amet, vide aperiri
interpretaris ius ei, pro ne commodo dolores, ex eum reque mucius mollis. Summo possim temporibus et quo. Aliquando referrentur ei sit, pro ut dolor maiorum hendrerit. </p>
<p>Usu ut augue graeco invenire. Aeque luciliusreferrentur pri no, usu an vivendo ponderuminterpretaris, at tamquam noluisse dissentiunt est. At quodsi detraxit definitiones vix. Ex aliquidmediocrem appellantur duo, iisque consulatu duo ne.
</p></body></html>
12/05/15 © P C F de Oliveira 2015 45
Exemplo
Continuação do slide anterior
12/05/15 © P C F de Oliveira 2015 46
Resultado
12/05/15 © P C F de Oliveira 2015 47
Outros
exemplos
12/05/15 © P C F de Oliveira 2015 48
Outros
exemplos
12/05/15 © P C F de Oliveira 2015 49
Outros
exemplos
12/05/15 © P C F de Oliveira 2015 50
background-attachment
Rolar/fixar a imagem de
fundo
body { background-image: url (star.gif);background-repeat: no-repeat;background-position: center 300px;background-attachment: fixed;
}
12/05/15 © P C F de Oliveira 2015 51
scroll
fixed
inherit
12/05/15 © P C F de Oliveira 2015 52
Exemplo
<!DOCTYPE html><html><head>
<style> body {
background-image: url(“bigstar.png");background-repeat: no-repeat;background-attachment: fixed;
}</style>
</head><body>
<p>A imagem de fundo (background-image) estáfixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) estáfixa. Tente rolar a página.</p>
Continua no próximo slide…
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
12/05/15 © P C F de Oliveira 2015 53
Exemplo
Continuação do slide anterior
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
12/05/15 © P C F de Oliveira 2015 54
Exemplo
Continuação do slide anterior
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>A imagem de fundo (background-image) está fixa. Tente rolar a página.</p>
<p>Caso você não veja a barra de rolagem, tenteredimensionar a janela do browser.</p></body></html>
12/05/15 © P C F de Oliveira 2015 55
Exemplo
Continuação do slide anterior
12/05/15 © P C F de Oliveira 2015 56
Resultado
12/05/15 © P C F de Oliveira 2015 57
background
Coloca todas
propriedades em uma
regra
body { background: black url(ario.jpg) no-repeat right top fixed; }
body { background-color: black;background-image: url(ario.jpg);background-repeat: no-repeat;background-position: right top;background-attachment: fixed;
}
12/05/15 © P C F de Oliveira 2015 58
image
repeat
attachment
color
inherit
position
Ordem
NÃO é
importante
12/05/15 © P C F de Oliveira 2015 59
Atenção
Propriedade position: Se for fornecida, valor horizontal deve vir primeiro
top related