-
Notifications
You must be signed in to change notification settings - Fork 0
/
cores_e_fundos.html
executable file
·296 lines (281 loc) · 15.3 KB
/
cores_e_fundos.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="windows-1252">
<meta name="keywords" content="HTML,CSS" />
<meta name="author" content="Alexandre Gomes de Lima" />
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="estilos/aulas.css" />
<title>IFRN/DIATINF/Design Web: Cores e Fundos</title>
<style type="text/css">
.estrela{
background-image: url(cores_e_fundos/estrela.png);
border: solid 1px black;
height: 100px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="tudo">
<header id="cabecalho">
<img src="imagens/logo_ifrn.png" alt="IFRN" id="logoifrn" />
<h1 class="cabecalho">
Diretoria Acadêmica de Gestão e Tecnologia da Informação
</h1>
<h2 class="cabecalho">
Disciplina de Design Web e Arquitetura da Informação
</h2>
</header>
<article id="conteudo">
<h1>Cores e fundos</h1>
<p>
Nesta aula iremos conhecer melhor as maneiras para declaração de cores em estilos CSS.
Também iremos conhecer outras propriedades, além da
<span class="html">background-color</span>, para estilização de fundo dos elementos HTML.
</p>
<section>
<h2>Cores</h2>
<p>
Em CSS existem três formas para definir uma cor: por <em>palavra-chave</em>, por
<em>valor hexadecimal</em> e por <em>valor RGB</em>.
</p>
<p>
Anteriormente já vimos como definir uma cor através de valor hexadecimal: basta declarar
um valor com seis dígitos hexadecimais (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)
precedido do caractere cerquilha (#) como no exemplo abaixo:
</p>
<pre class="html">
background-color: <strong>#99AF1C</strong>;
</pre>
<p>
Cada código hexadecimal representa na verdade uma cor RGB - os dois primeiros dígitos indicam
a intensidade de vermelho (<strong>R</strong>ed), os dois seguintes a intensidade de verde (<strong>G</strong>reen)
e os dois últimos a intensidade de azul (<strong>B</strong>lue). O site W3Schools disponibiliza uma
ferramenta para escolha de cor e código hexadecimal em
<a href="https://www.w3schools.com/colors/colors_picker.asp">https://www.w3schools.com/colors/colors_picker.asp</a>
</p>
<p>
A declaração de cor por valor RGB é formada por três valores separados por vírgula e colocados
entre parênteses precedidos pela sigla <span class="html">rgb</span> como no exemplo a seguir:
</p>
<pre class="html">
background-color: <strong>rgb(125, 222, 90)</strong>;
</pre>
<p>
É permitido utilizar qualquer valor inteiro entre 0 e 255. Também é permitida a utilização de
valores em porcentagem variando de 0% a 100%. No entanto, não é permitido misturar valores em
porcentagem com valores absolutos. O próximo exemplo define a mesma cor do exemplo anterior
através de valores em porcentagem.
</p>
<pre class="html">
background-color: <strong>rgb(30%, 25%, 70%)</strong>;
</pre>
<p>
A definição de cores por palavra chave já foi exemplificada em aulas anteriores. O endereço
<a href="https://www.w3schools.com/colors/colors_names.asp">https://www.w3schools.com/colors/colors_names.asp</a>
contém a lista de palavras-chave disponíveis.
</p>
</section>
<section>
<h2>Fundos</h2>
<p>
Anteriormente, já vimos como formatar a cor de fundo de um elemento através da propriedade
<span class="html">background-color</span>. Adicionalmente, a CSS disponibiliza as seguintes
propriedades que nos permitem aplicar outros efeitos de fundo: <span class="html">background-image</span>,
<span class="html">background-repeat</span>, <span class="html">background-attachment</span>,
<span class="html">background-position</span>, <span class="html">background-size</span> e
<span class="html">background</span>.
</p>
<p>
Por padrão, o valor das propriedades de fundo não são herdadas pelos elementos filhos. No entanto,
é possível o uso do valor <span class="html">inherit</span> para forçar o comportamento de herança.
</p>
<p>
Além de uma cor CSS, a propriedade <span class="html">background-color</span> admite o valor
<span class="html">transparent</span>, o qual é o valor padrão. Consequentemente, quando não
definimos a cor de fundo dos elementos filhos temos a falsa impressão de que estes herdam a
cor de fundo do pai.
</p>
<p>
A propriedade <span class="html">background-image</span> nos permite definir uma imagem de fundo
para um elemento html. O valor da propriedade deve ser o nome do arquivo ou endereço da imagem,
<span class="html">inherit</span> ou <span class="html">none</span> (valor padrão).
</p>
<p>
A propriedade <span class="html">background-repeat</span> define como a imagem de fundo será
repetida. Os valores possíveis são <span class="html">inherit</span>, <span class="html">repeat</span>
(valor padrão), <span class="html">repeat-x</span>, <span class="html">repeat-y</span> e
<span class="html">no-repeat</span>. O próximo exemplo ilustra o uso dos diferentes valores
para a propriedade (<a href="cores_e_fundos/estrela.png">estrela.png</a>).
</p>
<pre class="html">
div{
<strong>background-image: url(cores_e_fundos/estrela.png);</strong>
border: solid 1px black;
height: 100px;
}
<div></div>
<div style="<strong>background-repeat: repeat-x</strong>"></div>
<div style="<strong>background-repeat: repeat-y</strong>"></div>
<div style="<strong>background-repeat: no-repeat</strong>"></div>
</pre>
<div class="estrela"></div>
<div class="estrela" style="background-repeat: repeat-x"></div>
<div class="estrela" style="background-repeat: repeat-y"></div>
<div class="estrela" style="background-repeat: no-repeat"></div>
<p>
<span class="html">background-image</span> e <span class="html">background-repeat</span> são
muito utilizadas com imagens de textura na criação de páginas visualmente agradáveis. Na
web, há diversos sites que disponibilizam imagens de textura com essa finalidade. Segue um
exemplo desta forma de uso (<a href="cores_e_fundos/tree_bark.png">tree_bark.png</a>):
</p>
<pre class="html">
div{
<strong>background-image: url(cores_e_fundos/tree_bark.png)
background-repeat: repeat;</strong>
}
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</pre>
<div style="background: url(cores_e_fundos/tree_bark.png); width: 400px; max-width: 100%; padding: 15px; border: solid 1px">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p>
A propriedade <span class="html">background-attachment</span> indica se a imagem
de fundo permanecerá fixa ou se irá rolar junto à visualização. Os valores permitidos
são <span class="html">inherit</span>, <span class="html">scroll</span> (valor padrão) e
<span class="html">fixed</span>. Verifique esta diferença na prática criando uma página contendo
uma imagem de fundo sem repetição e com conteúdo suficiente para permitir a rolagem
da página.
</p>
<p>
A propriedade <span class="html">background-position</span> define a posição inicial da imagem
de fundo. Deve ser declarada em conjunto com dois valores: coordenada x (eixo horizontal) e coordenada y
(eixo vertical). A origem do sistema de coordenadas (ponto 0 0) localiza-se no canto superior esquerdo.
Para as coordenadas podemos informar medidas em unidades CSS ou as palavras chaves <span class="html">top</span>,
<span class="html">right</span>, <span class="html">bottom</span>, <span class="html">left</span>
e <span class="html">center</span>. Por padrão, esta propriedade assume o valor
<span class="html">left top</span> (valor equivalente a 0 0). O exemplo a seguir ilustra o uso
desta propriedade.
</p>
<pre class="html">
div{
background-image: url(cores_e_fundos/estrela.png);
background-repeat: no-repeat;
<strong>background-position: center center;</strong>
border: solid 1px black;
height: 100px;
}
<div></div>
</pre>
<div class="estrela" style="background-repeat: no-repeat; background-position: center center"></div>
<p>
A propriedade <span class="html">background-size</span> é utilizada para definir o tamanho da
imagem. Podem ser utilizados valores numéricos (largura e altura) ou os valores <span class="html">auto</span>
(valor padrão - usa o tamanho original da imagem), <span class="html">inherit</span>,
<span class="html">cover</span> e <span class="html">contain</span>.
</p>
<p>
Quando utilizamos valores numéricos podemos fornecer um ou dois valores.
Ao utilizar apenas um valor numérico estaremos indicando a largura da imagem e a altura será calculada
automaticamente de forma a preservar as proporções da imagem. Ao utilizar dois valores, estes corresponderão
respectivamente à largura e à altura da imagem. Caso nosso desejo seja indicar apenas a altura
mantendo as proporções da imagem, devemos utilizar <span class="html">auto</span> como primeiro valor.
</p>
<p>
<span class="html">cover</span> redimensiona a imagem, mantendo suas proporções, de forma que suas dimensões
coincidam com as dimensões do elemento. Caso a imagem e o elemento possua proporções diferentes, a imagem será
cortada na vertical ou na horizontal.
</p>
<p>
<span class="html">contain</span> redimensiona a imagem, mantendo suas proporções e sem realizar cortes,
de forma que esta fique totalmente visível. Os exemplos a seguir demonstram alguns usos da propriedadade
<span class="html">background-size</span>.
</p>
<pre class="html">
div{
background-image: url(cores_e_fundos/estrela.png);
background-repeat: no-repeat;
border: solid 1px black;
height: 100px;
}
<div style="<strong>background-size: auto 65px</strong>"></div>
<div style="<strong>background-size: cover</strong>"></div>
<div style="<strong>background-size: contain</strong>"></div>
</pre>
<div class="estrela" style="background-repeat: no-repeat; background-size: auto 65px;"></div>
<div class="estrela" style="background-repeat: no-repeat; background-size: cover;"></div>
<div class="estrela" style="background-repeat: no-repeat; background-size: contain;"></div>
<p>
A propriedade <span class="html">background</span> é um facilitador que permite a
definição de várias propriedades de fundo em uma única declaração. Por exemplo, as
declarações CSS a seguir
</p>
<pre class="html">
background-color: pink;
background-image: url(cores_e_fundos/estrela.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 30%;
</pre>
<p>
podem ser substituídas, com a obtenção do mesmo resultado, pela seguinte declaração única:
</p>
<pre class="html">
<strong>background: pink url(cores_e_fundos/estrela.png) 50% 30% no-repeat fixed;</strong>
</pre>
<p>
A propriedade <span class="html">background</span> não exige a declaração de valores para todas as
outras propriedades de background. Assim, as propriedades
omitidas assumirão seus valores padrão ou os valores definidos por regras CSS mais genéricas.
</p>
</section>
<section class="exercicios">
<h2>Exercícios</h2>
<p>
1) Utilize uma imagem de fundo para criar um efeito de marca d'água. A imagem deve ser
posicionada no canto inferior direito da página e sempre estar visível na mesma posição,
mesmo com a rolagem da página.
</p>
<p>
2) Utilize as propriedades de background para exibir um elemento <span class="html">h1</span>
acompanhado de um ícone como na figura abaixo.
</p>
<img src="cores_e_fundos/exercicio2.png"
alt="exemplo do exercício 2" />
<p>
3) Utilize as propriedades de background para personalizar a borda inferior de um
elemento como no exemplo abaixo.
</p>
<img src="cores_e_fundos/exercicio3.png"
alt="exemplo do exercício 3" />
</section>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
MDN web docs. <em class="referencia">background-size</em>. Disponível em
<<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size">https://developer.mozilla.org/en-US/docs/Web/CSS/background-size</a>>.
</li>
<li class="referencia">
SILVA, Maurício Samy. <em class="referencia">Construindo sites com CSS e (X)HTML: sites controlados
por folhas de estilo em cascata</em>. São Paulo: Novatec, 2008.
</li>
<li class="referencia">
W3Schools.com. <em class="referencia">CSS background property</em>. Disponível em
<<a href="https://www.w3schools.com/cssref/css3_pr_background.asp">https://www.w3schools.com/cssref/css3_pr_background.asp>.
</li>
</ul>
</article>
</div>
</body>
</html>