Posts written by WolfGt

In questa lezione esaminiamo le proprietà relative alla gestione dello sfondo. Sin dalle origini, possiamo inserire un’immagine o un colore di sfondo direttamente nel markup HTML. La scelta si restringe comunque a due elementi: il corpo principale della pagina (<body>) o le tabelle.

Un’altra limitazione riguarda il comportamento delle immagini di sfondo in HTML: esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire l’intera area della finestra, del frame o della tabella. Proprio questo comportamento ha sempre favorito la scelta di piccole texture in grado di dare la sensazione visiva dell’uniformità.

Grazie ai CSS questi limiti vengono spazzati via e le possibilità creative, compatibilità permettendo, sono davvero infinite.

Ecco la lista delle proprietà per lo sfondo, applicabili, ed è questa la prima grande innovazione dei CSS, a tutti gli elementi:

background-color
background-image
background-repeat
background-attachment
background-position

Ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di un elemento. La proprietà background, invece, è una proprietà a sintassi abbreviata con cui possiamo definire sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo. La analizeremo alla fine. Prima è necessario chiarire significato e sintassi delle proprietà singole.
background-color

Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata.

Sintassi

selettore {background-color: valore;}

Valori

un qualunque colore
la parola chiave transparent

Usando transparent come valore un elemento avrà come colore quello dell’elemento parente. Nell’esempio: il colore di #div2 è impostato su transparent, per cui esso sarà, per l’appunto, trasparente, lasciando emergere il colore dell’elemento parente (#div1).

Esempi

body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)

background-image

Definisce l’URL di un’immagine da usare come sfondo di un elemento. Questa proprietà non è ereditata.

Sintassi

selettore { background-image: url(valore); }

Valori

un URL assoluto o relativo che punti ad un’immagine
la parola chiave none. Valore di default.

Usare none equivale a non impostare la proprietà: nessuna immagine verrà applicata come sfondo.

Esempi

body {background-image: url(sfondo.gif); }
div body {background-image: url(www.server.it/images/sfondo.gif); }

Usando questa proprietà da sola si ottiene lo stesso risultato che in HTML si aveva con l’attributo background (vedi esempio).

Un consiglio. Una buona norma e il buon senso vogliono che quando si definisce un’immagine come sfondo si usi sempre anche un colore di sfondo e che questo colore consenta una lettura agevole del testo. Se le immagini sono disabilitate, ad esempio, il browser mostrerebbe il suo colore di sfondo predefinito: se questo è bianco e il nostro testo pure sarebbe evidentemente un disastro. Attenzione, dunque!
background-repeat

Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l’immagine di sfondo viene ripetuta. Proprietà non ereditata.

Sintassi

selettore {background-repeat: valore;}

Valori

repeat. L’immagine viene ripetuta in orizzontale e verticale. È il comportamento standard.
repeat-x. L’immagine viene ripetuta solo in orizzontale.
repeat-y. L’immagine viene ripetuta solo in verticale.
no-repeat. L’immagine non viene ripetuta.

L’esempio riporta i quattro diversi comportamenti con un’immagine di sfondo applicata ad una tabella.

Esempi

body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }

background-attachment

Con questa proprietà si imposta il comportamento dell’immagine di sfondo rispetto all’elemento cui è applicata e all’intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa. Proprietà non ereditata.

Sintassi

selettore {background-attachment: valore;}

Valori

scroll. L’immagine scorre con il resto del documento quando si fa lo scrolling della pagina (esempio)
fixed. L’immagine rimane fissa mentre il documento scorre (esempio)

Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi.

Esempi

body { background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed; }

background-position

Proprietà un po’ complessa. Definisce il punto in cui verrà piazzata un’immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser. Proprietà non ereditata.

Sintassi

selettore {background-position: valoreOriz | valoreVert;}

Valori

I valori specificano le coordinate di un punto sull’asse verticale e su quello orizzontale e possono essere espressi con diverse unità di misura e modalità:

con valori in percentuale
con valori espressi con unità di misura
con le parole chiave top, left, bottom,right

L’esempio renderà tutto più chiaro. Per questo documento di esempio abbiamo usato queste impostazioni:

body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
}

Significa che l’immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra.

Invece dei pixel potevamo utilizzare altre unità di misura o le percentuali. La scelta delle percentuali ci assicura una maggiore affidabilità a risoluzioni diverse.

In alternativa avremmo potuto utilizzare le parole chiave, come in questo esempio:

body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: center center;
}

L’immagine di sfondo apparirà centrata in entrambe le direzioni (esempio).

Logica vuole, trattandosi di definire le coordinate, che si impostino due valori. Definendone uno solo esso sarà usato sia per l’asse orizzontale che per quello verticale.
background

Esaminiamo finalmente la proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo.

Sintassi

selettore { background: background-color
background-image
background-repeat
background-attachment
background-position;
}

I valori non vanno separati da virgole. L’ordine non è importante, ma quello dato è il più logico e andrebbe rispetatto: si va in ordine di importanza.

Esempi

In questa pagina di esempio lo sfondo della pagina è stato così settato con l’uso della proprietà background:

body { background: white url(sfondo.gif) repeat-x fixed; }

Posted: 26/3/2014, 17:00

Ricontiamo - Off Topic

.

78

Posted: 26/3/2014, 12:51

Rivista Game - Rivista Game Mensile

.

Rivista Game