Impostare i margini

Nei capitoli precedenti abbiamo visto in generale come costruire una regola CSS: la struttura di una regola, i selettori per “pescare” le porzioni di testo da modificare, e così via. A partire da questo capitolo, vedremo invece come riempire una regola, ossia cosa scrivere tra le parentesi graffe.

Il contenuto di una regola è costituito da una serie di proprietà, ossia di coppie attributo+valore: un attributo identifica quale aspetto di un elemento vogliamo modificare (colore, dimensioni, posizione, eccetera), mentre il valore è, molto semplicemente, il modo in cui vogliamo modificare quel dato aspetto. Argomento di questo capitolo saranno gli attributi tramite cui possiamo decidere la gestione dello spazio, per un dato elemento. In altri termini, parleremo di margini, bordi e così via, tutto ciò che costituisce il cosiddetto “modello a scatola” (o a box, se volete suonare più anglofili).

5-1 Il modello a scatola

Quando pensiamo a un tag, molto spesso tendiamo a identificarlo col suo contenuto tradizionale. Un tag <p> è un paragrafo di testo, un tag <a> è un link a qualche altra pagina, ossia una o più parole sottolineate e cliccabili, un tag <img> è una immagine, e così via. Dal punto di vista di un browser, o di qualsiasi altro dispositivo di lettura, un tag è una piccola scatola: un mattoncino LEGO, se ci è più chiaro in questi termini. All’interno di questa scatola-tag possono trovarsi cose di ogni tipo: testo, immagini, video, o altro, ma tutto ciò è secondario. L’importante è che il tag occupa spazio, nella pagina, ed è un rettangolo (o un mattone) che il browser inserirà in un determinato posto, per costruire ciò che noi vedremo sullo schermo.

Comporre una pagina, per un dispositivo di lettura, è come costruire un puzzle, i cui pezzi possono variare di dimensione in ogni momento. I pezzi del puzzle sono i tag: il tag <body> è un rettangolo grande quanto la pagina intera, il tag <p> è grande quanto il paragrafo che contiene, il tag <h1> sarà grande invece quando la riga di titolo corrispondente, e così via. Quando la dimensione di un pezzo cambia, tutta la struttura del puzzle si modificherà di conseguenza, scorrendo per risistemare tutto quanto in una posizione grande a sufficienza da contenerlo.

Disegnare il layout di un sito Web significa giocare con questo puzzle e può essere alquanto dispendioso in termini di tempo, se dobbiamo mettere d’accordo pezzi di dimensioni molto diverse tra loro. Per uno e-book, in genere, le cose sono molto più semplici (a meno che non vogliate complicarvi la vita con impaginazioni strane o futuristiche, ma in questo caso la scelta è vostra), ma è comunque necessaria una certa attenzione alla disposizione spaziale degli elementi.

Ogni scatola-tag è composta da quattro attributi fondamentali, che ne determinano la dimensione e la struttura e che noi possiamo spesso modificare a nostro piacimento:

border è il più semplice di tutti: è il perimetro del rettangolo e rappresenta una “cornice” attorno a un elemento;
padding è lo spazio vuoto tra il bordo di un elemento e il suo contenuto: se abbiamo deciso di racchiudere un paragrafo in una cornice, ad esempio, padding ci dirà quanto spazio bianco vedremo tra la cornice e il testo del paragrafo;
margin è lo spazio che separa il bordo di un tag dal bordo dei tag che lo circondano: è lo spazio che fa da cuscinetto tra un tag e l’altro, separandoli;
background-color, infine, è il colore con cui ci apparirà lo spazio all’interno del border ed è, di fatto, lo sfondo di quel tag. Se si opta per usare una immagine, anziché un colore, al suo posto useremo un attributo background-image.

Questi attributi costituiscono il modello a scatola per ogni tag e li possiamo modificare, per renderli di nostro gradimento. Margin, padding e border, inoltre, possono essere impostati individualmente per ognuna delle quattro direzioni (su, giù, destra e sinistra), oppure possono essere impostati in un colpo solo, per tutte e quattro le direzioni. Nel resto del capitolo vedremo come funzionino questi attributi.

5-2 Border

