Costruisci un diorama con CSS3 e HTML5, aiutato dal potere di SASS, NodeJS e Gulp (parte 3 di 3)

Bentornati alla nostra città in costruzione. Abbiamo buttato giù la pianta e ora è il momento di tirare su degli edifici.

Hai perso la prima parte o la seconda? We got you covered.

Assembliamo la città

A questo punto siamo in grado di assemblare il diorama partendo dalla struttura di blocchi contenitori.
Per avere un’idea più chiara riguardo a spaziature e posizionamenti, rimuoviamo la regola css che attua la trasformazione 3d su #base_platform:

Il div con classe “block” non ha attualmente dimensioni definite: sapendo che ogni edificio occupa uno spazio di 60px per lato (50px + 5px di margine per lato) possiamo impostare le misure usando multipli di questo valore.

Nel caso del primo contenitore, optiamo per una griglia di 4 edifici su due righe:

1
2
3
4
5
6
7
8
9
10
11
12
13

.block {

position: absolute;

top: 0;

left: 0;

width: 240px;

height: 120px;

}

Completiamo il riempimento inserendo altri edifici nel nostro file html, e creando un nuovo contenitore con classe “block” a cui assegnamo una classe aggiuntiva “b2” che useremo per sovrascrivere le coordinate di posizionamento:

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

Nel file scss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.block {

position: absolute;

top: 0;

left: 0;

width: 240px;

height: 120px;

}

 

.b2 {

top: 180px;

height: 300px;

}

Il secondo blocco viene spostato di 180px , ovvero la misura dell’altezza del blocco precedente più 60px di spazio vuoto che useremo per le strade della città. Viene anche sovrascritta la sua altezza, per creare una griglia di 5 x 4 edifici.

Utilizzando lo stesso sistema possiamo creare altri tre isolati e assemblare l’intero diorama.

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

.block {

position: absolute;

top: 0;

left: 0;

width: 240px;

height: 120px;

}

 

.b2 {

top: 180px;

height: 300px;

}

 

.b3 {

left: 300px;

width: 180px;

height: 120px;

}

 

.b4 {

top: 180px;

left: 300px;

width: 180px;

height: 180px;

}

 

.b5 {

top: 420px;

left: 300px;

width: 180px;

height: 60px;

}

 

A questo punto dobbiamo creare le strade per riempire gli spazi vuoti nella mappa. Definiamo un nuovo div nel nostro html e assegnamo la classe “road”, che si occuperà della colorazione e spaziatura, e un div innestato con classe “traffic_line” per usare un bordo tratteggiato come segnaletica orizzontale :

1
2
3
4
5
6
7
8
9
10
11

E procediamo con la stilizzazione:

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

.road {

position: absolute;

background: gray;

height: 30px;

width: $platform_side;

margin: 15px 0 15px 0px;

z-index: -1;

 

.traffic_line {

border: 2px dashed white;

top: 40%;

position: relative;

width: 98%;

}

 

}

Impostiamo “position: absolute” per lo stesso principio considerato nel posizionare gli isolati, aggiungiamo un background grigio, l’altezza a 30px e la larghezza uguale a quella della piattaforma, un margine di 15px per i lati superiore e inferiore, e lo z-index a -1 per far si che la strada sia sempre coperta dagli edifici.

Per ogni strada aggiuntiva dovremo creare un nuovo div con classe “road”, e appendere la classi di modifica relative.

1
2
3
4
5
6
7
8
9

Per la strada verticale avremo la classe “vertical” da appendere al div:

1
2
3
4
5
6
7
8
9
10
11

.vertical {

transform: rotate(90deg);

transform-origin: 0% -50%;

top: 0px;

left: 300px;

}

Non facciamo altro che ruotare il div di 90 gradi, allineare l’origine della trasformazione, e impostare top e left per il posizionamento.

Mentre le due orizzontali richiederanno una differenziazione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 

.horizontal_top {

top: 120px;

}

 

.horizontal_bottom {

top: 360px;

width: $platform_side /2 -45px;

right: 0;

}

 

In questo modo la strada posizionata in basso nel diorama occuperà metà dello spazio disponibile con un’ulteriore sottrazione di 45px per evitare l’overlap con altri elementi e verrà ancorata a destra.

