Categorie
Web Design

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
<div class="block">

<div class="building medium bisque"></div>

<div class="building tall palegoldenrod"></div>

<div class="building medium"></div>

<div class="building"></div>

<div class="building"></div>

<div class="building medium bisque"></div>

<div class="building"></div>

<div class="building palegoldenrod"></div>

</div>

<div class="block b2">

<div class="building medium bisque"></div>

<div class="building tall palegoldenrod"></div>

<div class="building medium"></div>

<div class="building"></div>

<div class="building"></div>

<div class="building medium bisque"></div>

<div class="building"></div>

<div class="building medium palegoldenrod"></div>

<div class="building"></div>

<div class="building"></div>

<div class="building medium"></div>

<div class="building palegoldenrod"></div>

<div class="building tall"></div>

<div class="building bisque"></div>

<div class="building medium"></div>

<div class="building medium"></div>

<div class="building"></div>

<div class="building medium bisque"></div>

<div class="building "></div>

<div class="building bisque"></div>

</div>

<div class="block b3">

<div class="building medium palegoldenrod"></div>

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

<div class="building"></div>

<div class="building bisque"></div>

<div class="building"></div>

</div>

 

 

 

 

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;

}

&nbsp;

.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;

}

&nbsp;

.b2 {

top: 180px;

height: 300px;

}

&nbsp;

.b3 {

left: 300px;

width: 180px;

height: 120px;

}

&nbsp;

.b4 {

top: 180px;

left: 300px;

width: 180px;

height: 180px;

}

&nbsp;

.b5 {

top: 420px;

left: 300px;

width: 180px;

height: 60px;

}

&nbsp;

 

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
<div class="block b5">

<div class="building palegoldenrod"></div>

<div class="building medium"></div>

<div class="building bisque"></div>

</div>

<div class="road"><div class="traffic_line"></div></div>

 

 

 

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;

&nbsp;

.traffic_line {

border: 2px dashed white;

top: 40%;

position: relative;

width: 98%;

}

&nbsp;

}

 

 

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
 

<div class="road horizontal_top"><div class="traffic_line"></div>

<div class="road vertical"><div class="traffic_line"></div>

<div class="road horizontal_bottom"><div class="traffic_line"></div>

 

 

 

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
&nbsp;

.horizontal_top {

top: 120px;

}

&nbsp;

.horizontal_bottom {

top: 360px;

width: $platform_side /2 -45px;

right: 0;

}

&nbsp;

 

 

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
.phone_icon {

&amp;:hover {

cursor: pointer;

background-color: #f5bb3d !important;

&amp;:after, &amp;:before {

background-color: #f5bb3d !important;

}

}

&nbsp;

&amp;: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);

}

}

&nbsp;

 

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
<div class="building large bisque mail_icon"><div class="popup_container"><div class="popup"></div></div></div>

 

 

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
&nbsp;

@keyframes wave {

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

}

&nbsp;

.popup_container {

position: absolute;

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

}

&nbsp;

.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;

}

&nbsp;

 

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);

&nbsp;

&amp;:hover {

.popup {

visibility: visible;

}

}

}

&nbsp;

 

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 {

&amp;:hover {

cursor: pointer;

background-color: #f5bb3d !important;

&amp;:after, &amp;:before {

background-color: #f5bb3d !important;

}

}

&nbsp;

&amp;: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);

}

&nbsp;

.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);

&nbsp;

.popup_container {

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

}

&nbsp;

.popup {

width: 200px;

height: 200px;

}

}

&nbsp;

&nbsp;

 

Categorie
Web Design