Possiamo utilizzare l’attributo border, per disegnare una cornice attorno a un determinato elemento: attorno all’intero elemento, oppure attorno a uno o più dei quattro possibili lati della nostra scatola. La versione di base di questo attributo è
border:
, che imposta la cornice per tutti e quattro i lati nello stesso momento. Se invece vogliamo inserire una cornice soltanto lungo una parte del tag, possiamo usare uno o più di questi attributi: border-top, border-right, border-bottom, border-left. Come si può intuire dal nome, questi attributi disegneranno rispettivamente una cornice lungo il lato superiore, destro, inferiore e sinistro del tag.

Per ognuno di questi attributi dobbiamo indicare tre valori: lo spessore, lo stile e il colore. Non ha importanza in che ordine li indichiamo, purché compaiano tutti e tre; solitamente, però, sono usati nell’ordine che ho indicato: per primo lo spessore, poi lo stile, infine il colore. Per esempio,
border: 1px solid black;
disegnerà una cornice dallo spessore di 1 pixel attorno al nostro elemento; la linea sarà continua (solid) e il suo colore sarà nero (black). Come vedete, gli attributi non devono essere separati da una virgola, ma da uno spazio bianco. Scrivendo invece
border-bottom: 2px dotted red;
, otterremo una linea punteggiata (dotted) sotto al nostro elemento, con uno spessore di 2 pixel e di colore rosso.

Lo spessore di border è solitamente indicato in pixel, ossia la più comune unità di misura nel magico mondo della grafica al computer. Questo valore è espresso da un numero, seguito dalle lettere px, che indicano appunto la unità di misura utilizzata: fra il numero e px non va lasciato spazio. Scriveremo dunque 1px, per avere uno spessore di 1 pixel, 3px per uno spessore di 3 pixel, e così via. Potete anche utilizzare altre unità di misura, ma è meglio mantenere le cose semplici, almeno all’inizio.

Lo stile indica il modo in cui sarà disegnato il bordo: linea continua, linea tratteggiata, puntini e così via. Per esprimerlo, abbiamo a nostra disposizione 10 valori: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden. None e hidden danno lo stesso risultato, ossia il bordo non sarà disegnato; gli altri otto stili, invece, producono effetti grafici più semplici da vedere applicati, che da descrivere a parole. I più normali, e dunque quelli usati più spesso in uno e-book, sono i primi quattro: solid è una normale linea chiusa, dotted è una linea punteggiata, dashed è una linea tratteggiata e double è una linea doppia.

Il colore, infine, indica ovviamente il colore con cui il bordo sarà disegnato. Il colore, nel CSS, può essere indicato in almeno tre modi: per i colori base è di solito disponibile un nome (in inglese); per colori particolari, per le sfumature, o per essere sicuri che il colore sia compreso da ogni dispositivo, possiamo utilizzare il suo valore esadecimale, oppure indicare la combinazione di rosso, verde e blu che lo producono. E qui le cose possono farsi complicate.

Nei casi più semplici, possiamo esprimere questo valore col nome inglese del colore che ci interessa: black, white, blue, red, green, yellow, magenta, e così via. Se non ci accontentiamo e vogliamo usare sfumature particolari, dovremo esprimere il colore attraverso un numero: un numero esadecimale, che rappresenta quel colore, oppure indicando la quantità di rosso, verde e blu da mescolare, per ottenere quel colore. Ne parlerò in modo approfondito in un’altra sezione di questo capitolo, descrivendo l’attributo background-color.

5-3 Padding

Lo spazio che si trova tra il bordo di un elemento e il suo contenuto è determinato dall’attributo padding: se non abbiamo impostato il padding, o se il padding è pari a zero, il contenuto sarà appiccicato al bordo; se il padding ha un valore superiore a zero, avremo uno spazio vuoto di dimensione corrispondente tra il bordo del nostro elemento e il suo contenuto. Se abbiamo deciso di utilizzare l’attributo border, per disegnare una cornice attorno a una sezione del nostro e-book, è molto probabile che vorremo anche impostare l’attributo padding, per evitare che il testo della sezione sia appiccicato al bordo.

L’attributo padding è disponibile in quattro gusti, a seconda di dove vogliamo inserire questo margine interno: padding-top, padding-right, padding-bottom e padding-left. Come è facile da intuire anche in questo caso, padding-top inserirà un margine interno tra il bordo superiore del nostro elemento e la parte alta del suo contenuto, padding-right lo inserirà tra il bordo destro del nostro elemento e il lato destro del suo contenuto, padding-bottom tra il bordo inferiore e la parte bassa del contenuto, padding-left fra il bordo sinistro e il lato sinistro del contenuto.

