:: Grafikando Design ::

Titoli con CSS

In questo tutorial vi insegnerò a creare dei titoli simili a quelli che utilizzo solitamente nei miei Layout:

Analiziamo il codice passo passo:

h1 {display:block; height:18px; ... }

Per prima cosa notiamo che andremo a lavorare e modificare l'aspetto del tag HTML <h1></h1>
In questo tutorial non vi spiegherò l'utilizzo dell'attributo display:block; in quanto ho intenzione di scrivere a breve un tutorial a parte, per il momento prendete per buono che va inserito anche questo attributo.
Ora dobbiamo specificare l'altezza del nostro rettangolo con il tag: height: valore_altezza px;

h1 {display:block; height:18px; background-image:url(indirizzo_immagine); background-repeat:no-repeat;}

Richiamiamo attraverso l'attributo background-image: l'immagine che vogliamo utilizzare come sfondo del nostro rettangolo.
Con l'attributo background-repeat: possiamo stabilire se ed in hce modo verrà ripetuta l'immagine, io in questo caso ho scelto di non ripeterla, ma voi potete modificare questo valore a seconda dell'immagine che sceglierete di usare come sfondo.

no-repeat: l'immagine non verrà ripetuta
repeat: l'immagine verrà ripetuta sia orrizzontalmente che verticalmente
repeat-x: l'immagine verrà ripetuta solo orizzontalmente
repeat-y: l'immagine verrà ripetuta solo verticalmente

h1 {display:block; height:18px; background-image:url(indirizzo_immagine); background-repeat:no-repeat; color:#FFFFFF; text-align:center; font-size:12px; }

Ora concentriamoci sul testo. Possiamo impostare il colore attraverso l'attributo color:.
L'attributo text-align: ci permette di decirede dove posizionare il nostro testo: a destra (right), a sinistra (left) oppure al centro (center)
Per modificarene l'altezza usiamo l'attributo font-size: possiamo inserire un valore da 1 a 7, oppure la reale altezza in pixel.
Nel caso in cui si voglia modificare anche il tipo di carattere basterà utilizzare: font-family: e inserire di seguito il nome del carattere.

h1 {display:block; height:18px; background-image:url(indirizzo_immagine); background-repeat:no-repeat; color:#FFFFFF; text-align:center; font-size:12px; border: 1px solid #ffffff}

Per ultimo potrebbe esservi utile il tag border: nel quale specificheremo: la larghezza del bordo, nel mio caso 1px, il tipo di bordo che può essere solido (solid) oppure a puntini (dotted) ed in fine il colore che dovrà avere il bordo.

Tutorial © Laila, è vietata la riproduzione senza il mio permesso scritto.

Titoli con CSS

Search:

Offerte Speciali!

Top resurce site:

Affiliates:

Stat & Vote Me: