Gdesign.it

Sottolineature personalizzate con i CSS

di Stuart Robertson, traduzione di Egidio Murru, 16 Giugno 2005

L'articolo originale in lingua inglese è "CSS Design: Custom Underlines" ed è stato tradotto per gentile concessione di A List Apart Magazine e dell'autore.


Sebbene i web designer dispongono generalmente di una buona quantità di controlli su come un documento deve essere presentato, le regole CSS di base non forniscono molte opzioni per ciò che riguarda lo stile delle sottolineature dei link all'interno di una pagina. Ma, con qualche trucchetto e qualche rifinitura, si possono controllare in modo creativo i link all'interno delle pagine web.

Le sottolineature personalizzate danno spazio a nuove opportunità creative che potrebbero essere appropriate per alcuni siti web. Possono anche fornire delle indicazioni visuali supplementari per differenziare i vari tipi di link contenuti in un documento

Per iniziare

Si dovrebbe cominciare creando un'immagine per la sottolineatura del link. Quest'immagine si ripeterà orizzontalmente, e se si vuole mostrare lo sfondo attraverso l'immagine stessa bisogna creare un file .gif trasparente.

Se l'immagine che utilizzeremo come link è più alta di pochi pixel, allora dobbiamo aumentare l'interlinea del testo per aggiungere più spazio tra la parte inferiore di una riga e la parte superiore della riga successiva:

p { line-height: 1.5; }

Prima di creare la sottolineatura per i nostri link, dobbiamo togliere quella esistente:

a { text-decoration: none; }

Per creare la sottolineatura personalizzata, utilizzeremo un'immagine di sfondo da applicare al link:

 a { background-image: url(underline.gif); }

Vogliamo che questa immagine venga ripetuta orizzontalmente lungo la parte inferiore del nostro testo ma non verticalmente, perchè altrimenti apparirebbe dietro il testo del link stesso. Faremo quindi in modo che l'immagine di sfondo venga ripetuta lungo l'asse delle x:

a { background-repeat: repeat-x; }

Vogliamo essere sicuri che la nostra immagine, indipendentemente dalla misura dei font, appaia sotto il testo del link e quindi useremo la proprietà background-position per collocare l'immagine nella parte inferiore del link. Per alcune immagini di sfondo come, ad esempio delle frecce, potremmo avere delle preferenze per il lato dell'elemento a cui l'immagine deve essere allineata. Per il nostro esempio, posizioneremo il nostro sfondo in basso a destra:

a { background-position: 100% 100%; }

Per creare lo spazio sufficiente sotto il testo del link aggiungeremo del padding inferiore. L'esatta posizione della sottolineatura relativa alla linea di base del testo del link varierà a seconda della misura di font usato. È consigliabile iniziare impostando un padding inferiore uguale all'altezza della sottolineatura grafica e poi fare gli aggiustamenti secondo le proprie esigenze:

 a { padding-bottom: 4px; }

Dal momento che la sottolineatura personalizzata è posizionata nella parte inferiore del link, abbiamo bisogno di assicurarci che i nostri link non vadano su più righe. (Se il link si dispone su più righe, otterremmo la sottolineatura personalizzata soltanto sulla riga più in basso.) Utilizzeremo allora la proprietà CSS white-space per evitare che il testo linkato si disponga su più righe.

 a { white-space: nowrap; }

Tutte le proprietà CSS per i link possono essere combinate in questo modo:

 a { 
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}

Se vogliamo che la sottolineatura personalizzata appaia soltanto al passaggio del mouse sul link, basta semplicemente impostare la proprietà background sulla pseudo-classe :hover invece che sull'elemento link.

a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}

a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

Esempi

Ecco qualche esempio di sottolineatura personalizzata che può essere creata con questa tecnica:

Un link statico e un effetto rollover di tendenza.

Un link statico e un effetto rollover all'ultima moda.

Un link statico e un'animazione rollover utili per mostrare link esterni.

Gli effetti di animazione non sono visibili su tutti i browser; su alcuni, come Safari 1.0, viene mostrata soltanto la prima immagine.

Questo articolo pubblicato anche su Sickbrain.org.

:: Pagina stampata da http://www.gdesign.it ::


© Giuseppe Di Carlo :: Riproduzione vietata ::

|STAMPA|CHIUDI|