Il valore da assegnare a questi attributi è un semplice numero, che indicherà la quantità di spazio da inserire. Di conseguenza,
padding-left: 5px;
inserirà un margine interno di 5 pixel tra il bordo sinistro e l’inizio del contenuto, mentre
padding-bottom: 10px;
inserirà un margine interno di 10 pixel tra il bordo inferiore e la fine del contenuto. Il valore sarà sempre numerico, ma non siamo limitati al pixel come unità di misura, anche se è la più comune. Un’altra unità di misura, usata abbastanza spesso in un e-book, sarà lo em. Lo em è una unità di misura più esoterica e meno chiara, rispetto a un pixel; inoltre, è molto variabile. Uno em corrisponde infatti al corpo del carattere che utilizziamo: se stiamo utilizzando un carattere di 16px, uno em corrisponderà a 16px; se ingrandiamo il carattere, anche lo em si ingrandirà di conseguenza. Per il resto, funziona come il pixel: scriviamo un numero e vi appiccichiamo la sigla em, senza lasciare spazi nel mezzo. Di conseguenza,
padding-top: 2em;
significa che dovrà esserci un margine interno pari a 2 caratteri tra il bordo alto dell’elemento e la parte superiore del contenuto. Per azzerare il padding, invece, basterà assegnare un valore di 0, senza bisogno di specificare l’unità di misura (lo 0 è sempre 0, che siano pixel, em o quant’altro).

Se vogliamo impostare il padding su più lati, possiamo elencare uno dopo l’altro i vari lati. Se in una regola scriviamo
padding-top: 10px; padding-left: 5px;
, imposteremo un margine interno superiore pari a 10 pixel e un margine interno sinistro pari a 5 pixel. In alternativa, possiamo utilizzare una scorciatoia e impostare tutte e quattro le direzioni in una volta sola.
padding: 5px;
imposterà un margine interno di 5 pixel su tutti e quattro i lati. Se invece scriviamo
padding: 10px 5px;
imposteremo un margine interno superiore e inferiore pari a 10 pixel e un margine interno destro e sinistro pari a 5 pixel. Se invece scriviamo
padding: 10px 5px 7px;
imposteremo un margine interno superiore pari a 10 pixel, un margine interno destro e sinistro pari a 5 pixel e un margine interno inferiore pari a 7 pixel. Infine, se scriviamo
padding: 10px 5px 5px 10px;
otterremo un margine interno superiore pari a 10 pixel, un margine interno destro pari a 5 pixel, un margine interno inferiore pari a 5 pixel e un margine interno sinistro pari a 10 pixel.

Riassumendo, abbiamo dunque quattro modi per utilizzare la proprietà abbreviata padding:, per impostare i margini interni di un elemento:

assegnando un solo valore, quel valore sarà utilizzato su tutti e quattro i lati;
con due valori, il primo sarà utilizzato per i margini sopra e sotto, il secondo per destra e sinistra;
con tre valori, il primo sarà utilizzato per il margine superiore, il secondo per destra e sinistra, il terzo per il margine inferiore;
con quattro valori, questi saranno utilizzati, nell’ordine, per i margini superiore, destro, inferiore e sinistro.

Ovviamente, uno o più di questi valori possono essere impostati a 0, se non vogliamo un margine interno su quel lato.

5-4 Margin

Tutto ciò che abbiamo appena detto per l’attributo padding vale anche per l’attributo margin. Se padding imposta il margine interno di un elemento, ossia lo spazio tra il suo bordo (il suo perimetro, se così ci è più chiaro) e l’inizio del suo contenuto, margin imposta invece il margine esterno di un elemento, ossia lo spazio tra il suo bordo e il bordo (o il margine) degli elementi confinanti.

Un tipico caso in cui vorremo utilizzare l’attributo margin è per separare due elementi, attorno a cui abbiamo deciso di disegnare una cornice usando l’attributo border: se il margine esterno dei due elementi è pari a zero, le loro cornici saranno appiccicate e il risultato estetico potrebbe non essere molto bello. Inoltre, il tag <p> possiede già un valore di margin superiore a zero, su qualsiasi browser o dispositivo di lettura: è per questo motivo che noi vediamo uno spazio vuoto di una riga, tra un paragrafo e il successivo. Se vogliamo eliminare questo spazio vuoto, e avere i paragrafi tutti attaccati come in un normale libro cartaceo, una delle prime regole nel nostro foglio di stile dovrà essere
p { margin: 0; }

