CSS  »  Articoli  »  CSS Template e layout 

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.

Altri articoli

Altre guide

Altre newsletter