Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Angoli e bordi personalizzati con i CSS

Angoli e bordi personalizzati con i CSS

di Søren Madsen, traduzione di Gdesign e Chenoa, 12 Marzo 2004

Versione Stampabile

L'articolo (in lingua inglese) proviene da A List Apart ed è stato tradotto e riprodotto per gentile concessione dell'autore.


Tutti quanti avete sentito dire:

"I siti realizzati con i CSS tendono ad essere rettangolari e con i bordi squadrati. Dove sono finiti gli angoli arrotondati?"

Risposta: gli angoli arrotondati sono esattamente qui. In questo articolo, vi mostreremo come gli angoli ed i bordi personalizzati possono essere applicati a layout flessibili con contenuti dinamici utilizzando codice semanticamente corretto.

Il codice

Nel codice di esempio sotto, sono state inserite delle interruzioni di riga per mettere in evidenza i paragrafi:

<h2>Article header</h2>

<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>

<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>

<p>
A paragraph containing author information
</p>

I ganci

Per avere un controllo totale del layout, dobbiamo assicurarci di avere abbastanza elementi che possano essere definiti con il nosto CSS. Chiameremo questi elementi "ganci". Il nosto codice ne ha bisogno soltanto di qualcuno.

Prima di tutto, racchiudiamo l'intero articolo in un div contenitore e poi racchiudiamo ogni sezione strutturale in elementi appropriati:


<div class="Article">
  <h2>Article header</h2>

  <div class="ArticleBody">
    <p>
      A few paragraphs of article text.<br />
      A few paragraphs of article text.
      </p>

    <p>
      A few paragraphs of article text.<br />
      A few paragraphs of article text.
      </p>
    </div>
  <div class="ArticleFooter">
  <p>
    A paragraph containing author information
    </p> 
    </div>
  </div>

Se esaminiamo il codice, vedremo che abbiamo inserito almeno cinque "ganci", che sono tutto quello di cui abbiamo bisogno per definire una grafica personalizzata per ognuno dei quattro angoli (e del lato sinistro) del nostro articolo.

Osservate il Passo 1 - codice principale

La progettazione

Prima di tutto stabiliamo alcuni parametri di base per il layout. Come riferimento, il nostro progettista grafico ci ha dato questo:

Rettangolo con angoli arrotondati

Ci ha detto: "voglio che i bordi e gli angoli siano simili a quelli mostrati in figura". Inoltre, ci ha detto di essere consapevole del fatto che tutti gli articoli possono avere larghezze e altezze differenti, e che non era ancora sicuro ne sul tipo di sfondo ne sui bordi da utilizzare per gli articoli. Per questo motivo ci ha chiesto: "Potreste lasciarlo aperto, in modo che sia anche facile da modificare?"

Il procedimento

Intendiamo gestire il minore numero possibile di "ganci" e gli presteremo maggiore attenzione quando inizieremo a preparare le immagini per il nostro layout. Inoltre dobbiamo assicurarci che la grafica di cui abbiamo bisogno sia adatta ad essere agganciata agli elementi già presenti nel nostro documento.

Abbiamo un div contenente l'intero articolo. Questo ci serve per fare il nostro angolo superiore sinistro ed i nostri lati sinistro e superiore. Gli elementi "Header" sono block-level di default, sfrutteremo quindi i vantaggi del loro comportamento: essi si estendono per tutta la larghezza del loro elemento superiore. Allora per il nostro angolo superiore destro useremo l’elemento <h2>.

Per l'angolo inferiore sinistro utilizzeremo il div del nostro "article-footer" — e per l'angolo inferiore destro il paragrafo contenuto in "article-footer".

Il passo 1.1 mostra come abbiamo tagliato le nostre immagini.

Nota: Ovviamente, potete utilizzare qualsiasi elemento per agganciarvi alla grafica. È improbabile che il codice del vostro documento corrisponda esattamente alla struttura utilizzata nel nostro esempio. Per quello che sappiamo, potreste avere soltanto un singolo paragrafo di testo a cui applicare degli angoli e dei bordi che si adattino.