In questo modo, il margine “naturale” posseduto da ogni tag <p> sarà azzerato e potremo poi procedere assegnandovi lo stile che preferiamo, senza doverci preoccupare di interferenze del dispositivo di lettura.

Anche l’attributo margin si presenta in quattro gusti di base, più una forma abbreviata. I quattro attributi di base sono margin-top, margin-right, margin-bottom e margin-left e funzionano proprio come ci aspettiamo: margin-top imposta il margine esterno superiore, margin-right imposta il margine esterno destro, margin-bottom imposta il margine esterno inferiore e margin-left imposta il margine esterno sinistro. Come abbiamo già visto per padding, anche per margin il valore è un numero, accompagnato da una unità di misura: pixel (px) ed em sono le più usate.

Anche il margine esterno può essere impostato con una formula abbreviata e le regole sono le stesse che abbiamo già visto per il padding. In altri termini,
margin: 5px;
imposterà un margine esterno di 5 pixel su tutti e quattro i lati. Se invece scriviamo
margin: 10px 5px;
imposteremo un margine esterno superiore e inferiore pari a 10 pixel e un margine esterno destro e sinistro pari a 5 pixel. Se invece scriviamo
margin: 10px 5px 7px;
imposteremo un margine esterno superiore pari a 10 pixel, un margine esterno destro e sinistro pari a 5 pixel e un margine esterno inferiore pari a 7 pixel. Infine, se scriviamo
margin: 10px 5px 5px 10px;
otterremo un margine esterno superiore pari a 10 pixel, un margine esterno destro pari a 5 pixel, un margine esterno inferiore pari a 5 pixel e un margine esterno sinistro pari a 10 pixel. Niente di nuovo sul fronte occidentale, insomma.

Quando lavorate sui margini esterni, però, c’è un caveat a cui prestare molta attenzione. Quando i margini esterni di due elementi si toccano (ad esempio, se un elemento possiede un margin-bottom e l’elemento sottostante possiede un margin-top), i due margini non si sommano, come ci potremmo ingenuamente aspettare (e come accade con border), ma sarà utilizzato un margine solo: il più grande tra i due. Di conseguenza, se un paragrafo del nostro capitolo possiede una proprietà
margin-bottom: 15px;
e il paragrafo successivo possiede una proprietà
margin-top: 10px;
il margine effettivo tra i due paragrafi, disegnato sullo schermo, sarà di 15 pixel, cioè sarà uguale al valore più alto tra i due margini confinanti. Perché funziona così? Chiedetelo a chi progetta e realizza i browser.

Siccome questo problema si verifica soltanto quando ci sono due margini esterni confinanti, possiamo risolverlo in modo molto semplice: per uno dei due elementi confinanti useremo un attributo margin e per l’altro useremo un attributo padding. Nell’esempio dei nostri due paragrafi in conflitto, possiamo assegnare al primo paragrafo una proprietà
margin-bottom: 15px;
e al secondo paragrafo una proprietà
padding-top: 10px;
In questo modo, lo spazio tra i due paragrafi sarà pari a 25 pixel (15 + 10), anziché essere 15 pixel, come accadrebbe usando l’attributo margin per entrambi.

5-5 Elementi a blocco e in linea

Prima di poter concludere il discorso su margini e affini, c’è una ultima nota: gli attributi border, margin e padding possono essere utilizzati su qualsiasi tipo di tag, ma non sempre otterremo il risultato che ci aspettavamo. Lo HTML distingue infatti tra due tipi di elementi, ossia tra quelli che creano un blocco separato all’interno della pagina e quelli che coabitano su una stessa linea con altri elementi.

I tag <p> e <div> sono esempi tipici di tag che creano blocchi (servono proprio a dividere la pagina in sezioni logiche) e sono spesso accompagnati da una separazione grafica sullo schermo; i tag <b>, <span> e <a> sono esempi tipici di tag che coabitano su una stessa linea, senza dividere la pagina in blocchi. In caso di tag “in linea”, assegnare margini in alto e in basso non funzionerà come previsto, mentre i margini laterali non daranno problemi: non possiamo insomma usare padding-top o margin-bottom per aumentare lo spazio tra le linee (vedremo in un altro capitolo come fare, se vogliamo cambiare i valori di interlinea). O almeno, non normalmente.

