In altri articoli sui CSS abbiamo spesso evidenziato i vantaggi di questo linguaggio in termini di usabilità ed efficienza nel design di siti e pagine. Qui andremo sul leggero e vedremo come con semplici accorgimenti sia possibile migliorare l'aspetto delle tabelle dando ad esse un look "tridimensionale" con bordo in rilievo.
L'articolo da tenere presente (anche per il codice) è quello sui «rollover con i CSS» già pubblicato: dalla combinazione delle due tecniche potrete ottenere effetti di grande impatto.
Subito uno sguardo alla pagina di esempio.
Tre tabelle usate come barre di menu. La prima è normale. Niente CSS. Solo il classico colore di sfondo a definire le varie celle. La seconda è il frutto della combinazione cui accennavamo: CSS rollover + bordo in rilievo. La terza è una variazione sul tema, con una maggiore profondità del rilievo. Come per l'altro articolo il consiglio è quello di salvare sul vostro disco la pagina di esempio: aprendola, troverete il codice CSS incorporato
e commentato.
Realizziamo il bordo in rilievo
Tra le proprietà dei CSS alcune sono in grado di dare ai bordi di un elemento un aspetto "solido", vagamente 3D. Le proprietà sono ridge, inset, outset. Il risultato? I gusti non si discutono, ma a mio parere non sono eccezionali. L'aspetto finale sarà simile a quello di tanti pulsanti dozzinali.
Nell'esempio proposto non si fa uso di nessuna di queste proprietà. L'aspetto in rilievo è in realtà frutto di un'illusione. Pertanto, grande importanza avrà la scelta dei colori, sia del bordo sia dello sfondo. Ma procediamo con ordine, analizzando la seconda tabella.
A livello di HTML la tabella presenta di notevole solo la specifica del cellpadding e del cellspace:
<table width="100%" border="0" cellpadding="2"
cellspacing="1" class="bordotab">.
Per un risultato ottimale vi consiglio di mantenere queste impostazioni. Alla tabella, allo stesso modo dell'articolo sul rollover, applichiamo la classe "bordotab" che commenteremo tra poco. Alle singole celle (<td>) applichiamo invece la classe "classetd".
Il trucco del rilievo nasce dalle impostazioni del colore di sfondo e del bordo delle classi .bordotab e .classetd. Esaminiamole:
- .bordotab - Al di là della definizione del font e del suo colore è importante impostare un colore di sfondo scuro (o comunque ben in contrasto con lo sfondo della pagina). Nel nostro caso abbiamo scelto un grigio antracite (background-color: #333333;).
- .classetd - Il colore di sfondo è ovviamente diverso (background-color: #CCCCCC;), ma ciò che conta sono i bordi. Per avere l'effetto rilievo bisogna in buona sostanza definire le proprietà per ciascun lato. Il trucco sta nell'assegnare ai bordi inferiore (border-bottom), sinistro (border-left) e destro (border-right) come colore nero(#000000), come spessore 0 pixel, come aspetto solid. Il bordo superiore (border-top) avrà come colore il bianco (#FFFFFF), come spessore 1 pixel, come aspetto sempre solid.
Per ulteriori chiarimenti vi rimando ai commenti contenuti nella pagina. Intanto osserviamo la terza e ultima tabella. Inquesto caso abbiamo un effetto di maggiore profondità. Per ottenerlo basta intervenire sui valori del cellpadding e del cellspace della tabella, che sono in questo caso impostati rispettivamente a 3 e 2.
Anche in questo caso vi suggerisco di giocare con le varie impostazioni dei colori per raggiungere l'effetto che più vi piace e che meglio si adatta al vostro layout.
