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!
denisdesignblog
giugno 17th, 2010Tutorial interessante! Twitto subito
STAFF
giugno 24th, 2010Grazie mille!
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, 2010molto bello complimenti!
STAFF
luglio 3rd, 2010Grazie!
NaRu95
agosto 23rd, 2010Veramente bel tutorial. Ma hai comperato Photoshop per caso?