Esiste infatti un attributo particolare, che ci permette di decidere se un tag dovrà comportarsi come un blocco, oppure come un tag “in linea”: è l’attributo display. Se a un tag assegniamo la proprietà
display: inline;
, quel tag coabiterà pacificamente sulla stessa linea con altri tag, a prescindere da quale sia il suo tipo; se invece gli assegniamo la proprietà
display: block;
, quel tag creerà un blocco indipendente all’interno della pagina, proprio come il tag <p>, e potremo controllare i suoi margini su tutti e quattro i lati.

A titolo puramente informativo, è possibile anche assegnare un valore none a questo attributo, nascondendo così l’elemento a cui è applicato, ma è improbabile che ne avremo bisogno in un normale e-book, dato che il ricorso a
display: none;
è di solito accompagnato da una funzione in JavaScript, per modificarne il valore e mostrare o nascondere il contenuto. Nulla ci vieta di farlo, in teoria, ma argomento di questa guida è il CSS e un discorso sul JavaScript mi porterebbe alquanto fuori tema.

5-6 Background-color

Dei quattro attributi fondamentali che abbiamo elencato all’inizio, parlando del modello a scatola, l’ultimo che mi resta da esaminare è background-color. Come il nome stesso suggerisce, questo attributo ci permette di impostare un colore come sfondo per un determinato elemento: più precisamente, il colore assegnato a background-color sarà utilizzato per tutto lo spazio all’interno del bordo di un elemento. Curiosamente, il colore sarà applicato anche sotto al bordo: se infatti assegniamo a border un valore di stile che non sia continuo, come ad esempio dotted (bordo a puntini) o dashed (bordo a trattini), anche lo spazio tra un segmento e l’altro del bordo sarà colorato in questo modo.

A ogni modo, un utilizzo tipico di background-color è questo:
body { background-color: yellow; }

Questa regola colorerà tutte le nostre pagine di giallo, essendo assegnata direttamente al tag <body>, ed è certo il sistema più veloce per assicurarci che tutto il nostro libro sia “stampato” su una carta virtuale dello stesso colore. È comunque importante ricordare che il colore non sarà applicato agli eventuali spazi impostati da margin, in quanto quelli si troveranno al di fuori del nostro elemento.

Il valore da assegnare all’attributo background-color è sempre e solo un colore. Come avevo accennato già in precedenza, parlando dell’attributo border, il colore nel CSS può essere espresso in tre modi fondamentali:

attraverso una parola inglese;
attraverso un numero esadecimale;
attraverso una combinazione delle dosi di rosso, verde e blu necessarie, per ottenere quel colore.

Il primo caso è il più semplice. Molti colori possono essere indicati tramite il rispettivo nome inglese: tutti i colori fondamentali, più diversi altri. Per quanto semplice (basta un comune dizionario italiano-inglese), però, non è un metodo dal funzionamento garantito, soprattutto quando si tratta di dispositivo di lettura per e-book: colori come green e blue sono compresi pressoché ovunque, ma colori come burlywood o chartreuse potrebbero risultare indigesti a diversi lettori. A ogni modo, potrete trovare una lista completa dei nomi disponibili a questa pagina, ma non è garantito che tutti i dispositivi di lettura li capiranno:
developer.mozilla.org/en-US/docs/CSS/color_value

Il numero esadecimale è la forma più antica, utilizzata fin dai primordi del Web per impostare un colore in un documento HTML; non è però la più semplice, per un comune essere umano. Il numero esadecimale, utilizzato per esprimere un colore, è composto da sei cifre (o lettere), precedute da un #. Le cifre/lettere vanno da 0 a F, come per ogni altro numero in base 16 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) e sono raggruppate idealmente a due a due: la prima coppia indica la quantità di rosso che compone il colore, la seconda coppia la quantità di verde, la terza la quantità di blu. Ad esempio,
#FF0000
indica il colore rosso, in quanto contiene la dose massima di rosso (FF) e zero dosi di verde e blu.

Un modo semplice per scoprire il codice esadecimale corrispondente a un determinato colore, senza bisogno di perdere ore a procedere per esperimenti, è affidarsi a un programma di grafica come Photoshop o GIMP, che potrà facilmente indicarvi il valore esadecimale (spesso abbreviato in HEX) del colore che avete scelto in una tavolozza.

