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:
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.
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:
<ul class="entrynav">
<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. La soluzione senza markup aggiuntivo che useremo è la FnE di cui abbiamo parlato in Float: teoria e pratica: renderemo quindi float la lista, e inoltre centreremo il testo al suo interno, così da averlo centrato anche sui link:
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 di IE6 attribuire l'immagine in fase hover anche al list-item. Creiamo quindi una regola unica che include anche il colore del testo:
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:
div.entry a{font-weight:bold;color: #80AAF2}
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 è così ultimato: con tre semplici regole abbiamo marcato in maniera efficace i link visitati. Questa tecnica ha purtroppo due piccoli difetti che rimangono per ora insoluti. Il primo è dovuto al fatto che IE5.0 non rende correttamente il padding su elementi inline, e fa si che in questo browser il tick si disponga sotto il link anzichè al suo fianco. Il secondo difetto è che il simbolo di spunta si perde in tutti i browser se il testo dei link si dispone su due righe: è per questo che oltre ad aggiungere il segno di spunta è essenziale agire sul colore dei link visitati.
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:
h2{padding-left: 18px;background: url(post.png) no-repeat left center}
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 che utilizza questa tecnica.
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 e rendere l'icona un vero e proprio elemento di spicco che ha lo scopo di annunciare visivamente i titoli (che potrebbero essere le entry di un blog). Ecco quindi un secondo esempio in cui l'icona diventa un vero e proprio elemento attivo.
Prima di procedere con il CSS dell'esempio, una piccola parentesi su come sia possibile traslare in orizzontale un elemento all'esterno del suo contenitore. I modi possibili sostanzialmente sono due: il posizionamento relativo e i 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;padding-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;padding-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 grazie all'uso delle coordinate. Con i margini negativi, invece, verrà traslato verso sinistra il lato sinistro e, visto che i titoli h2 non hanno una larghezza impostata, si otterrà inoltre un conseguente aumento delle dimensioni dei titoli stessi che guadagnano spazio sul loro lato sinistro, spazio che verrà comunque usato esclusivamente per l'icona, visto l'uso del padding sinistro.
La differenza tra le due soluzioni è immediatamente visibile se all'esempio di base oltre al marcatore aggiungiamo un bordo inferiore: ecco quindi la versione con posizionamento relativo e quella 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 e vedere quindi la regola CSS dei titoli per intero in cui oltre le dichiarazioni necessarie per il bullet ho incluso anche quelle su font e colore:
h2{margin:0.6em 0 0 -18px;padding-left: 18px;
background: url(post.png) no-repeat left center;
font: bold 200% "Trebuchet MS",Arial,sans-serif;
color: #B5CC74}
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:
<div class="data">
<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 è una singola immagine:
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:
div.data{float: right;width: 50px;margin:0 3px 3px 0;
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 così da fargli occupare tutta la larghezza del div contenitore e non solo la larghezza utile al testo. Il font verrà reso un po' più grande e di un colore blu scuro. Per quanto riguarda lo sfondo si attribuirà un padding superiore e la parte superiore dell'immagine. Si noti come queste due ultime dichiarazioni siano duali rispetto a quelle del div contenitore appena viste. Ecco quindi la regola:
div.data span.d{display: block;font-size: 170%;
font-weight: bold;color: #757797;padding-top: 5px;
background: #E9F3FF url(date.png) no-repeat top left}
Infine come ultima regola renderemo in maiuscolo il testo del mese:
div.data span.m{text-transform: uppercase}
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:
.pullquote{float: right;width: 10em;margin: 0.1em 0 0.3em 0.3em;
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 all'interno della dichiarazione relativa al font: la prima serve per il font-style, mentre la seconda per il font-weight. Questo ci garantisce che il testo sarà normale anche per elementi che naturalmente si presentano in corsivo o grassetto. Infine viene centrato il testo e regolata l'altezza di linea.
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="comment">
<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:
<table id="calendar" summary="Novembre 2005">
<caption>Novembre 2005</caption>
<thead>
<tr>
<th>L</th><th>M</th><th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>...</td>
</tr>
</tbody>
</table>
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.