Come detto prima, tutto quello di cui avete bisogno sono almeno quattro elementi strutturali (a seconda dell'altezza del vostro elemento potete richiederne cinque). Se è necessario, questi elementi potrebbero essere dei div non semantici, ognuno con la sua class. Ricordate che un elemento div, deve avere un contenuto che manifesti la sua presenza. Tenete a mente che se il vostro contenuto si presta ad elementi strutturali comuni come header, paragrafi, e così via, potreste e dovreste utilizzare questi elementi al posto dei div non semantici.

Gli stili

Continuando, ritorniamo agli elementi dei bordi e impostiamo una larghezza relativa per il div in maniera che contenga l'intero articolo e vediamo come si comportano:

div.Article {
  width:35%;
  border: 1px solid red; }
div.Article h2 {
  border: 1px solid blue; }
div.ArticleBody {
  border: 1px solid black; }
div.ArticleFooter {
  border: 1px solid blue; } 
div.ArticleFooter p {
  border: 1px solid magenta; }

Osservate il Passo 2 - Comportamento degli elementi di base

Fin qui nulla di sorprendente. Comunque, prendiamo nota delle lacune che appaiono prima e dopo il nostro div class="ArticleBody". Ignorando per ora quale sia il problema, continuiamo a scrivere il foglio di stile:

body {
  background: #cbdea8;
  font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif;
  }
div.Article {
  background: 
	url(images/custom_corners_topleft.gif)
  top left no-repeat;
  width:35%;
  }
div.Article h2 {
  background: 
	url(images/custom_corners_topright.gif) 
  top right no-repeat;
  }
div.ArticleBody {
  background: 
	url(images/custom_corners_rightborder.gif) 
  top right repeat-y;
  }
div.ArticleFooter {
  background: 
	url(images/custom_corners_bottomleft.gif) 
  bottom left no-repeat;
  }
div.ArticleFooter p {
  background: 
	url(images/custom_corners_bottomright.gif) 
  bottom right no-repeat;
  }

Osservate il Passo 3 - primi esperimenti

Niente male! Meglio di quello che ci aspettavamo. Naturalmente abbiamo bisogno di aggiungere del padding ai nostri elementi per migliorare il look del layout - e poi ci sono quelle lacune fastidiose da fissare. Le lacune sono causate dai ritorni del trascinamento inserito dai nostri elementi (block) di paragrafo. Potremmo evitare di utilizzare completamente gli elementi di paragrafo ed eliminare perciò il problema, ma - per ragioni ben note ai lettori di AListApart - preferiamo mantenere il nostro codice strutturalmente pulito e logico. Non è la colpa dei nostri dati se noi siamo degli "stylers" pigri.

Nel nostro primo passaggio abbiamo presupposto che il ritorno del trascinamento sia pari a 1.5em, poiché questo era il valore che aveva specificato per la nostra interlinea. Quindi il nostro primo tentativo era di aggiungere un margin-top:1.5em ai nostri ArticleBody ed ArticleFooter. Ha funzionato perfettamente in molti browser compatibili con gli standard - tutti tranne uno utilizzato dal 94% degli utenti di internet su questo pianeta (niente nomi per favore).

Dopo aver testato l'errore ci siamo resi conto che bisogna usare un margin-top:-2em per essere sicuri che non si creino spazi vuoti tra gli elementi:

div.Article {
  background: 
	url(images/custom_corners_topleft.gif) 
  top left no-repeat;
  width:35%;
  }
div.Article h2 {
  background: 
	url(images/custom_corners_topright.gif) 
  top right no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  }
div.ArticleBody {
  background: 
	url(images/custom_corners_rightborder.gif) 
  top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  }
div.ArticleFooter {
  background: 
	url(images/custom_corners_bottomleft.gif) 
  bottom left no-repeat;
  }
div.ArticleFooter p {
  background: 
	url(images/custom_corners_bottomright.gif) 
  bottom right no-repeat;
  display:block;
  padding:15px;
  margin:-2em 0 0 0;
  }

Passaggio 4 - ecco il risultato finale!

Retro-compatibilità?

Se avete guardato questo esempio in Netscape 4.x, probabilmente avrete notato che nella pagina compare uno spazio vuoto. In NS 4.x non abbiamo trovato alcuna soluzione accettabile, così scegliamo di nascondere al browser gli stili che non riesce a visualizzare correttamente. NS 4.x non intepreta il tagstyle con media="all", sfruttiamo allora questa mancata interpretazione nell'esempio che segue. Abbiamo preparato due tag style, uno con gli stili che vogliamo che tutti i browser visualizzino, ed un altro che nasconderemo a NS 4.x. Anche se ci spezza il cuore fare in questo modo, abbiamo anche cambiato l'unità di misura della dimensione del font da em a px. Avete voluto la retro-compatibilità? L'avete ottenuta.

Passo 5 - degradazione elegante in NS 4.x

Il mondo reale

Dite: "si ok, ma vogliamo vedere un'applicazione reale" . Come anticipato, vi forniamo un esempio della tecnica applicata in un contesto più avanzato. Abbiamo preso in prestito un layout pienamente testato da Alex Robinson, ed abbiamo applicato i nostri stili a questo layout.

Il primo tentativo di applicare gli stili a questo layout ha causato in IE6/Win una miriade di problemi, scatenate dai bug che riguardano z-index. Interi elementi erano scomparsi; i margini si comportavano come i bambini tenuti svegli oltre l'orario abituale di andare a letto la sera. Insomma, c'era una gran confusione. Ci siamo allora resi conto che con un position:relative ed un <br /> ben posizionato avremmo sistemato tutto. Guardate il Passo 6 per capire meglio.

Passo 6 - il nostro tentativo di applicare la tecnica a un layout con header, colonne, e footer

Limitazioni

Se siete stati attenti, probabilmente capirete che questo esempio funziona bene con intorno un colore di sfondo. Con questo metodo abbiamo bisogno di coprire la grafica dell'angolo superiore sinistro con la grafica dell'angolo superiore destro. Se creiamo la grafica dell'angolo superiore destro trasparente, si noterà in basso la grafica superiore sinistra. Lo stesso vale per la parte inferiore. E questo è davvero una limitazione. Forse nella seconda parte di questo articolo mostreremo come lavorare con la gradazione degli sfondi.

Nel frattempo, questo articolo vi ha mostrato un metodo generico, con uno sguardo all'indietro alla compatibilità e al codice, e la nostra speranza a che tutto ciò vi dia molte idee - forse persino a coloro che evitano di lavorare con i colori di sfondo.

Ringraziamenti

Brian Alvey per le discussioni sugli esempi reali e sulla degradazione elegante in NS 4.x e David Schontzler per aver assistito l'autore danese a scrivere un testo tecnico in inglese.

Note dell'editore

Mentre stavamo preparando questa articolo per la pubblicazione, il progettista Ryan Thrash ha spiegato un metodo quasi identico per creare box arrotondati con i CSS basati su codice semanticamente corretto. Thrash e Madsen hanno sviluppato indipendentemente i loro metodi; entrambi gli autori riconoscono l'influenza nei loro metodi di Douglas Bowman, Sliding Doors of CSS (20 ottobre 2003) e Sliding Doors of CSS II (30 ottobre 2003). Nota: in gdesign.it è presente la traduzione in italiano di Sliding Doors of CSS.

Indipendentemente da questo anche un designer di AListApart, Brian Alvey, ha perfezionato un metodo differente per realizzare gli angoli arrotondati che potete vedere su Weblogs, Inc.

^Top

Dai un voto a questo articolo:   HITS: 4556 | VOTI: 1 | MEDIA VOTI: 10.0    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 7