Il terzo sistema per indicare i colori è, di fatto, quasi uguale al codice esadecimale, ma espresso in una forma solo blandamente più chiara. Utilizziamo come base la struttura rgb() e all’interno delle parentesi tonde, separate da una virgola, scriveremo tre cifre, comprese tra 0 e 255, dove 0 indica assenza di quella tinta e 255 indica il grado massimo di quella tinta: la prima cifra corrisponde alla quantità di rosso necessaria, per ottenere il colore che ci interessa, la seconda alla quantità di verde, la terza alla quantità di blu. Di conseguenza,
rgb(255, 0, 0)
corrisponde al colore rosso, proprio come il codice esadecimale che abbiamo visto in precedenza. In alternativa a un numero da 0 a 255, possiamo anche usare una percentuale: in questo caso, il colore rosso corrisponderà a
rgb(100%, 0, 0)
come era facile da indovinare.

Se poi siamo profondamente masochisti e amiamo complicarci la vita, possiamo espandere questa struttura e aggiungere una quarta cifra, che esprimerà il livello di opacità del colore. In questo caso, la struttura di base sarà rgba() e al suo interno inseriremo quattro cifre: le prime tre saranno comprese tra 0 e 255, come prima, mentre la quarta sarà compresa tra 0 e 1 (ricordate di usare il punto, al posto della virgola, per i decimali). Per la opacità, il numero 1 significa completa opacità, il numero 0 significa completa trasparenza (il colore sarà invisibile, insomma), mentre i livelli intermedi indicano una corrispondente gradazione. Di conseguenza,
rgba(255, 0, 0, 0.5)
produrrà un colore rosso, che è parzialmente trasparente (al 50%, per la precisione). Se indichiamo un decimale, possiamo anche rimuovere lo 0 iniziale e scrivere .5, al posto dello 0.5 che ho inserito nel mio esempio.

Oltre a questi, ci sarebbero anche altri sistemi, per selezionare un colore, ma per lavorare su uno e-book non c’è bisogno di procedere ulteriormente lungo la strada della follia e possiamo accontentarci di questi, che sono sufficienti per coprire la quasi totalità delle nostre esigenze in fatto di colori e sfumature.

Se vogliamo colorare di verde lo sfondo di un elemento, abbiamo dunque le seguenti possibilità:
background-color: green; background-color: #00FF00; background-color: rgb(0, 255, 0); background-color: rgb(0, 100%, 0); background-color: rgba(0, 255, 0, 1);

Il risultato sarà sempre lo stesso, ossia uno sfondo di colore verde. A voi scegliere la soluzione che più vi soddisfa. Ovviamente, ciò che ho detto qui per background-color vale anche per ogni altro caso in cui dobbiamo indicare un colore in CSS, per cui è bene leggerlo con cura e ricordarlo.

5-7 Background-image

Se non vogliamo utilizzare un colore, ma una immagine, come sfondo per la nostra pagina o un suo elemento, allora l’attributo da impostare sarà background-image. Il suo funzionamento di base è molto semplice: basta assegnare a background-image il valore url(), con la posizione della immagine inserita tra le parentesi. Se la nostra immagine si trova nella cartella Images, dunque, la proprietà sarà
background-image: url(../Images/Immagine.jpg);
, secondo le normali regole dello HTML. Se vogliamo, possiamo racchiudere l’indirizzo tra due virgolette, ma non è strettamente necessario.

Utilizzare una immagine come sfondo, però, può diventare piuttosto complesso, se vogliamo utilizzarla bene. Indicare la posizione della immagine da collocare nello sfondo è solo l’inizio del nostro lavoro. Dove vogliamo che sia l’immagine? Al centro dell’elemento? Spostata sulla destra? Vogliamo che sia ripetuta, fino a riempire tutto lo spazio? Dovrà apparire una volta sola? Di domande ce ne sono parecchie.

Il primo caso da controllare è la ripetizione della immagine. Se abbiamo creato una piccola immagine, che simula la superficie della carta, e vogliamo usarla come sfondo per le nostre pagine, allora è probabile che vorremo ripeterla di continuo. La proprietà che ci interessa è dunque background-repeat, a cui possiamo assegnare quattro valori: repeat, no-repeat, repeat-x, repeat-y.

repeat, ripeterà l’immagine fino a riempire tutto lo spazio;
no-repeat non ripeterà l’immagine, che sarà dunque usata solo una volta (in questo caso, è opportuno che la nostra immagine sia grande esattamente quanto l’elemento di cui dovrà essere lo sfondo);
repeat-x la ripeterà soltanto in orizzontale, ossia lungo l’asse delle x;
repeat-y la ripeterà soltanto in verticale, ossia lungo l’asse delle y.