Costruisci un diorama con CSS3 e HTML5, aiutato dal potere di SASS, NodeJS e Gulp (parte 2 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 sei già pronto per la terza e ultima?

 

Edifici

La tecnica da usare per creare gli edifici è la stessa usata per la piattaforma. Avremo un div che erediterà la trasformazione 3d della base, e la coppia :after/:before per mostrare i lati visibili dell’edificio.

Cominciamo dall’html, dove apporteremo solo una piccola modifica aggiungendo un div con classe “building”:

 

1
2
3
4
5
6
7
8
9
<body>

<div id="base_platform">

<div class="building"></div>

</div>

</body>

 

 

 

Passiamo al css, definendo in primis tre nuove variabili che conterranno la misura del lato di un edificio, la sua profondità e la sua “altezza” intesa come spostamento sull’asse Z.

 

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
$building_side: 100px;

$building_depth: 100px;

$building_heigth: 100px;

e forniamo lo stile base della classe .building:

$platform_side: 480px;

$panel_heigth: 50px;

$building_side: 100px;

$building_depth: 100px;

$building_heigth: 100px;



.building {

width: $building_side;

height: $building_depth;

}

 

A questo punto, dopo la compilazione del foglio di stile, tornando al browser, una faccia della piattaforma dovrebbe essersi spostata in maniera non corretta. Questo accade perché tutti gli oggetti figli di #base_platform devo essere posizionati in maniera assoluta, separati dal flow di rendering in modo da non alterare la posizione di :after e :before.

Per ovviare a questo problema e garantire un posizionamento comodo dei palazzi, dobbiamo creare una sovrastruttura in cui inserirli. Immaginiamola come un isolato che può essere riempito di edifici.

Dentro l’html:

 

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

<div id="base_platform">

<div class="block">

<div class="building"></div>

</div>

</div>

</body>

 

 

 

Lo stile css di block è molto semplice:

 

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;

}

aggiungiamo a .building il posizionamento relativo e un background provvisorio per capire dove stiamo posizionando il nostro elemento:

.building {

width: $building_side;

height: $building_depth;

position: relative;

background-color: #d2d2d2;

}

 

A questo punto abbiamo una struttura contenitore, il div.block, spostabile a piacimento lungo la superficie della piattaforma, che al suo interno contiene uno o più elementi div.building.

Trasliamo sull’asse Z (quindi verso l’alto o verso il basso nel nostro piano tridimensionale) l’elemento .building e aggiungiamo l’opzione per preservare la prospettiva 3d dei figli; inoltre, diamo outline di 1px per compensare il lieve distacco tra le facce dei parallelepipedi, box-shadow per dare più corpo alle linee, float a sinistra e un margine di 5px per distanziare i palazzi.

 

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

width: $building_side;

height: $building_depth;

position: relative;

background-color: #d2d2d2;

transform: translateZ($building_heigth);

transform-style: preserve-3d;

outline: 1px solid #b5b5b5;

float: left;

margin: 10px;

}

 

 

Dobbiamo creare e posizionare le facce visibili dell’edificio, esattamente come abbiamo fatto per la piattaforma:

 

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
&nbsp;

.building {

width: $building_side;

height: $building_depth;

position: relative;

background-color: white;

transform: translateZ($building_height);

transform-style: preserve-3d;

outline: 1px solid #b5b5b5;

box-shadow: inset 0 0 0 2px #b5b5b5;

float: left;

margin: 5px;

transition: all 0.5s;

&nbsp;

&amp;:before, &amp;:after {

position: absolute;

background-color: inherit;

content: "";

outline: 1px solid #b5b5b5;

box-shadow: inset 0 0 0 2px #b5b5b5;

}

&nbsp;

&amp;:after {

height: $building_depth;

width: $building_heigth;

transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ($building_side);

transform-origin: left;

}

&nbsp;

&amp;:before {

height: $building_heigth;

width: $building_side;

transform: rotateX(90deg) translateX(0) translateY(-$building_heigth) translateZ(-$building_depth);

transform-origin: top;

}

}

 

 

L’utilizzo di sass e delle variabili ci permette di cambiare questi valori per personalizzare il nostro edificio. A questo punto, prospettando di avere edifici differenti per evitare una certa monotonia nel paesaggio, conviene spostare lo styling in un mixin e usare quest’ultimo per generare tutte le configurazioni che vogliamo.

