Box con angoli curvi seconda versione

Oggi, invece, vedremo come ottenere lo stesso risultato con l' uso di 4 piccolissimi files grafici. Essi non sono altro che i 4 "angoli" che inseriremo alle quattro estremità del loro elemento contenitore. Il risultato è del tutto simile, di facile implementazione ed abbastanza semplice. Prima di scrivere questo articolo, ho provato la pagina finale anche su browser Internet Explorer precedenti alla versione 6 [5.0 e 5.5 per l' esattezza], oltre che su Opera, Mozilla e Firefox, ottenendo identica visualizzazione.

Step 1: preparare le 4 immagini

La prima fase è quella di realizzare i 4 "angoli". Di seguito vi mostro le immagini. Partendo dall' angolo superiore sinistro, ed in senso orario, avremo: topleft.gif, topright.gif, bottomright.gif e bottomleft.gif:

Queste piccole immagini della misura di 14 pixel X 14 pixel, abbinate al codice CSS, ci daranno il box senza spigoli.

Step 2: il codice CSS

Questa seconda fase è quella che deve mettere assieme tutti i pezzi del puzzle, ovviamente con del codice a noi già noto: il codice CSS. Come dobbiamo "pensare" questo contenitore? Esso sarà costituito da un elemento esterno, che io ho realizzato con una classe, nominandolo .general e da un secondo elemento contenitore, interno al primo, che ho nominato .content. Cominciamo a vedere il codice:

.general {
 margin:20px auto 20px auto; 
 padding:0px;
 width:600px;
 text-align:left; 
 }
 .content {
 margin:0;
 padding:0;
 border:1px solid #71828a;
 } 

Il primo elemento [.general] non contiene codice particolarmente complicato, anzi! Ho soltanto settato un margine, per poterlo distanziare dall' alto della finestra del browser; una larghezza ed un allineamento a sinistra, per il testo che andremo ad inserire. La stessa cosa vale anche per il secondo elemento, questo interno a ".general", il quale contiene, oltre al margine esterno ed interno, il colore del bordo che assumerà alla fine e che è uguale al colore del bordo della curva delle 4 immagini. Dichiarato questo codice per i 2 elementi contenitori, dobbiamo creare delle classi: una per ogni angolo. Prima di fare questo, dobbiamo dichiarare, attraverso una dichiarazione "raggruppata" quanto segue:

.topleft, .topright, .bottomright, .bottomleft {
 padding:0; 
 border: 0;
 }  

Notate bene che le 4 classi hanno lo stesso nome delle 4 immagini degli angoli curvi; questo l' ho fatto per non confonderci con il prosieguo del tutorial. Adesso andiamo a vedere ogni singola classe applicata ad ogni "angolo". Cominciamo sempre in senso orario:

.topleft{ /* superiore sinistro */ 
 float:left;
 margin:-1px 0 0 -1px; 
 }  

Questo angolo deve essere "flottante" a sinistra. Cosa significa? Float è una proprietà e non un valore. Un elemento flottante viene tolto dal flusso normale della pagina [effettivamente la sua posizione è forzata a sinistra in questo caso] e tutti gli altri elementi sanno della sua "presenza" e lo circondano; si dispongono intorno ad esso. Passiamo adesso al giusto posizionamento "giocando" con i margini. A questa conclusione sono arrivato dopo aver fatto un bel pò di tentativi. In effetti quando vedrete l' esempio finale, non vi accorgerete che abbiamo "mescolato" grafica e bordo ottenuto con i CSS: sembra un tutt' uno. Di seguito il codice CSS per gli altri tre angoli:

.topright{ /* superiore destro */ 
 float:right; 
 margin:-1px -1px 0 0; 
 }
 .bottomright{ /*inferiore destro */
 float: right; 
 margin: -14px 0 0 0; 
 } 
  .bottomleft{/* inferiore sinistro */ 
 float:left; 
 margin:-14px 0 0 0; 
 }  

Se mi fermassi qui, otterremo il nostro box con gli angoli arrotondati. Però... verrebbe meno la visualizzazione uguale anche con Internet Explorer 5.0 e 5.5. A tal proposito ho preparato una immagine, qui in basso, che mette in evidenza lo "scostamento" tra l' angolo arrotondato, rappresentato dalla gif, ed il bordo del suo contenitore:

Questo è quanto avviene su Internet Explorer 5.0 e 5.5. Non si sa bene per quale motivo avviene ciò ma succede quando una immagine subisce il float; [rivedere il codice CSS di ogni singola classe assegnata agli angoli].

Step 3: soluzione per IE5.x

Per poter ovviare a quanto visto nell' immagine superiore, dobbiamo ricorrere ad altro codice CSS. Si devono impostare dei margini negativi in modo tale che il tutto vada al suo posto. Cominciamo dall' angolo superiore sinistro:

.topleft {
 margin-left: -4px;
 ma\rgin-left: -1px;
 }

 

Il primo codice sposta verso sinistra l' immagine di 4 pixel. Siccome la gif si deve sovrapporre al bordo del suo elemento (che ha anche' esso spessore di 1 pixel), dichiarando un margine negativo di -3px, si vedrebbe uno "scalino" pari ad 1 pixel. In questo modo tutto va a posto. Il secondo margine [ma\rgin-left:-1px;], invece, serve per Internet Explorer 6.0 il quale non lo considera come un hack e se lo si omette presenta a video un risultato poco simpatico. Per fare in modo che anche su altri browser standard si ottenga un effetto omogeneo, si interviene con la selezione di un elemento discendente:

html>body .topleft {
 margin-left: -1px;
 }  

Si seleziona l' elemento ".topleft" figlio di "body", a sua volta figlio di "html". Questo codice e quello scritto più su, lo si deve dichiarare per tutti e 4 gli angoli:

.topright {
 margin-right: -4px;
 ma\rgin-right: -1px;
 }
 html>body .topright {
 margin-right: -1px;
 }

 .bottomright{
 margin-right: -3px;
 ma\rgin-right: 0px;
 }
 html>body .bottomright {
 margin-right: 0px;
 }

 .bottomleft {
 margin-left: -3px;
 ma\rgin-left: 0px;
 }
 html>body .bottomleft {
 margin-left: 0px;
 }  

Step 4: il codice html

Terminato tutto il codice CSS, vediamo adesso come richiamare nella pagina HTML gli elementi di blocco:

<body>
 <div class="general">
 <div class="content">
 <img class="topleft" alt="" src="/topleft.gif"  />
 <img class="topright" alt="" src="/topright.gif">
 <h1>Lorem Ipsum</h1>
 <p>Lorem ipsum dolor sit amet...</p> 
 </div>
 <img class="bottomright" alt="" src="/bottomright.gif"  /> 
 <img class="bottomleft" alt="" src="/bottomleft.gif"  />
 </div>
 </body>  

Adesso siamo davvero giunti al termine dell' articolo; la pagina finale dell' esempio mostra il box che abbiamo realizzato, step dopo step.