Infine, dopo aver deciso quale immagine usare e se e come ripeterla, dovremo decidere la posizione in cui sistemarla: se l’immagine non sarà ripetuta, quella sarà la posizione in cui la vedremo; se sarà ripetuta, quello sarà il punto da cui le ripetizioni partiranno. L’attributo da impostare è background-position.

Per indicare la posizione, abbiamo due modi fondamentali: usare parole chiave, oppure usare una posizione precisa in pixel. Le parole chiave sono sei e sono da utilizzare in coppia: left, center e right per la disposizione in orizzontale, top, center e bottom per la disposizione in verticale. Se voglio dunque che la mia immagine sia posizionata in alto a destra, dovrò scrivere:
background-position: right top;

Utilizzare una posizione precisa in pixel funziona più o meno allo stesso modo: al posto delle parole chiave, dovremo utilizzare un numero, accompagnato dalla solita unità di misura px. Ad esempio,
background-position: 50px 15px;
sistemerà la nostra immagine a 50 pixel dal margine sinistro dell’elemento di cui è sfondo e a 15 pixel dal margine alto. Riassumendo, la regola per aggiungere una immagine come sfondo agli elementi che implementano una classe “pagina” potrebbe apparire così:
.pagina { background-image: url(../Images/carta.jpg); background-repeat: repeat; background-position: left top; }

In questo esempio, utilizziamo come sfondo una immagine di nome “carta.jpg”, collocata nella cartella Images; specifichiamo che dovrà essere ripetuta e che il punto di partenza della ripetizione deve essere il punto in alto a sinistra dell’elemento.

Utilizzare immagini come sfondo, in uno e-book, può risultare piuttosto problematico, dato che bisognerà prendere in considerazione le dimensioni degli schermi dei vari dispositivi di lettura su cui potrebbe essere riprodotto: se volete lanciarvi in questa impresa, procedete per tentativi e verificatene ogni volta il risultato su un dispositivo a vostra scelta (sarebbe meglio testarlo su più dispositivi, ma ci possiamo accontentare).

5-8 Gradienti di colore

Un altro modo in cui possiamo utilizzare un attributo background-image è con un gradiente di colore: molto più semplice che utilizzarlo con una immagine, ma il supporto dei vari dispositivi di lettura è tutto da verificare, dato che anche tra i browsers il supporto ha latitato a lungo ed è ancora oggi alquanto scadente, dato che necessita spesso di appoggiarsi a prefissi specifici per le famiglie di browsers. Usando un gradiente di colore, lo sfondo di un elemento non sarà composto da una immagine, né da un colore uniforme, ma da un colore che sfumerà gradualmente in un altro colore. Anche in questo caso, non so quanto possa essere utilizzabile in un libro, a meno che non sia rivolto a bambini, ma questo è un altro discorso.

Per utilizzare un gradiente di colore, dovremo assegnare a background-image un valore linear-gradient(), inserendo fra le parentesi alcuni valori supplementari: il minimo indispensabile è tre, ossia la direzione in cui il colore digraderà, il colore di partenza e il colore di arrivo. Ad esempio,
background-image: linear-gradient(right, blue, red);
imposterà per il nostro elemento uno sfondo che, a destra, sarà di colore blu e digraderà a poco a poco verso il colore rosso, che raggiungerà sul lato sinistro dell’elemento. Allo stesso modo,
background-image: linear-gradient(top, green, white);
partirà col colore verde nella parte alta dell’elemento e a poco a poco si cambierà in bianco, scendendo verso il basso. Possiamo anche muoverci in diagonale, con una proprietà del tipo
background-image: linear-gradient(top left, blue, red);
che partirà nell’angolo in alto a sinistra col colore blu e lo trasformerà gradualmente in rosso, scendendo verso l’angolo in basso a destra.

Se proprio vogliamo, non siamo limitati a due colori, ma possiamo utilizzarne anche tre o più: in questo caso, primo e ultimo colore della lista corrisponderanno alla estremità iniziale e finale del processo, mentre gli altri colori saranno i punti intermedi. Anche in questo caso, non so quanto sia utilizzabile in un libro una simile arlecchinata, ma è tecnicamente possibile realizzarla:
background-image: linear-gradient(left, red, blue, yellow);
partirà da un colore rosso a sinistra, raggiungerà il blu verso la metà della pagina e poi digraderà verso il giallo, che sarà raggiunto sul margine destro.

