Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

angoli arrotondati e riquadri ombrati

Il CSS3 avrà proprietà per fare bordi con angoli arrotondati, bordi composti da immagini e riquadri ombrati, ma con un po' di lavoro qualcosa si può già simulare col CSS2 --- e senza alcuna tabella o codice extra di mark-up.

Questa pagina è stata inspirata da una creata da Arve Bersvendsen. Lui ha molte più demo interresanti sui CSS.

Naturalmente, i bordi con angoli arrotondati e le ombre saranno molto più semplici col CSS3. Per esempio, per dare ad un paragrafo un bordo rosso spesso con angoli arrotondati, occorreranno solo due righe di CSS3 simili a queste:

P { border: solid thick red;
 border-radius: 1em }

E per aggiungere un'ombra mezzo em sotto e sulla destra del paragrafo, solo una righa dovrebbe bastare:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Si può provare qui se già funziona.) Ma se cè bisogno adesso e non si bada a complessità e perdita di flessibilità si può usare la tecnica qui sotto. Al limite sarà un simpatico test per i browser con bug...

cinque immagini su un elemento

Il trucco principale è usare il "contenuto generato" ('::before' and '::after') per mettere quattro immagini extra su un elemento. Lo pseudo-elemento '::before' può avere un'immagine come sfondo e un immagine contenuta in esso, lo pseudo-elemento '::after' pure, e l'elemento stesso può avere un'immagine per sfondo, per un totale di cinque immagini.

Abbiamo creato cinque immagini PNG e le abbiamo messe ai quattro angoli e contro confine destro dell'elemento. Ecco le immagini:

angolo superiore sinistro:

confine superiore e angolo superiore destro:

parte centrale e confine laterale destro:

angolo inferiore sinistro:

confine inferiore e angolo inferiore destro:

Ed ecco le regole del CSS per il posizionarle:

blockquote {
 max-width: 620px;
 background: url(images/rs-right.png) right repeat-y }
blockquote::before {
 display: block;
 line-height: 0;
 background: url(images/rs-topright.png) top right no-repeat;
 content: url(images/rs-topleft.png) }
blockquote::after {
 display: block;
 line-height: 0;
 background: url(images/rs-bottomright.png) bottom right no-repeat;
 content: url(images/rs-bottomleft.png) }

Poichè l'immagine di sfondo è larga 620px, non possiamo permetterci riquadri più larghi di 620px senza ottenere un vuoto. Ecco il perchè della proprietà 'max-width'. La proprietà 'display: block' è necessaria per essere sicuri che il "contenuto generato" formi un proprio riquadro sopra e sotto il contenuto principale, invece di essere inserito sulla prima e l'ultima linea.

il risultato

Ecco come appare:

Il sorgente HTML è davvero niente più di quel che dovrebbe essere:

<blockquote>
<p>Do you see a pale green box with rounded corners
and a drop shadow against a white background? If not,
your browser isn't handling the generated content
correctly (or maybe not at all).
</blockquote>

E se si vuol testare se il proprio browser è in grado di fare ciò tramite il CSS3, provare qui.