Fotogallery Fullscreen con Css3 e Html5

12 maggio 2011

Tra le tante nuove proprietà di css3 molto interessanti, esiste quella background-size che ci permette di poter amministrare la grandezza dei nostri sfondi adattandoli ad ogni dimensione.

Possiamo infatti utilizzare anche le percentuali ed è proprio grazie a questo valore che oggi posso spiegarvi come realizzare un semplice photo-gallery fullscreen con css3.

Per iniziare creiamo la struttura 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

<!doctype HTML>
<html>

<head>

<title>Sito animato con HTML5</title>

<link rel="stylesheet" media="screen" href='stile.css'>

</head>

<body>

<div id='uno'></div>
<div id='due'></div>
<div id='tre'></div>

<nav>

<ul>
<li><a href='#uno'><img src='1.jpg'></a></li>
<li><a href='#due'><img src='2.jpg'></a></li>
<li><a href='#tre'><img src='3.jpg'></a></li>
</ul>

</nav>

</body>

</html>

Come avrete visto ho inserito tre div vuoti con degli ID univoci che contrassegnano ogni elemento, e tre immagini linkate proprio con quegli id. Questo perché tutta la fotogallery girerà attorno al pseudo-selettore :target che ci permette di selezionare un determinato elemento contrassegnato da un ID attraverso l’url del browser.

Ora possiamo inserire il nostro css altamente commentato:

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

* {
margin: 0px auto;
padding: 0px;
}

div {

/* posiziono i div contenenti gli sfondi */

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

/* utilizzo queste semplici regole per adattare lo sfondo */

background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;

/* applico un effetto di transizione sull'opacità */

-moz-transition: opacity 3s linear;
-webkit-transition: opacity 3s linear;
-o-transition: opacity 3s linear;

/* imposto con opacity 0 i div */

opacity: 0;

}

/* imposto le varie foto come sfondo */

div#uno { background-image: url('1.jpg'); z-index: 9; }
div#due { background-image: url('2.jpg'); z-index: 9; }
div#tre { background-image: url('3.jpg'); z-index: 9; }

/* utilizzo :target per rendere visibili le immagini */

div:target {

opacity: 1;
z-index: 12;

}

/* vista la difficoltà applico un ordine di livello negli elementi */

nav { z-index: 13; }
nav ul { z-index: 14; position: absolute; bottom: 20px; right: 20px }
nav ul li { z-index: 15; margin: 10px; }

ul li {
float: left;
list-style: none;
}

/* utilizzo clip per le thumnail della gallery */

nav ul li a img {

clip: rect(20px, 300px, 200px, 100px);
width: 50px;
height: 50px;
border-radius: 200px;
opacity: 0.9;

}

nav ul li a img:hover {
opacity: 1;
}

nav ul li {
border-radius: 200px;
border: 5px solid #ffffff;
}

Come avete visto è stato molto semplice realizzare questo fantasmagorico effetto. Ho solo tre punti saliente da sottolineare:

- La transizione di opacità viene interpretata in maniera esemplare solo su motore mozilla mentre su webkit va quasi “a scatti”;
- Ovviamente l’effetto di transizione non viene visionato anche sul nuovo browser di casa Microsoft ( Internet Explorer 9 );
- La proprietà clip è stata deprecata in alcuni browser con la sua vecchia forma che utilizzava le virgolette potrebbe capitare che alcuni browser moderni non visualizzino l’immagine rimpicciolita.

Se voleste visionare la demo potreste tranquillamente andare su questo link.

Vi è piaciuto l’articolo? Scrivetemelo in un commento