CSS  »  Articoli  »  Effetti con CSS 

In questo articolo vedremo alcuni possibili usi della proprietà background dei fogli di stile per arricchire elementi e pagine HTML. Prima di cominciare, alcune semplici considerazioni, visto che l'abuso e un modo inappropriato di usare certi sfondi è stato e continua ad essere piuttosto diffuso:

• La presentazione di una pagina non dovrebbe mai interferire negativamente con i suoi contenuti, ma onorarli: non dovrebbe mai sacrificare principi quali leggibilità, usabilità, accessibilità e navigabilità.
• Salvo necessità particolari, elementi contenitori supplementari per puro scopo presentazionale andrebbero evitati. Il markup di una pagina dovrebbe mantenersi il più leggero e semantico possibile.
• Il peso della pagina, immagini incluse, andrà mantenuto il più basso possibile per favorire la velocità di caricamento. Ne abbiamo già parlato sull' introduzione ai Menu grafici con rollover e preload via CSS.

Dopo questa breve premessa, possiamo iniziare: per seguire questo articolo vi sarà necessaria una conoscenza dei fogli di stile minima, meglio se accompagnata da un programma di grafica a portata di mouse.

Background sul body

Direi che texture con nuvole, stelle, muri, marmo o quant'altro sono senz'altro da evitare se volete dare un aspetto decoroso al vostro sito. In fatto di sfondi, la tendenza attauale sembra essere quella di usare gradienti (ossia sfumature) o al massimo dei semplici pattern (immagini ripetitive) abbastanza leggeri. Vediamo alcuni esempi.

Gradiente orizzontale

Credo che molti di voi conoscano Alistapart. Lo sfondo del body è una semplice immagine costituta da pochi pixels di larghezza, e alta duecento. L'immagine è riempita con un gradiente, un tipo di riempimento disponibile su tutti i programmi di grafica che consente una sfumatura tra due o più colori. Ecco allora il nostro primo esempio con un gradiente che va dal bordeaux al nero. L'immagine di sfondo è questa:

L' immagine viene ripetuta orizzontalmente sul body, a cui si assegna il colore di sfondo dell'ultima tonalità della sfumatura. Vediamo la regola:

body{background: #7A515A url(gradient.jpg) fixed repeat-x bottom}

Da notare che con una semplice immagine.jpg di soli 887 byte (quindi neanche 1k) e un'unica regola CSS, applicata ad una pagina con un container a larghezza fissa e centrato, possa dare questo risultato.

Per un gradiente che si ripeta in cima alla pagina anzichè sul fondo, basta cambiare il valore top con bottom, in questo modo:

body{background: #4F82FF url(gradient2.jpg) fixed repeat-x top}

Se si volesse un gradiente che resta fisso in cima alla pagina, ma non fisso rispetto alla finestra del browser, come per esempio su Lycos, basterebbe togliere la parola chiave fixed dalla regola vista qui sopra.

Altri articoli

Altre guide

Altre newsletter