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:
<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:
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:
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 bufferizzare 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
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
La navigazione sotto i post
Generalmente in un blog sotto ciascun post si presentano i link che portano ai commenti, al permalink ed eventualmente al trackback. Presentarli sotto forma di bottoni potrebbe essere un'idea grafica accattivante: ecco così il secondo esempio in cui i bottoni hanno un rollover grafico. Anche in questo caso ho usato un'immagine unica per i link, eccola:
Si tratta di un'immagine larga 100 pixel e alta 70, in cui vengono combinate in due metà alte 35px la fase normale e la fase hover. Si userà infatti il fast CSS rollover. Vediamo il markup, una semplice lista non ordinata:
<li><a href="#">commenti</a></li>
<li><a href="#">permalink</a></li>
<li><a href="#">trackback</a></li>
</ul>
Ora il CSS: per prima cosa eliminiamo bullet, margini e padding da lista e list-item:
ul.entrynav,ul.entrynav li{list-style:none;margin:0;padding:0}
Useremo la proprietà float per affiancare i list-item, che dovremo in qualche modo contenere FnE Float: teoria e pratica
ul.entrynav{float:left;width:100%;text-align:center}
I list-item vengono resi float e separati da un margine destro di 5 pixel:
ul.entrynav li{float:left;margin-right: 5px}
Ora i link: li rendiamo block-level, attribuiamo dimensioni, altezza di linea, sfondo e colore ed eliminiamo la sottolineatura:
ul.entrynav a{display: block;width: 100px;height: 35px;
line-height: 35px;background: url(button.png);
text-decoration: none;color: #558}
Infine la parte dedicata al rollover: anche se per la fase hover basterebbe riposizionare l'immagine attraverso la proprietà background-position è importante per evitare il flickering
ul.entrynav a:hover,ul.entrynav li{color: #000;
background: url(button.png) bottom left}
L'esempio è così ultimato: rivediamolo
Marcare i link visitati
Arriviamo così all'ultimo esempio di questa prima parte. Differenziare i link visitati è una buona pratica e si sta diffondendo sempre più la tendenza di evidenziarli grazie alle immagini di sfondo. Questa semplice immagine: 
è in grado di evidenziare in maniera efficace i link visitati.
Per far sì che le regole che utilizzeremo non abbiano interferenza con i restanti link delle vostre pagine, andremo ad aggiungere un segno di spunta (in inglese tick) solo ai link visitati all'interno dei post. Ora possiamo senz'altro procedere con il CSS dell'esempio. Per prima cosa definiamo lo stile generico sui link, ovvero il testo in grassetto e il colore che risulterà per i link non visitati:
Ora procederemo col definire i link visitati. Si attribuisce il colore per il testo, il padding destro e l'immagine di sfondo:
div.entry a:visited{color: #999;padding-right: 12px;
background: url(visited.png) no-repeat center right}
Infine lo stato hover, in cui cambieremo semplicemente il colore del testo:
div.entry a:hover{color: #5B93F2}
È importante precisare che la successione delle pseudo-classi sui link affinchè sia efficace deve seguire un determinato ordine, ovvero :link, :visited, :hover, :active (le parole LoVe HAte potranno esservi d'aiuto nel ricordarlo). Ecco perchè si è definita prima la regola per i link visitati e poi quelli in fase hover.
Il nostro esempio
Abbiamo visto alcune idee su come presentare i link. Vedremo diversi modi di personalizzazione di elementi di pagina tipici dei blog con grafica e CSS.
Header con marcatore esterno
Aggiungere un elemento grafico ai titoli può senza dubbio contribuire all'appeal del nostro sito. Aggiungere un'icona ai titoli h2 è piuttosto semplice, bastano infatti due dichiarazioni essenziali:
In sostanza, si lasciano 18 pixels di padding alla sinistra dei titoli di modo da far spazio all'icona. Ho preparato così una pagina di esempio
Questa l'idea di base: come potete notare, l'icona aggiunge un dettaglio brioso alla pagina. Vorrei proporre però un'alternativa poco comune: l'icona è senza dubbio un elemento di rinforzo, ma ne soffre un po' l'allineamento verticale del testo tra i titoli e i paragrafi successivi.
Si potrebbe quindi traslare l'icona verso sinistra così da ripristinare l'allineamento verticale secondo esempio elemento attivo
Prima di procedere con il CSS dell'esempio, una piccola parentesi su come sia possibile traslare in orizzontale un elemento all'esterno posizionamento relativo margini negativi
Uno degli scopi del posizionamento relativo è quello di spostare un elemento rispetto alla sua posizione naturale. Una traslazione verso sinistra si ottiene quindi intervenendo sulla coordinata left con un valore negativo. La dichiarazione vista sopra diventa:
h2{position: relative;left: -18px;
background: url(post.png) no-repeat left center}
L'alternativa ancora più semplice è l'uso di un margine negativo, che avrà l'effetto di traslare il lato sinistro dei titoli:
h2{margin-left: -18px;
background: url(post.png) no-repeat left center}
Il risultato ai fini del posizionamento del bullet è identico, ma c'è una differenza sostanziale tra l'effetto causato dalle due soluzioni sulla larghezza totale dei titoli
Il posizionamento relativo rende prima di tutto un elemento nella sua posizione e dimensione naturale per poi traslarlo conseguente aumento delle dimensioni
La differenza tra le due soluzioni è immediatamente visibile se all'esempio di base versione con posizionamento relativo con margine negativo
La soluzione con i margini negativi è quindi da preferire se vogliamo usare un colore di sfondo, un bordo o in caso di testo su più linee dato che conserveremo anche l'allineamento sul lato destro dei titoli.
Ora possiamo tornare all'esempio
h2{margin:0.6em 0 0 -18px 18px;
Da notare che il margine sinistro negativo è stato combinato nello shorthand margin e il valore usato si accorda con il padding sinistro.
Date con i CSS
L'ispirazione per il prossimo esempio è l'articolo Dating Requests di Dave Shea. L'autore ha trovato una modo molto accattivante di presentare le date dei post, e ho pensato di presentare una variante con un po' di dettagli implemementativi per aiutare la comprensione della tecnica.
Vediamo così il nostro esempio in cui le date di ogni post vengono rese alla destra del testo. Cominciamo dal markup: non si dispone infatti di un costrutto semantico per rappresentare le date. Una possibile soluzione è usare le classi: la nostre date saranno quindi racchiuse da un div class="data" e giorno, mese e anno da degli span con classe rispettivamente d, m e y ovvero le iniziali dei corrispettivi in inglese. Ecco quindi un esempio:
<span class="d">21</span> <span class="m">ott</span> <span class="y">2005</span>
</div>
Dato che gli span sono elementi inline e totalmente neutri, il loro uso non influisce sulla presentazione senza CSS e ci consente una buona libertà di personalizzazione.
La base grafica di partenza per l'esempio
Non useremo comunque l'immagine per intero, ma solo la parte superiore e quella inferiore necessaria per contenere la data: l'immagine è infatti più alta del dovuto in modo da consentire il testo scalabile anche per le date. Un'immagine unica consente una maggiore semplicità di preparazione e risulta meno pesante di due o tre immagini singole, riducendo quindi il traffico sul server.
Passiamo al CSS dell'esempio. Per prima cosa le regole del div principale per le date. Questo verrà reso float a destra con una larghezza specifica di 50 pixel e si aggiungeranno un margine sinistro e inferiore in modo da distanziare il testo che vi si dispone attorno. Il testo al suo interno verrà centrato e reso in un grigio intermedio. Per la parte più importante, ovvero lo sfondo: si userà la parte inferiore dell'immagine combinata con un padding inferiore. Ecco la regola:
text-align: center;color: #777;padding-bottom: 5px;
background: #E9F3FF url(date.png) no-repeat bottom left}
Ora procederemo con gli span, e in particolare quello che indica il giorno. Verrà reso display:block
Infine come ultima regola renderemo in maiuscolo il testo del mese:
L'esempio è così ultimato e anche se ha richiesto un po' di lavoro dato che il CSS risulta piuttosto corposo.
Abbiamo già visto come presentare i link e come aggiungere un po' di brio a titoli e date. Esaminiamo ora un paio di idee per pullquotes, calendari e date.
Pullquotes con i CSS
Le pullquotes sono sezioni in evidenza che vengono disposte al lato del testo e servono a focalizzare l'attenzione del lettore su frasi chiave. Eccone un esempio.
Nel markup basterà assegnare la classe "pullquote" agli elementi che vorremo porre in evidenza: questi potranno essere elementi block-level (come paragrafi, blockquotes e div) oppure inline (come span, em e strong). Per la grafica ho usato un'immagine con un gradiente, mentre il CSS è composto da una sola regola piuttosto corposa anche se molto semplice:
padding: 0.3em; border:1px solid #E1CACB;
background: #FFF url(pullbk.png) repeat-x top;color: #666;
font:normal normal 95% Georgia,sans-serif;
text-align: center;line-height: 1.2}
Dopo aver dichiarato float gli elementi con classe "pullquote", vengono definiti larghezza, margini, padding, bordi, sfondo e colore del testo.
Per la tipografia c'è da notare l'uso delle parole chiave normal normal
Commenti a forma di baloon
Nel prossimo esempio vedremo come sia possibile, grazie a un markup ben strutturato, tre immagini e poche regole CSS, ottenere dei commenti decisamente accattivanti. Per la parte grafica sono necessarie tre immagini, ovvero la parte superiore, la parte centrale e la parte inferiore del baloon:
Ora il markup. Ogni commento sarà della forma:
<div class="cbody"> <p>Testo del commento, anche su più paragrafi</p> </div>
<div class="author"><strong>Autore</strong> e data</div>
</div>
Procediamo con il CSS, che non si presenta particolarmente difficile: tutto sta nel capire l'uso degli sfondi e del padding. Per prima cosa il div principale per i commenti. Stabiliamo la larghezza, un margine superiore per separarlo da elementi precedenti e l'immagine di sfondo che è quella centrale del baloon:
div.comment{width: 400px;margin-top: 20px;
background:url(cBody.png) repeat-y top}
La parte che racchiuderà il commento vero e proprio avrà come sfondo la parte superiore del baloon. Del padding superiore servirà per lasciare spazio, mentre quello orizzontale per allontanare il contenuto dai bordi. Definiamo inoltre i margini per i paragrafi all'interno, lasciando solo quello inferiore:
div.cbody{background: url(cTop.png) no-repeat top;
padding: 10px 10px 0}
div.cbody p{margin:0 0 0.8em}
Infine la parte relativa all'autore del commento stesso. Per prima cosa recuperiamo il margine inferiore lasciato dai paragrafi, impostando un margine superiore negativo di pari valore. Attribiumo l'immagine di chiusura e lasciamo un padding superiore e sinistro così da posizionare immagine e testo. Il nome dell'autore verrà reso in verde:
div.author{margin-top:-0.8em;padding:35px 0 0 25px;
background: #FFF url(cBottom.png) no-repeat top}
div.cauthor strong{color: #7CA500}
Il nostro esempio è così ultimato: rivediamolo
Un calendario con i CSS
Arriviamo così all'ultimo esempio di questa serie: un calendario. Cominciamo dal markup. Ho usato elementi che ad alcuni potranno risultare poco conosciuti, ma che senza dubbio offrono una base di partenza migliore rispetto all'uso di solo tr e td.
In particolare l'elemento caption definisce una breve descrizione o il titolo della tabella, la sezione thead definisce l'intestazione in cui vengono usate delle celle th e la sezione tbody delimita il corpo della tabella. Quest'ultimo elemento è tra l'altro obbligatorio ai fini della validazione del codice HTML. Ecco quindi un estratto di codice:
<caption>Novembre 2005</caption>
<thead>
<tr>
<th>L</th><th>M</th><th>...</th>
</tr>
</thead>
<tbody>
<td>1</td><td>2</td><td>...</td>
</tr>
</tbody>
Ora procediamo con il CSS. Per prima cosa definiamo larghezza, font, allineamento e colore del testo per la tabella:
table#calendar{width:160px;font: 12px "Trebuchet MS",sans-serif;
text-align:center;color:#444}
I bordi andranno specificati per la tabella, i td e i th. Per unificarli è inoltre indispensabile l'uso della proprietà border-collapse. Ecco la regola:
table#calendar,table#calendar th,table#calendar td{
border: 1px solid #99A4C4;border-collapse: collapse}
Attribuiamo gli sfondi per le celle di testata e corpo della tabella:
table#calendar th{background: #FEFEFE url(thbk.png) repeat-x bottom}
table#calendar td{background: #DBDFEB url(tdbk.png) no-repeat}
E infine lo stile sui link, che presumibilmente punteranno all'archivio:
table#calendar a{text-decoration: none;color: #4A5576;
font-weight: bold}
table#calendar a:hover{color: #FFF}
Abbiamo così completato il CSS per il calendario: rivediamolo
Conclusioni
Abbiamo visto diversi esempi di come sia possibile aggiungere un tocco di personalità a elementi piuttosto ricorrenti in questa tipologia di sito. Codice e immagini degli esempi visti nei tre appuntamenti sono disponibili per il download. Alla prossima.