Trasformiamo .building in un mixin:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin building($building_side, $building_depth, $building_heigth) {

width: $building_side;

height: $building_side;

poi ricreiamo il selettore usando il mixin per riempirlo:

.building {

@include building(50px, 50px);

}

 

Possiamo eliminare le variabili $building_side, $building_depth e $building_heigth in cima al nostro file in quanto adesso possiamo generare ogni genere di palazzo passando nel mixin i parametri relativi a lunghezza del lato e altezza dell’edificio. Il nostro edificio di default sarà un cubo di 50px.

Aggiungiamo due varianti, legandole a classi specifiche da aggiungere agli elementi .building che andremo a creare per popolare la città:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.tall {

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

}

.medium {

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

}

.large {

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

}

 

A questo punto, aggiungendo la classe .tall ad un elemento con classe .building,  dovremmo ottenere un piccolo grattacielo:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>

<div id="base_platform">

<div class="block">

<div class="building tall"></div>

<div class="building medium"></div>

<div class="building large"></div>

</div>

</div>

</body>

 

 

Per combattere la monotonia di un paesaggio completamente bianco, definiamo una piccola palette di colori nel foglio di stile.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$colors: bisque, darkseagreen, dodgerblue, burlywood, palegoldenrod, palegreen, paleturquoise, palevioletred;

@mixin generateColors {

@each $color in $colors {

.#{$color} {

background-color: $color !important;

&amp;:before, &amp;:after {

background-color: $color !important;

}

}

}

}

@include generateColors;

 

Questo mixin serve a generare dei selettori ciclando il contenuto della variabile $colors, in modo da sovrascrivere e forzare il valore di background-color per gli elementi cui viene appesa la classe, e per i loro :before e :after.

