aula 9 cores backgrounds - blogdoprofpc.files.wordpress.com · prof. paulo cesar f. de oliveira,...

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


<style> body { background-color: yellow; }h1 { background-color: #00ff00; }p { background-color: rgb(255,0,255); }


<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


<style>body {

background-image: url("paper.gif");}


<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


<style>body {

background-image: url("paper.gif");background-repeat: repeat-x;

}</style>

</head><body>


12/05/15 © P C F de Oliveira 2015 37

Resultado

12/05/15 © P C F de Oliveira 2015 38


<style>body {

background-image: url("paper.gif");background-repeat: repeat-y;

}</style>

</head><body>


12/05/15 © P C F de Oliveira 2015 39

Resultado

12/05/15 © P C F de Oliveira 2015 40


<style>body {

background-image: url("paper.gif");background-repeat: no-repeat;

}</style>

</head><body>


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 44


<style>body {

background-image: url("paper.gif");background-repeat: no-repeat;background-position: right center;

}</style>

</head>


<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


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


<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




<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


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 59

Atenção

Propriedade position: Se for fornecida, valor horizontal deve vir primeiro

aula 9 cores backgrounds - blogdoprofpc.files.wordpress.com · prof. paulo cesar f. de oliveira,...

Documents