Web Design  »  Articoli  »  Web design 

L'articolo sui Nifty Corners e la tecnica lì presentata, che consente, lo ricordiamo, di ottenere angoli arrotondati sugli elementi di una pagina senza usare immagini aggiuntive, ha ottenuto un riscontro eccellente e insperato: parlano da sole le citazioni e le riprese ricavabili da Google, ma anche su servizi come Technorati e del.iciou.us (ben 1345 segnalazioni). Spinto anche da questo feedback positivo, ho pensato di potenziare ulteriormente la tecnica, tentando di risolvere alcuni problemi e introducendo nuove funzionalità. Vediamole.

Le novità

Sono molte le novità aggiunte ai Nifty Corners. La prima e più importante è che è stato esteso il supporto dei browser, grazie ad un prezioso suggerimento sul CSS di Big John di PositionIsEveryThing: ora i Nifty Corners vanno anche su Internet Explorer 5.5 e, in parte, anche su IE5.

I Nifty Corners ora funzionano anche su pagine XHTML servite con il mime type application/xhtml+xml.

Un'altra novità importante è che ora è possibile scegliere quali angoli arrotondare. Gli altri miglioramenti consistono nella possibilità di avere anche la trasparenza all'interno, di avere angoli arrotondati con una leggera forma di antialiasing e di avere angoli arrotondati con bordi.

Guarderemo questi miglioramenti da vicino attraverso i dieci esempi che ho preparato. Ma prima, diamo uno sguardo al principio di funzionamento e a come usare la libreria Javascript per avere gli angoli arrotondati senza immagini.

Come funzionano i Nifty Corners

Come per la precedente versione, i Nifty Corners sono composti da quattro parti essenziali:

1. Un file CSS per gli angoli arrotondati a schermo
2. Un file CSS per nascondere gli angoli arrotondati a stampa
3. Un file Javascript che contiene la libreria per gli angoli arrotondati
4. Le chiamate Javascript per aggiungere gli angoli arrotondati su qualsiasi elemento di pagina.

Per la consultazione on-line, ho predisposto tre pagine HTML che riportano il codice CSS per lo schermo di niftyCorners.css, quello per la stampa di niftyPrint.css e il codice Javascript di nifty.js. Ovviamente sono anche disponibili per il download insieme agli esempi che vedremo. Questi tre file non necessitano di modifiche, e per attivare gli angoli arrotondati in qualsiasi pagina basterà linkarli nella sezione head con le seguenti righe:

<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>

In quanto alla quarta parte: questa è quella che vi consentirà di ottenere gli angoli arrotondati senza immagini su elementi di pagina HTML. Vediamo subito la funzione principale.

La funzione Rounded

Vediamo subito il primo esempio. Se osservate il codice, noterete che ho lasciato incorporato una parte del Javascript:

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");
}
</script>

La funzione NiftyCheck effettua un test sul supporto del DOM. Se questo è superato, la funzione Rounded viene richiamata. Questa ammette ora cinque parametri:

1. Un selettore CSS che indica su quali elementi applicare la funzione
2. Una stringa che indica quali angoli arrotondare
3. Il colore esterno degli angoli arrotondati
4. Il colore interno degli angoli arrotondati
5. Un quinto parametro facoltativo che conterrà le varie opzioni

Vediamoli nel dettaglio.

Altri articoli

Altre guide

Altre newsletter