I colori scelti vengono dalla palette standard Html (https://www.w3schools.com/colors/colors_names.asp).

Adesso possiamo colorare i nostri edifici appendendo la classe relativa al colore scelto:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>

<div id="base_platform">

<div class="block">

<div class="building tall bisque"></div>

<div class="building medium palegoldenrod"></div>

<div class="building palegreen"></div>

</div>

</div>

</body>

 

Categorie
Web Design

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

Per prima cosa dobbiamo preparare il nostro ambiente di sviluppo per lavorare in maniera efficace. Installeremo Node JS, che ci permetterà di accedere ad NPM, il suo nutrito ecosistema di plugins. Da questo procederemo con l’installazione di Gulp, un task manager moderno e funzionale, e i due plugins che ci interessano principalmente: Gulp-Sass, per la compilazione di fogli di stile scritti in Sass (Syntactically Awesome StyleSheets), e BrowserSync, che ci aiuterà a sviluppare in maniera più rapida e fornirà un web server locale sollevandoci dalla necessità di installare Apache sulla nostra macchina.

Partiamo con Node JS. Il framework può essere scaricato sul sito ufficiale del progetto: https://nodejs.org/it/
Scegliamo la versione che ci aggrada e scarichiamo l’installer. Dopo aver avviato il setup, e installato Node JS, possiamo verificare che tutto sia andato a buon fine scrivendo nel terminale:

 

1
Node -v

 

che ci restituisce il numero di versione attualmente installato.

Ora che Node JS è presente sulla nostra macchina, possiamo accedere al repository NPM, letteralmente zeppo di plugins per i più svariati compiti, e installare Gulp, il task runner più comunemente usato nello sviluppo web recente.
Gulp si occupa di automatizzare una serie di task preimpostati per farci fare meno lavoro possibile e concentrarci sullo sviluppo. L’installazione di Gulp, la prima volta, deve essere eseguita globalmente; scriviamo dunque nel terminale:

1
npm install -g gulp

così come per il plug-in BrowserSync:

1
npm install -g browser-sync

Il flag -g installerà Gulp globalmente nel sistema. Per utilizzare Gulp nel nostro progetto occorre spostarsi dentro la directory principale in cui abbiamo deciso di lavorare e lanciare:

 

1
2
3
npm init

&nbsp;

Questo comando crea un file package.json dentro la directory, che governa l’insieme delle dipendenze di sviluppo del progetto. In seguito, installiamo Gulp come dipendenza locale:

 

1
2
3
npm install --save-dev gulp

&nbsp;

In questo modo Gulp verrà aggiunto come dipendenza di sviluppo al file package.json, grazie al flag –save-dev.

Ora possiamo procedere con l’installazione dei due plugins che ci interessano:

1
npm install --save-dev gulp-sass

e

1
npm install --save-dev browser-sync

 

Dovremmo essere ora in grado di creare e modificare il file gulpfile.js che stabilisce di quali task deve occuparsi Gulp; apriamo il nostro editor di fiducia e creiamo il file nella root del nostro progetto; la mia preferenza cade su Sublime Text 3, che offre potenti capacità di editing, è gratuito, e può essere personalizzato a piacimento, ma le alternative più comuni (Atom, Notepad++, Visual Studio Code) sono ugualmente apprezzabili.

Il contenuto del gulpfile :

 

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
var gulp = require('gulp');

var sass = require('gulp-sass');

var browserSync = require('browser-sync').create();

// Gulp task for sass

gulp.task('sass', function () {

gulp.src('components/stylesheet/**/*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('css'))

// BrowserSync watches changes

.pipe(browserSync.stream());

});

// Watchers

gulp.task('watch', function() {

// Define server for browser sync

browserSync.init({

server: {

baseDir: './'

}

});

gulp.watch("components/scripts/*.js", ['compress']);

gulp.watch("components/stylesheet/**/*.scss", ['sass']);

// Watch html changes and reload browser on save

gulp.watch("*.html").on('change', browserSync.reload);

});

// Run these tasks as default

gulp.task('default', ['watch']);

 

 

Senza scendere troppo nel dettaglio, abbiamo creato un task che ci permetterà di ascoltare i cambiamenti nei nostri files sass e compilare nel risultante foglio di stile css, e un altro task che imposta il server locale di browserSync (accessibile nel browser puntando a http://localhost:3000/ ) e ascolta i cambiamenti dei files html in modo da aggiornare automaticamente i browser che puntano a quell’indirizzo.

Nel gulpfile sono presenti dei path che dovremo ricreare dentro il progetto affinchè tutto funzioni. La directory “css” andrà a contenere il risultato della compilazione Sass dei fogli di stile. La directory “components” dovrà contenere due subdirectory chiamate “scripts” e “stylesheet”, dove andremo a creare i files scss e js che verranno poi processati e compilati da gulp-sass.

Creiamo e modifichiamo index.html con il minimo indispensabile, caricando il foglio di stile compilato da “css/styles.css”:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Demo Isometric Landscape</title>

<link rel="stylesheet" href="css/styles.css" type="text/css">

</head>

<body>

</body>

</html>

 

 

 

La struttura della directory del progetto dovrebbe essere questa:

 

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

index.html

gulpfile.js

package.json

css\

styles.css

components\

stylesheet\

styles.scss

scripts\

script.js

 

A questo punto possiamo fare una prova, creando un file “style.scss” dentro la directory “components/stylesheet” nel nostro editor di fiducia in cui inseriamo una semplicissima regola per verificare il corretto funzionamento del processo:

 

1
2
3
html { background: #0f91b5 }

&nbsp;

Tornati al prompt, possiamo avviare Gulp con il task di default e verificare che venga prodotto il file style.css dentro la directory “css”:

1
gulp

Se tutto è andato per il verso giusto, verrà aperto un tab dentro il nostro browser che punta al server locale di BrowserSync, aggiornandosi automaticamente ad ogni modifica del codice. Il nostro ambiente di lavoro è pronto e possiamo cominciare lo sviluppo della nostra demo.

 

 

 

 

Cominciamo

Partiamo, ed è davvero il caso, dalla base. Per ospitare il nostro diorama isometrico, avremo bisogno di una piattaforma su cui posizionare il tutto.

Inseriamo quindi l’oggetto che vogliamo creare nel nostro html:

 

1
2
3
<div id="base_platform"></div>

 

e procediamo con la stilizzazione nel file styles.scss:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#base_platform {

width: 480px;

height: 480px;

position: absolute;

top: 20%;

left: 30%;

background-color: white;

}

 

Il posizionamento assoluto ci permette di centrare l’oggetto nella pagina tramite le proprietà top e left. Stabiliamo altezza e larghezza a 480px (trattandosi di una tech-demo, e non avendo necessità di resizing, lavoreremo con misure precise al pixel) e settiamo in bianco il background-color.

A questo punto, dopo aver salvato il file, dovremmo essere in grado di vedere un quadrato bianco al centro della nostra pagina.

Applichiamo ora la prima trasformazione 3d aggiungendo allo stile di #base_platform le proprietà:

 

1
2
3
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);

transform-style: preserve-3d;

 

Vi rimando a https://www.w3schools.com/css/css3_3dtransforms.asp per una spiegazione più dettagliata, correlata da varie esempi, sulle trasformazioni 3d in Css3.

Brevemente, la prima proprietà ruoterà il div di 45 gradi sull’asse X e di 45 gradi sull’asse Z, ottenendo l’effetto di isometria. La regola transform “stacca” dal normale rendering della pagina l’elemento e lo tratta come un layer tridimensionale su cui operare con i vari effetti di trasformazione: rotate(), translate(), skew(), etc.

La seconda proprietà permette invece agli elementi figli del div di ereditare la trasformazione 3d scelta. Questo vale anche per le pseudo-classi dell’elemento, che ci consente di utilizzare :before e :after per creare le facce visibili della nostra piattaforma.

Sfruttando le capacità di nesting di Sass, definiamo i parametri comuni ad entrambe le facce:

per ora sappiamo che erediteranno entrambe il tipo di posizionamento e il colore del padre, e aggiungiamo le regole apposite. Inoltre, per essere visualizzate devono avere un contenuto da mostrare, quindi aggiungiamo la proprietà content passando nulla come parametro. Box-shadow, infine, darà ai pannelli laterali dei bordi interni di 2 px di un grigio a nostra scelta.

 

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
#base_platform {

width: 480px;

height: 480px;

position: absolute;

top: 20%;

left: 30%;

background-color: white;

transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);

transform-style: preserve-3d;

&amp;:before, &amp;:after {

position: inherit;

background-color: inherit;

content: "";

box-shadow: inset 0 0 0 2px #b5b5b5;

}

}

