CSS  »  Articoli  »  CSS Template e layout 

La cura dei dettagli è senza dubbio una delle cose che rende un sito importante e piacevole per i visitatori. I blog sono ormai una tipologia diffusissima di sito, e in questo aticolo vedremo alcune tecniche con cui aggiungere dettagli briosi grazie ai CSS e alla grafica. Iniziamo parlando di una cosa cruciale: i link.

Un elenco di link con rollover

Cominciamo con il primo esempio: si tratta di un elenco di link esterni al sito (blogroll), che generalmente si trova in una delle colonne laterali. Come si può notare, ogni link è indicato da un marcatore: è imporante, a parer mio, che questo sia parte dei link e che contribuisca visivamente alla fase di passaggio sul link stesso attraverso il rollover. L'HTML è molto semplice, si tratta infatti di una lista non ordinata inserita in un div:

<div id="links">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">ecc...</a></li>
</ul>
</div>

Per la parte grafica c'è da notare che il bullet (marcatore) combina i due stati normale e hover dei link, vediamolo:

Figura 1. marcatore con rollover

Useremo infatti il fast CSS rollover, di cui abbiamo parlato in molte occasioni e in particolare nella serie sui menu grafici. Si tratta di un'immagine alta 40px e larga 12, in cui la metà superiore indica lo stato normale e quella inferiore lo stato :hover. Ai fini della riuscita della tecnica è essenziale che ciascuna metà sia alta quanto l'altezza di linea dei link.

Ora procediamo con il CSS: per prima cosa, come nella maggioranza dei casi quando si lavora con le liste, si procede a rimuovere margini, padding e marcatore di default da lista e list-item:

div#links ul, div#links li{list-style: none;margin: 0;padding: 0}

A questo punto andiamo a ridefinire i margini dei list-item e impostiamo l'immagine di sfondo in stato hover: IE6 soffre infatti di un noto problema chiamato flickering: una delle possibili soluzioni è bufferizzare lo stato hover sul list-item. Da notare che l'immagine è traslata di 20 pixel verso l'alto nello shorthand background attraverso un valore negativo, così da mostrare la seconda metà:

div#links li{margin:0 3px 0 3px;background: url(rollover.png) no-repeat 0 -20px}

Arriviamo alla parte più importante, ovvero i link. Definiremo le regole comuni a tutti gli stati, per poi precisare la fase hover. Questi vengono resi block-level, viene aggiunto un padding sinistro per lasciare il posto al bullet, viene impostata l'altezza di linea così da centrare il testo rispetto al bullet; viene definita l'immagine di sfondo, tolta la sottolineatura e infine definito il colore. Per la fase hover l'immagine di sfondo viene rimossa, così da mostrare la porzione di immagine sottostante attribuita ai list-item e assegnato un colore un po' più acceso per il testo. Ecco le due regole:

div#links a{display: block;height: 20px;line-height: 20px;
    padding-left: 14px;background: url(rollover.png) no-repeat;
    text-decoration: none;color: #C53001}
div#links a:hover{background: none;color: #FF7800}

Il nostro esempio è così ultimato: rivediamolo.

Altri articoli

Altre guide

Altre newsletter