-
Notifications
You must be signed in to change notification settings - Fork 0
/
aula16.html
146 lines (105 loc) · 6.03 KB
/
aula16.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aula 16 - Background</title>
<link rel="stylesheet" href="./src/css/style.css">
</head>
<body>
<button id="menu-btn">X</button>
<nav id="menu">
<ul id="menu-ul">
</ul>
</nav>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<main>
<article>
<h2>Aula 16 - Background</h2>
<p>Já conhecemos a propriedade <strong>background-color</strong> para mudar a cor de fundo de um elemento. Agora vamos aprender como utilizar gradientes e imagens no fundo (background) de um elemento.</p>
<h3>Gradient</h3>
<p>Também é possível usar gradientes no background de um elemento. Veja o exemplo:</p>
<pre>
<code>
body{
height: 100vh;
background: linear-gradient(90deg, purple, violet);
}
</code>
</pre>
<p>O primeiro valor é o ângulo de inclinação do gradiente, os outros valores são cores, que podem ser mais do que duas. Mude o valor do ângulo e as cores para ver o que acontece.</p>
<p>Existem outros tipos de gradient, para estudar mais sobre isso clique <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/gradient">aqui</a>.</p>
<h3>background-image</h3>
<p>Podemos usar uma imagem como o fundo de um elemento, utilizando a propriedade background-image. Veja o exemplo:</p>
<p>No arquivo style.css:</p>
<pre>
<code>
body{
background-image: url(https://i.imgur.com/X8ywn07.png);
}
</code>
</pre>
<h3>background-repeat</h3>
<p>Por padrão as imagens de fundo se repetem horizontalmente e verticalmente. Mas podemos mudar isso com a propriedade <strong>background-repeat</strong>. Se queremos repetir apenas horizontalmente usamos: <strong>background-repeat: repeat-x;</strong> Se queremos repetir apenas verticalmente usamos: <strong>background-repeat: repeat-y;</strong> Se não queremos repetir a imagem usamos: <strong>background-repeat: no-repeat;</strong></p>
<p>No exemplo anterior adicione a propriedade background-repeat e altere entre os valores citados acima. Veja a diferença entre cada valor.</p>
<h3>Múltiplos Backgrounds</h3>
<p>É possível utilizar múltiplos backgrounds, várias imagens e até mesmo imagens com uma cor de fundo. No próximo exemplo usamos duas imagens e uma cor de fundo, que só aparece pelo fato das imagens terem fundo transparente. Para isso simplesmente usamos dois valores de url na propriedade background-image, separados por vírgula, assim usamos duas imagens. A propriedade background-repeat também pode receber dois valores, separados por vírgula, caso queira repetir uma imagem e a outra não, por exemplo. Preste atenção na ordem, pois ela é importante, a primeira imagem ficará na frente da segunda. E a cor sempre ficará atrás de todas imagens.</p>
<p>No arquivo style.css:</p>
<pre>
<code>
body{
background-image: url(https://i.imgur.com/jy775z2.png), url(https://i.imgur.com/X8ywn07.png);
background-repeat: repeat-x, no-repeat;
background-color: lightblue;
}
</code>
</pre>
<h3>background-size: cover;</h3>
<p>Podemos mudar o tamanho da imagem de fundo com a propriedade background-size. Podemos usar dois valores absolutos, um para a largura e outro para a altura. Ou apenas um valor absoluto que será a largura, e a altura se ajustará automaticamente. Mas o mais interessante é o valor <strong>cover</strong>. esse valor faz a imagem ocupar todo o background. É muito usado para criar fundos bem bonitos. Veja o exemplo:</p>
<pre>
<code>
body{
min-height: 100vh;
background-image: url(https://i.imgur.com/Xq1IzlO.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</code>
</pre>
<h3>background-attachment: fixed;</h3>
<p>A propriedade background-attachment: fixed; faz com que a imagem de fundo não role junto com a página. É um efeito muito usado também em websites modernos. Veja o exemplo:</p>
<p>No arquivo style.css:</p>
<pre>
<code>
* {
margin: 0;
padding: 0;
}
div {
height: 100vh;
background-color: purple;
}
#div2 {
background-image: url(https://i.imgur.com/Xq1IzlO.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</code>
</pre>
<p>No arquivo index.html:</p>
<pre>
<code>
<div></div>
<div id="div2"></div>
<div></div>
</code>
</pre>
<p>Existem outras propriedades e valores para imagens de background, vimos apenas as principais, mais usadas. Para estudar mais sobre isso, clique <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/background">aqui</a>.</p>
</article>
</main>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<script src="./src/js/menu.js"></script>
</body>
</html>