Personalizzare elementi di testo applicando immagini di sfondo

La pagina di esempio mostra il risultato finale che otterremo.

La prima impressione potrebbe farci pensare che si tratta di un elenco puntato, invece nella dichiarazione del Foglio di Stile è stata applicata l' immagine sia al tag <H1> e sia al tag <p>.
Premesso che si devono creare a parte le due piccole ".gif", vediamo il codice riguardante rispettivamente i due tag in oggetto:

h1 { font-size:20px;
padding-left:15px;
background:url(big_arrow.gif) 0 50% no-repeat;
text-align:left }

p { background:url(mini_arrow.gif) 0 4px no-repeat;
text-indent: 10px; }

Al tag H1 è stato applicato un font di una grandezza pari a 20px;
un padding sinistro di 15px. Coem sfondo è stata applicata una immagine (big_arrow.gif), nella posizione 0 50%; cioè l' immagine viene posizionata in alto (a zero) e al centro (50%) della grandezza del suo elemento, in questo caso <H1>. Inoltre l' immagine deve rimanere "fissa" al suo posto (no-repeat).

Allo stesso modo si è proceduto per il tag <p>. Per una migliore comprensione del codice, si può vedere il codice della pagina di esempio mostrata precedentemente.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati