verosimile.it

Esperimenti CSS

Creare automaticamente box con angoli arrotondati estensibili, anche senza immagini: tre soluzioni CSS

Premessa: tengo a precisare che questa è una soluzione che ha la sua ragione di vita nell’essere “cross browser”. Se per voi è sufficente offrire un layout con angoli tondi per gli utenti di Firefox e Safari/Chrome, potete utilizzare la proprietà CSS3 “-border-radius”:

-moz-border-radius: 10px (per Firefox)
-webkit-border-radius: 10px (per Safari/Chrome)

A tutt'oggi solo i browser della famiglia Mozilla offrono la possibilità di creare facilmente box con angoli arrotondati via CSS. Chi volesse crearne uno cross-browser è costretto a barcamenarsi tra gif o jpg che rappresentano gli angoli curvi di vari tipi, div vuoti che non hanno nessun significato strutturale, difficoltà nell’usare un layout liquido... Insomma, soluzioni che appesantiscono il markup e costringono a usare spesso editor grafici.
Vediamo allora tre alternative che ho sviluppato per automatizzare la creazione di box con gli angoli smussati, usando, al posto dei classici div, le versatili liste di definizioni.
Si tratta di veri e propri “kit per box stondati”, da scaricare e da usare ogni volta che si presenti l’occasione:

• Soluzione per creare box semplici
• Soluzione per creare fancy box, con background a scelta
• Infine, spingendo al massimo il concetto di automatizzazione e ottimizazione delle risorse, soluzione per creare box con gli angoli arrotondati senza usare immagini.

Ricordo brevemente che le definition list (che d’ora in poi chiamerò DL) sono composte dall’elemento <dl>, ossia il contenitore, che a sua volta contiene uno o più elementi definition term <dt> e l’elemento definiton description <dd>.
Ovviamente, in un mondo ideale, un div si limiterebbe a fare il div, e la lista di definizione farebbe la lista di definizione.
Ma chi si occupa di produzione di pagine web sa che siamo ben lontani dal mondo ideale, e, comunque, spesso l'insieme titolo-approfondimento del titolo può essere considerato, semanticamente, una lista di definizione. Una soluzione al nostro problema usando i classici div non sarebbe ottimale perché comporterebbe l'utilizzo, nel markup HTML, di elementi finalizzati solo alla presentazione grafica, leggi div vuoti.

Creazione veloce di box estensibili con angoli tondi. Versione base

Le immagini che “smussano” gli angoli
Per smussare gli angoli dei box, non importa di che colore o di che grandezza siano, ci servono solo queste quattro immagini, una per ogni angolo, che qui vedete ingrandite e contornate:Si utilizzano come fossero delle pecette: una parte bianca curva su sfondo trasparente si occupa di “nascondere”, smussandolo, l’angolo del box. Ovviamente, se dovete operare su pagine (o sezioni di pagina) che hanno un colore di sfondo diverso dal bianco, dovrete modificarle.
Potete scaricarle qui ed utilizzarle per tutti i box.

L’HTML
L’HTML è quanto di più stringato ci sia:

<dl class="box1">
 <dt><b>Ecco il box<b></dt>
 <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Maecenas eget ligula eu enim iaculis lacinia.
 Nullam felis. Curabitur risus.</dd>
</dl> 

Noterete che è stata applicata una classe alla DL e che il testo all’interno della DT è tra i tag <b>.
La classe serve per poter creare innumerevoli box con vari stili, mentre il tag <b> è necessario per inserire la gif “smussa-angolo” in alto a sinistra. Ovviamente al posto di <b> ci si può inserire uno <span> o un <i>, basta che sia un elemento inline (anche se via css gli daremo il valore “block”, ma questo lo vedremo più avanti).
Non vogliamo che il nostro box abbia un testo nella DT? Bene, sempre più avanti vedremo la semplice soluzione.

Il CSS
Cominciamo con l’inserire le quattro gif “smussa-angoli”:

dl {
 background:url("img/corner_bottom_left.gif") bottom left no-repeat;}

dt {
 background:url("img/corner_top_right.gif") top right no-repeat;} 

dt b {
 background:url("img/corner_top_left.gif") top left no-repeat;
 display:block;} 

dd {
 background:url("img/corner_bottom_right.gif") bottom right no-repeat;
 margin:0;} 

Ora i quattro spigoli del box (o DL) sono arrotondati.
Notare che ho dovuto dare la proprietà “block” al display del bold dell’elemento DT per permetterne una gestione del padding omogenea nel caso il testo vada a capo e che ho azzerato i margini della DD, per allinearla alla DT.
Questo il risultato (attenzione: lo sfondo giallo l’ho inserito solo per rendere visibile l'esempio. Il box sarebbe bianco su sfondo bianco):
A questo punto, avendo creato la struttura base dei box, possiamo personalizzarli assegnando loro varie classi.
Cominciamo a modificare il colore dello fondo e del testo del nostro box:

.box1 {
 background-color:#99bfdd;
 color:#C43400;}

La classe inserita nell’HTML per l’elemento DL, ricorderete, è identificata appunto come box1.
Ora il box appare così:
Cambiamo adesso il colore della parte alta del box agendo sugli stili della DT appartenente alla DL box1:

.box1 dt {
 background-color:#C43400;
 color:#F7D200;} 

Risultato:
A questo punto ci occupiamo di allontanare il testo dal bordo del box. Modificheremo, nelle DL box1, gli stili dell'elemento <b> all’interno della DT e gli stili della DD:

.box1 dt b {
 padding:0 10px;} 

.box1 dd {
 padding:10px 10px 30px 10px} 

Quindi avremo:

Non ci interessa avere un testo nell’header nel box? Niente di più semplice. Basterà nasconderlo con un’indentazione negativa:

.box1 dt {
 margin:5px 0 0 0; 
 color:#F7D200;
 text-indent:-6000px;} 

Il testo che sarà comunque sempre presente nella struttura della pagina, anche se non visibile; può essere una descrizione del contenuto del box, utile per i motori di ricerca:
In questa pagina potete vedere i box arrotondati versione “base” all’opera.

Creazione veloce di box estensibili con angoli tondi. Fancy version

E se volessimo rendere più gradevoli i box, assegnandogli un’immagine di sfondo?
In questo caso avremmo bisogno di un elemento in più, ossia un div da inserire all’interno della DD.
Questo è l’HTML, notare l’inserimento del div a cui abbiamo abbinato una classe:

<dl class="box1">
 <dt><b>Ecco il box</b></dt>
 <dd>
 <div class="dd-content">Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit. Quisque elementum orci ac libero.
 Curabitur ligula. (...)</div>
 </dd>
</dl>  

Questo è il CSS che interviene su tutti i box (le DL) che creeremo:

dl {
 border:1px solid #fff;} 

dt {
 background: url("img/corner_top_right.gif") top right no-repeat;} 

dt b {
 background: url("img/corner_top_left.gif") top left no-repeat;
 display:block;} 

dd {
 margin:0;
 background:url("img/corner_bottom_right.gif") bottom right no-repeat;} 

.dd-content {
 background:url("img/corner_bottom_left.gif") bottom left no-repeat;
 margin:0;} 

Rispetto alla versione base, noterete che l’elemento DL non contiene più la gif con l’angolo inferiore-destro; gli abbiamo invece applicato un bordo superiore, a cui abbiamo dato lo stesso colore dello sfondo sul quale è situato. Perchè questo bordo invisibile? È un “workaround” per ovviare ad alcuni problemi di renderizzazione di IE qualora si inserisca un div con un padding, come faremo in seguito.
Abbiamo anche aggiunto la classe dd-content, che applicheremo al div e che contiene come sfondo l’immagine corner_bottom_left.gif che in precedenza era inserita nel DL.

Dove inseriremo, allora, lo sfondo che abbiamo scelto per il box?
Alla classe box1:

.box1 {
 background: url("img/bg01.gif") top left repeat-x;
 color:#895b4b;
 font-size:14px;}

.box1 dt b {
 padding:10px;
 font-size:130%;
 color:#fff;}

.box1 .dd-content {
 padding: 10px 10px 20px 10px;}

Ecco il risultato:
Qui alcuni esempi di fancy box

Creazione veloce di box estensibili con angoli tondi. Versione senza l’uso di immagini

OK, già che abbiamo fatto 30, facciamo 31! Volete stupire i vostri amici? O più prosaicamente vi hanno lasciato su un’isola deserta con un PC senza connessione, senza editor di immagini, e vi hanno intimato di creare una pagina web con box dagli angoli stondati? Ho quello che fa per voi: una soluzione CSS che non prevede l’uso di immagini.

L'HTML è lo stesso dei fancy box:

<dl class="box1">
 <dt><b>Ecco il box</b></dt>
 <dd>
 <div class="dd-content">Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit. Maecenas eget ligula eu enim 
 iaculis lacinia. Nullam felis. Curabitur risus.</div>
 </dd>
</dl>  

Vediamo ora come tramite gli stili nel CSS è possibile stondare (o meglio: dare l’illusione di una stondatura) i quattro angoli. Agiremo sui bordi, sui margini e sul posizionamento relativo degli elementi alle due estremità verticali della DL.
Visto che un’immagine vale più di 1000 parole, ecco un esempio grafico di come funziona l’illusione.
Creeremo una cosa del genere: dove è l’elemento DL, è l’elemento DT a cui è stato applicato un bordo superiore, un margine laterale di 1px e uno spostamento negativo di 1px dall’alto rispetto al flusso del documento, e è il tag <b> all'interno dell'elemento DT a cui sono stati applicati gli stessi stili visti sopra.
Questo per quanto riguarda gli angoli superiori, per quelli inferiori agiremo specularmente nello stesso modo, ma sull’elemento DD e sul div all’interno dell'elemento DD.
Quindi il CSS risultante è questo (ricordo che .dd-content è la classe che applicheremo al div)

dt {
 margin:0 1px 0 1px;
 position:relative;
 top:-1px;
 border-top: 1px solid;} 

dt b {
 margin:0 1px 0 1px;
 position:relative;
 top:-2px;
 display:block;
 border-top: 1px solid;}

dd {
 margin:0 1px 0 1px;
 position:relative;
 bottom:-1px;
 border-bottom: 1px solid;} 

.dd-content {
 margin:0 1px 0 1px;
 position:relative;
 bottom:-2px;
 border-bottom: 1px solid;}

Si noterà che non sono stati inseriti stili per l’elemento contenitore DL e che ai bordi “stonda box” non è stato specificato un colore. Queste variazioni, che vedremo nel prossimo passo, le applicheremo alla classe box1.
Per il momento quello appare sul browser è questo:
A questo punto, tramite i colori dei bordi e del background (oltre agli stili di formattazione) completiamo l’opera sul box.
Agiremo sulla classe box1 abbinata alla DL e su tutti gli elementi annidiati nella DL appartenente a questa classe (creando varie classi si possono fare box di vari stili).

.box1 {
 background-color:#c7ac7a;}

.box1 dt {
 border-top-color: #c7ac7a;}

.box1 dt b {
 border-top-color: #c7ac7a;
 font-size:120%;
 padding:10px;}

.box1 dd {
 border-bottom-color: #c7ac7a;}

.box1 .dd-content {
 border-bottom-color: #c7ac7a;
 padding:10px;}

Ecco che il box ha preso forma:
È possibile ottenerne anche una versione con i bordi, sia colorata, sia “trasparente”. Modifichiamo il CSS della classe box1 così:

.box1 {
 background-color:#fff;
 border-left: 1px solid #998A34;
 border-right: 1px solid #998A34;}

.box1 dt {
 border-top-color: #998A34;
 margin:0;}

.box1 dt b {
 border-top-color: #998A34;
 padding:10px;
 background-color:#fff;}

.box1 dd {
 border-bottom-color: #998A34;
 margin:0;}

.box1 .dd-content {
 border-bottom-color: #998A34;
 padding:10px;
 background-color:#fff;}

Cos’abbiamo fatto? Abbiamo aggiunto un bordo laterale all’elemento DL e abbiamo dato un colore di sfondo uguale a quello del DL agli elementi più esterni .
Il colore di sfondo a questi elementi l’abbiamo inserito perchè, coprendo l’elemento che viene dopo (o prima, per quanto riguarda la parte bassa del box), assottigliano il bordo.
Visto che l’elemento contenitore DL ha ora un bordo laterale che ne aumenta la larghezza di 2px, abbiamo azzerato il margine laterale degli elementi DT e DD.
Abbiamo così ottenuto questo:
Ma non finisce qui. Giocando con i colori dei bordi e dello sfondo si possono creare box stondati “effetto 3d”. Ad esempio con questo CSS:

.box1 {
 background-color:#a6583a;
 color:#fff;
 border-left: 1px solid #e99271;
 border-right: 1px solid #793117;}

.box1 dt {
 border-top-color: #be785c;
 margin:0;}

.box1 dt b {
 padding:10px;
 border-top-color: #ffb794;}

.box1 dd {
 border-bottom-color: #873d22;
 margin:0; }

.box1 .dd-content {
 border-bottom-color: #793117;
 padding:10px;}

Otteniamo questo box:
Ovviamente le combinazioni sono virtualmente infinite...
Eccovi comunque qui un po' di esempi “sul campo”...