A questo punto la situazione dovrebbe essere qualcosa di simile a questo:

Il diorama isometrico è completo, e possiamo procedere con la stilizzazione degli edifici speciali. Ne scegliamo tre, e per ognuno mostreremo un’icona png sulla facciata, cambiando la colorazione in hover del palazzo per allinearsi con il colore dell’icona.

Ho scelto tre icone dall’ottimo set “Colorful Flat Summer” (https://www.smashingmagazine.com/2014/05/summer-essentials-icon-set-freebie-eps-png-ai/) disegnato da Elena Genova per Smashing Magazine:

Una volta scaricato il set, copiamo le icone dentro la root del progetto e stilizziamo il primo palazzo, creando la classe “phone_icon”:

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

Niente di trascendentale: definiamo il colore del background all’hover copiandolo dall’icona tramite il color picker e impostiamo lo stesso per :after e :before; il blocco seguente setta l’icona scelta come background, con le relative opzioni: centrato, largo il 20%, senza ripetizioni. Unica accortezza: ripetiamo la trasformazione 3d del :before aggiungendo scaleY(-1) che “capovolgerà a specchio” l’elemento mostrando correttamente l’icona.

Il codice sass per le altre icone è il medesimo, con gli ovvi aggiustamenti di path, colore del background e parametri di trasformazione (è sempre necessario sovrascrivere interamente una trasformazione con più metodi, altrimenti verrà applicato l’ultimo dichiarato: “transform: scaleY(-1)” avrebbe sovrascritto la trasformazione iniziale).
Aggiungiamo quindi queste nuove classi agli edifici che vogliamo marcare come interattivi:

1	<div class="building large bisque mail_icon"></div>

A questo punto, volendo utilizzare il diorama come interfaccia, è necessario renderlo più “parlante”, effetto che otterremo inserendo dei popup animati che verranno mostrati all’hover sugli edifici interattivi.

1
2
3

L’elemento “popup_container” servirà a creare uno spazio definito in cui animare il popup.

Aggiungiamo al file scss:

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

 

@keyframes wave {

50% { transform: translateY(2em); }

}

 

.popup_container {

position: absolute;

transform: rotate(-45deg) translateX(-50px) translateY(-120px);

}

 

.popup {

width: 100px;

height: 100px;

background-color: rgb(214, 220, 226);

position: absolute;

border: 3px solid #68a9e8;

border-radius: 5px;

animation: wave 3s 1s ease-in-out infinite;

box-shadow: inset 0 0 0 0.25em white;

visibility: hidden;

}

 

Cominciamo creando l’animazione “wave” tramite la regola “keyframes”. E’ un loop che sposta il div sull’asse Y.

Poi impostiamo il container in posizionamento assoluto, adattando i parametri della trasformazione 3d.
In seguito stilizziamo graficamente il popup, e aggiungiamo l’animazione che abbiamo creato in precedenza.

Modifichiamo la classe “buildings” di default:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.building {

@include building(50px, 50px, 50px);

 

&:hover {

.popup {

visibility: visible;

}

}

}

 

Per rendere visibile il popup all’hover.

E aggiungiamo la stilizzazione del popup nelle regole che definiscono i nostri palazzi speciali:

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

.phone_icon {

&:hover {

cursor: pointer;

background-color: #f5bb3d !important;

&:after, &:before {

background-color: #f5bb3d !important;

}

}

 

&:before {

background-image: url(/phone.png);

background-size: 80%;

background-repeat: no-repeat;

background-position: center;

transform: rotateX(90deg) translateX(0) scaleY(-1) translateY(0px) translateZ(-50px);

}

 

.popup {

background-image: url(/phone.png);

background-repeat: no-repeat;

background-position: center;

background-color: #f5bb3d !important;

border: 3px solid #f5bb3d;

}

}

Ripetendola per ogni regola e cambiando ovviamente i colori.

In caso di necessità, possiamo sovrascrivere lo stile del popup e il posizionamento della maschera a seconda della tipologia di edificio:

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

.large {

@include building(110px, 50px, 200px);

 

.popup_container {

transform: rotate(-45deg) translateX(-80px) translateY(-220px);

}

 

.popup {

width: 200px;

height: 200px;

}

}

 

 

Ciro Bonfrate

Lascia un commento Annulla risposta