&nbsp;

 

Ora dobbiamo trasformare i pannelli laterali e posizionarli a dovere.

Creiamo nel file scss due variabili che contengano la larghezza di un lato della piattaforma, e l’altezza del pannello laterale:

 

1
2
3
$platform_side: 480px;

$panel_heigth: 50px;

 

e sostituiamo dove possibile. Per l’after e il before della piattaforma, dovremo settare height, width e transform-origin, ricordandoci di invertire i valori di altezza e larghezza per l’elemento :after. Transform farà il resto, ruotando e traslando l’elemento per ottenere il nostro effetto 3d.

 

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
$platform_side: 480px;

$panel_heigth: 50px;

&nbsp;

&nbsp;

&nbsp;

#base_platform {

width: $platform_side;

height: $platform_side;

position: absolute;

top: 20%;

left: 30%;

background-color: white;

transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);

transform-style: preserve-3d;

&nbsp;

&amp;:before, &amp;:after {

position: inherit;

background-color: inherit;

content: "";

box-shadow: inset 0 0 0 2px #b5b5b5;

}

&nbsp;

&amp;:after {

height: $platform_side;

width: $panel_heigth;

transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ($platform_side);

transform-origin: left;

}

&nbsp;

&amp;:before {

height: $panel_heigth;

width: $platform_side;

transform: rotateX(90deg) translateX(0) translateY(-$panel_heigth) translateZ(-$platform_side);

transform-origin: top;

}

}

&nbsp;

 

Adesso possiamo eventualmente anche modificare la dimensione della piattaforma e dei sui lati, cambiando le variabili platform_side e panel_heigth.

La nostra piattaforma è pronta per ospitare il diorama ed è arrivato il momento di creare gli edifici che ci andremo a posizionare sopra.

 

CONTINUA >>>