Realizzare un background e applicarlo con i css

Con questo nuovo tutorial, impareremo a realizzare un particolare background e ad applicarlo sulle nostre pagine web, attraverso l’utilizzo di un semplice codice css.

1. Per prima cosa, apriamo Photoshop e andiamo su File>Nuovo (ctrl+n;mela+n)

2. Successivamente imposta il colore di primo piano e di sfondo, (nell’esempio abbiamo utilizzato un #89FF80 e #068000) e attraverso lo strumento sfumatura applica una sfumatura verticale.

3. Adesso andiamo nella sezione filtri

4. Ora selezioniamo il filtro visualizzabile nell’immagine trascrivendo i relativi settaggi e cliccate su OK

5. Andate su File>Salva per Web e dispositivi… e cliccate sul bottone in alto a destra Salva. Ora attraverso la nuova finestra che vi appare, andate su scrivania e create una nuova cartella (es. PROVA), nella quale salverete il vostro sfondo; vi consiglio di rinominarlo “bg.jpg”

6. Ora uscite da Photoshop e aprite un nuovo file .html, salvatelo nella nuova cartella e trascriverete la seguente porzione di codice:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>http://www.tutorialdesign.altervista.org</title>
<style type=”text/css”>
<!–
body {
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-color: qui inserite il colore di primo piano nel nostro caso #89FF80;
}
–>
</style></head>

<body>
</body>
</html>

7. Salvate nuovamente il file .html. Ora apritelo con un normale browser ed ecco l’effetto finale:

Alla prossima :-)

Tag: , ,

Lascia un Commento