O documento discute propriedades CSS3 relacionadas a backgrounds, gradients e filters. Ele explica como configurar imagens de fundo, posicioná-las, repeti-las e dimensioná-las. Também explica como criar gradients lineares e radiais e aplicar efeitos como grayscale e blur com filters.

1. Professor: Daniel Lobão
Estagiário: Carlos Rodrigo

2. Continuar a inovar no projeto;
Propriedade Background;
Propriedade Gradient;
Propriedade Filter;

3. Background-image;
background-size;
background-origin;
background-clip;

4. #example1 {
background-image: url(frajola6.gif), url(paper.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
background-size: 111px, auto;
padding: 15px;
}

5. background: url(frajola6.gif) right bottom no-
repeat, url(paper.jpg) left top repeat;

7. #example1 {
border: 1px solid black;
background:url(frajola6.gif)
right top;
background-repeat: no-repeat;
padding:15px;
}
#example2 {
border: 1px solid black;
background:url(frajola6.gif)
right top;
background-size: 120px
100px;
background-repeat: no-
repeat;
padding:15px;
}

8. .div1 {
border: 1px solid black;
height:150px;
width:180px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
}

9. .div2 {
border: 1px solid black;
height:150px;
width:180px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}

10. .div3 {
border: 1px solid black;
height:150px;
width:180px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}

11. border-box - a imagem de fundo começa a partir
do canto superior esquerdo da fronteira
padding-box - (padrão) a imagem de fundo
começa a partir do canto superior esquerdo da
borda estofamento
content-box - a imagem de fundo começa a partir
do canto superior esquerdo do conteúdo

12. border-box
content-box
padding-box

13. border-box - (padrão) o plano de fundo é pintado
para a borda externa da fronteira
padding-box - o fundo é pintado para a borda
externa do estofamento
content-box - o fundo é pintada dentro da caixa
de conteúdo

15. Dois tipos de gradientes:
Linear Gradients (goes
down/up/left/right/diagonally);
Radial Gradients (defined by their center);

16. Propriedade
linear-gradient
radial-gradient
repeating-linear-gradient
repeating-radial-gradient

17. background: linear-gradient(to right, red , yellow);
background: linear-gradient( red , yellow);

18. background: linear-gradient(to bottom right,
green, yellow);
background: linear-gradient(-90deg, red,
yellow);

19. background: linear-gradient(red, yellow, green);

20. background: linear-gradient(to right,
rgba(255,0,0,0), rgba(255,0,0,1));

21. background: radial-gradient( yellow, green);
background: radial-gradient(red 5%, yellow
15%, green 60%);

22. background: radial-gradient(circle, red, yellow,
green);
background: radial-gradient(closest-side at 60%
55%, red, yellow, black);
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);

23. filter: grayscale(100%);

24. Filter
none | blur() | brightness() | contrast() |
drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() |
url()| initial |inherit;

26. Propriedades:
Background
Gradient
Filter

27. CSS3 Backgrounds. Elaborado por w3schools. Disponível em:
<http://www.w3schools.com/css/css3_backgrounds.asp>. Acesso em:
21 mar. 2016.
CSS3 Gradients. Elaborado por w3schools. Disponível em:
<http://www.w3schools.com/css/css3_gradients.asp>. Acesso em: 21
mar. 2016.
CSS3 filter. Elaborado por w3schools. Disponível em:
<http://www.w3schools.com/cssref/css3_pr_filter.asp>. Acesso em: 21
mar. 2016.