Realizziamo una Lightbox in Css3 e Html5

1 febbraio 2011

Fino ad oggi realizzare una gallery con effetto lightbox era una cosa che implicava l’uso di javascript oppure di flash. Ebbene da oggi potrai pure utilizzare html5 e css3 per realizzare il tutto con pochissime righe di codice facili da usare .

Partiamo dal codice html5:

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

<!doctype>

<html>

<head>

<title>Una Semplice LightBox in Css3 & Html5</title>

<link href="css/main.css">

</head>

<body>

<ul id='small'>

<li><a href='#img1'><img src='min_1.jpg'></a></li>

<li><a href='#img2'><img src='min_2.jpg'></a></li>

<li><a href='#img3'><img src='min_3.jpg'></a></li>

</ul>

<ul id='big'>

<li id='img1'><a href='#no_img'><img src='big_1.jpg'></a></li>

<li id='img2'><a href='#no_img'><img src='big_2.jpg'></a></li>

<li id='img3'><a href='#no_img'><img src='big_3.jpg'></a></li>

</ul>

</body>

</html>

Come avete visto sono presenti due elenchi “big e small”, essi fanno parte integrante del nostro script, nel ul small ci staranno le miniature mentre in quello big le foto a grandezza naturare.

Ora andiamo al codice css3 commentato in ogni sua parte:

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

/* imposto margini, immagini e sfondo */

* {
margin: 0px auto;
padding: 0px;
text-align: center;
}

body {
background-color: rgba(255, 150, 0, .5);
}

img {
border-radius: 8px;
}

/* imposto i vari ul */

ul li {
list-style:none;
}
ul#small {
margin-top: 100px;
}

/* imposto la visibilità delle immagini grandi */

ul#big li {
opacity:0;
text-align: center;
}
ul#big li img {
margin: 10% auto;
padding: 0px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 10px solid #ffffff;
}

/* imposto l'animazione di fade delle immagini */

ul#big li[id]:target {
opacity:0;
-webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
-moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
-o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
transition:opacity 1.2s cubic-bezier(0,0,0,1);
}

/* imposto lo sfondo nero quando l'immagine è grande */

ul#big li[id]:target {
position: absolute;
top: 0;
left: 0;
opacity:1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}

/* imposto il link per chiudere l'immagine quando è allargata */

ul#big li[id]:target a {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

Qua puoi trovare un pratico esempio ( funzionante solo su browser che supportano html5 e css3 ).

Ovviamente è da sottolineare il fatto che questo tipo di tecnologia è compatibile soltanto con browser moderni, ma ciò non ci nega di sapere come funziona questo nuovo meccanismo.

Oggi abbiamo approfondito :target uno pseudo selettore di css3.

Grazie e alla prossima