-
Notifications
You must be signed in to change notification settings - Fork 0
/
css_sprites.html
104 lines (75 loc) · 4.51 KB
/
css_sprites.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
<!doctype html>
<html >
<head>
<title>CSS Sprites</title>
<link rel="stylesheet" type="text/css" href="iw_examples.css"/>
<meta charset="utf-8"/>
<style type="text/css">
.icon, .icon > * {
display: block;
width: 20px;
height: 20px;
}
.icon1 {
background: url(border.png) 0 0 ;
}
.icon2 {
background: url(border.png) -20px 0 ;
}
.icon3 {
background: url(border.png) 0 -20px ;
}
.icon3:hover {
background: url(border.png) -40px -20px ;
}
</style>
</head>
<body>
<h1 class="sezione">CSS Sprites</h1>
<p class="sezione">Un uso particolare della proprietà background dei CSS, unitamente a width e height, permette di realizzare la
cosiddetta tecnica dei <em>CSS sprites</em>.</p>
<p class="sezione">L'idea è quella di combinare tutti gli elementi grafici presenti in una pagina (soprattutto le icone, i
simboli, ecc., non le eventuali immagini vere e proprie) in una sola immagine, scaricandola una sola volta (invece di scaricare
un elemento per volta, con i ritardi dovuti alle connessioni di rete) e poi mostrandone solo delle sezioni nei punti
necessari.</p>
<p>In pratica, si usa l'immagine "combinata" come sfondo di un elemento html la cui dimensione rispecchia quella
dell'elemento grafico da visualizzare, e si posiziona tale sfondo usando degli offset tali da rendere visibile solo la parte
desiderata</p>
<div class="esempi">
<div class="esempio">
<div class="rendering">
<div class="icon icon1"></div>
<div class="icon icon2"></div>
</div>
<div class="sorgente">
<h3>Immagine</h3><img src="border.png" width="60" height="60" alt="border.png" />
<h3>CSS</h3>
<p>.icon, .icon > * { <span class="commento"> gli elementi che riempiremo con la grafica (e i loro eventuali discendenti diretti) devono essere di tipo blocco </span> display: block; <span class="commento"> l'elemento mostrerà solo una sezione 20x20 dello sfondo </span> width: 20px; height: 20px;
}</p>
<p>.icon1 { background: url(border.png) 0 0 ; <span class="commento"> lo sfondo viene posizionato allineandolo
all'angolo superiore sinistro dell'elemento</span> }</p>
<p>.icon2 { background: url(border.png) -20px 0 ; <span class="commento"> lo sfondo viene posizionato spostandolo a
sinistra (coordinata x negativa) di 20 pixel, in modo che la parte visualizzata effettivamente inizi dalla coordinata
(20,0)</span> }</p>
<h3>HTML</h3>
<p><div class="icon icon1"></div></p>
<p><div class="icon icon2"></div></p>
</div>
</div>
<div class="esempio">
<div class="rendering"><span class="icon icon3"><a href="#"></a></span></div>
<div class="sorgente">
<h3>CSS</h3>
<p>.icon3 { background: url(border.png) 0 -20px ; <span class="commento"> lo sfondo viene posizionato spostandolo in alto
(coordinata y negativa) di 20 pixel, in modo che la parte visualizzata effettivamente inizi dalla coordinata
(0,20)</span> }</p>
<p><span class="commento"> combinata con lo pseudo-elemento :hover, la tecnica dei CSS sprites è molto utilizzata per gli
effetti di hovering su bottoni e altri controlli cliccabili </span> .icon3:hover { background: url(border.png) -40px
-20px ; <span class="commento"> lo sfondo viene posizionato spostandolo in alto di 20 pixel e a sinistra di 40 pixel, in
modo che la parte visualizzata effettivamente inizi dalla coordinata (40,20)</span> }</p>
<h3>HTML</h3><p><span class="icon icon3"> <a href="#"></a></span></p>
</div>
</div>
</div>
</body>
</html>