Come creare un attraente sfondo per un sito web con CSS3
Articolo pubblicato il 16-06-2010. 
Categorie: CSS, jQuery, PHP e.., Photoshop, Tutorial testuali. 
Commenti: 8.
Lo sfondo è, senza dubbi, un elemento importantissimo per qualsiasi sito web. Che sia esso un pattern o una tinta unita, il suo principale obbiettivo è quello di far risaltare i contenuti che il sito vuole proporre. Quindi, quello dello sfondo è un compito cruciale: cogliere l’attenzione del lettore e invogliarlo a continuare a visitare il nostro sito.
Per questo motivo, oggi, voglio mostrarvi come creare un attraente sfondo web 2.0, utilizzando un pattern (che verrà creato con Photoshop) e CSS3.
Per vedere una demo del tutorial potete cliccare qui, mentre da qui potete scaricare i files utilizzati!
Apriamo Photoshop, creiamo un nuovo documento (30x30px) e riempiamo lo sfondo di un blu scuro (#202847).
A questo punto attiviamo la griglia (Cmd o Ctrl + ‘), ci rechiamo nelle preferenze di Photoshop (Cmd o Ctrl + K) e impostiamo i valori della griglia come segue.
Il nostro documento si presenterà così, ora:
In prossimità del quadratino centrale, creiamo un ellissi di un blu leggermente più scuro (#03081b). E ne applichiamo questo stile livello:
Duplichiamo 4 volte la nostra forma, e posizioniamo le 4 copie come in figura:
Infine uniamo tutti i livelli (Cmd/Ctrl + Shift + E), e con lo strumento ritaglia riduciamo la zona del nostro documento. Infine salviamo in formato JPG.
Il nostro pattern è pronto! Ora, iniziamo a scrivere le prime righe di codice CSS. Naturalmente, applicheremo lo sfondo ripetendolo orizzontalmente e verticalmente.
body{ background:transparent url(pattern.jpg) repeat; margin:0; padding:0; }
Inoltre, creiamo un div con nome “light”. E’ qui, che grazie al CSS3, applicheremo un gradiente radiale che scurirà leggermente i margini della nostra pagina e renderà tutto più accattivante!
#light{ background-image:-webkit-gradient(radial, 50% 40%, 700, 50% 40%, 0, from(rgba(0, 0, 0, 0.898438)), to(transparent)); background-image:-moz-radial-gradient(transparent, #000); height:100%; position:absolute; width:100%; }
E infine, ecco le poche righe di HTML che ci servono:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Artedelweb.it- Come creare un attraente sfondo con CSS3</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="light"> </div> </body> </html>
Vi ricordo che, per vedere una demo del tutorial potete cliccare qui, mentre da qui potete scaricare i files utilizzati!
8 commenti
denisdesignblog
giugno 17th, 2010
Tutorial interessante! Twitto subito
Rispondi
STAFF
giugno 24th, 2010
Grazie mille!
Rispondi
Come creare un sfondo per un sito web con CSS3 | BertoWeb.it
giugno 28th, 2010
[...] Per vedere il tutorial cliccare qui [...]
Lika Web Blog Feed RSS » Blog Archive » Come creare un attraente sfondo per un sito web con CSS3
luglio 2nd, 2010
[...] Lo sfondo è, senza dubbi, un elemento importantissimo per qualsiasi sito web. More: Come creare un attraente sfondo per un sito web con CSS3 [...]
andre_kaste
luglio 2nd, 2010
molto bello complimenti!
Rispondi
STAFF
luglio 3rd, 2010
Grazie!
Rispondi
NaRu95
agosto 23rd, 2010
Veramente bel tutorial. Ma hai comperato Photoshop per caso?
Rispondi
Matte
giugno 5th, 2011
Ciao, non sono molto esperto in fatto di siti web…
Vorrei applicare questo sfondo a un FBML di una pagina come faccio??
Rispondi