Per le direzioni, abbiamo a disposizione quattro parole chiave: top, bottom, right, left. Con una conoscenza minima della lingua inglese, non dovrebbe essere molto difficile capire cosa significhino e a quali posizioni corrispondano in italiano (alto, basso, destra, sinistra). Per i colori, invece, possiamo utilizzare i sistemi già visti, per esprimerli: nomi in inglese, codice esadecimale, quantità di rosso, verde e blu.

I gradienti di colore possono essere utilizzati in molti altri modi, combinandoli con altre proprietà quali background-position, ma andremmo fuori argomento: considerato anche il supporto scarso di questa proprietà, tra i dispositivi di lettura, è prematuro dedicarle troppo spazio, ma è comunque utile conoscerne l’esistenza e la struttura di base.

5-9 Box-shadow

Per chiudere con le scatole, prima di cominciare a romperle, vediamo un ultimo effetto che, per qualche motivo non necessariamente razionale, potreste voler utilizzare in una parte di un vostro e-book. Ogni elemento di una pagina, come si diceva all’inizio, è racchiuso in una scatola o, se ci risulta più semplice da visualizzare, è un rettangolo. Impostando l’attributo border, abbiamo visto come disegnare i contorno di questo rettangolo. Utilizzando un altro attributo, ossia box-shadow, possiamo anche simulare un’ombra, proiettata da questo rettangolo. A dire il vero, mi risulta piuttosto difficile immaginare un caso in cui potrei desiderare di vedere questo effetto in uno e-book, ma non si sa mai: alcuni potrebbero decidere che è un fantastico modo per evidenziare una sezione di capitolo. A ogni modo, guardiamone in breve il funzionamento.

Nella sua struttura di base, che è anche la sola che affronterò in questa guida, l’attributo box-shadow richiede 4 valori:

posizione orizzontale dell’ombra;
posizione verticale dell’ombra;
raggio dell’ombra;
colore dell’ombra.

Il primo valore, espresso da un numero (più l’unità di misura), ci indica quanto sporga di lato la nostra ombra: un numero negativo la farà sporgere a sinistra dell’elemento, un numero positivo la farà sporgere a destra.

Il secondo valore, sempre espresso da un numero più la sua unità di misura, ci indica quanto sporga in alto o in basso la nostra ombra: un numero negativo la farà sporgere sopra all’elemento, un numero positivo la farà sporgere sotto all’elemento.

Il terzo valore indica la dimensione della nostra ombra. Partendo dal bordo del nostro elemento, l’ombra sbiadirà sempre di più, fino a svanire: questo numero ci indica dopo quanto spazio l’ombra svanirà ed è espresso da un numero positivo.

Il quarto valore è un colore, espresso secondo le regole che abbiamo visto poco fa, parlando appunto dei colori, e indica la tinta che la nostra ombra possiederà.

Ad esempio,
box-shadow: -4px 5px 5px #000000;
produrrà un’ombra che si trova a sinistra di 4 pixel e in basso di 5 pixel, rispetto al nostro elemento, ha un colore nero e svanirà a una distanza massima di 5 pixel.

Questo paragrafo, a titolo di esempio, ha volontariamente accettato di sopportare il disonore di una proprietà box-shadow, offrendosi in olocausto a tutti i dispositivi di lettura: se lo vedete accompagnato dalla propria ombra, in basso e a sinistra, allora significa che questa proprietà funziona sul dispositivo che state utilizzando. Congratulazioni (o condoglianze, a seconda dei casi e dei punti di vista)!

Il supporto di questa proprietà non è molto ben diffuso, al momento, ed è dunque meglio non farvi troppo affidamento. In particolare, è garantito che non funzionerà sui modelli più vecchi di Android e iPhone, o almeno non così come è: dovrete aggiungere anche il prefisso -webkit- all’attributo. Di conseguenza, se vogliamo che il nostro e-book non perda le sue ombre su questi modelli di smartphone, dovremo scrivere due versioni di questa proprietà, ogni volta che la usiamo. Ad esempio, per applicare questa proprietà a una ipotetica classe “rilievo”, scriveremo:
.rilievo { -webkit-box-shadow: -4px 5px 5px #000000; box-shadow: -4px 5px 5px #000000; }
Lo smartphone più vecchio interpreterà e applicherà la prima forma, mentre tutti gli altri dispositivi applicheranno la seconda.

Progettando a un sito Web, potremmo trovare almeno una decina di altri modi, per complicarci la vita lavorando su bordi, margini e altro: siccome qui ci occupiamo soltanto di e-book, possiamo limitarci a quanto visto nel capitolo e procedere coi prossimo argomenti.