Lavora con noi

Web design

Siti tematici

Speciali

Web Design » Articoli » Web design

Pagine:

RSS

Nifty Corners: miglioramenti e nuove funzionalità

di: Alessandro Fulciniti 17 Aprile 2006

Esempio 7: un menu a tab, con bordi

Nel settimo esempio ho realizzato un semplice menu a tab, che avevamo già visto nello scorso appuntamento. Questa volta, in più, ci sono i bordi oltre che la trasparenza esterna. Vediamo la chiamata:

Rounded("div#nav li","top","transparent","#BEFF9A","border #508F0F");

Esempio 8: un menu fatto a foglie

l'esempio otto mostra come con poche modifiche al CSS e al Javascript dell'esempio precedente si può ottenere un menu un po' particolare e decisamente accattivante. Vediamo la chiamata:

Rounded("div#nav li","tr bl","transparent","#9ABEFF","border #3562B1");

Esempio 9: una galleria di immagini

Anche Il nono esempio è stato già in parte trattato nello scorso appuntamento. In questo caso ci sono due significativi miglioramenti. Il primo è che gli angoli arrotondati hanno l'antialising, mentre il secondo e più importante è l'uso nel CSS di un padding verticale di 5px che lasceremo rimuovere dallo script. Questa opzione ci consente di eliminare il saltino che si produce dopo il caricamento della pagina e quando lo script entra in azione. Vediamo la chiamata:

Rounded("div#minipics li","all","#C7C7F2","#FFF","smooth");

Da notare che per utilizzare al meglio questa caratteristica bisognerà impostare via CSS un padding verticale di 5 pixel se vorremo utilizzare i Nifty Corners a dimensione normale, 2 pixels se vogliamo ottenere gli angoli arrotondati piccoli.

Esempio finale

Arriviamo così all'esempio finale, un layout interamente basato sui Nifty Corners. In questo caso che ho tolto il Javascript (e il CSS) incorporato nella pagina per lasciare nella sezione head solo i link a file esterni. Ecco ora l'intera sezione:

Rispetto agli altri esempi la presenza di un secondo file Javascript esterno, che ho indicato qui sopra in grassetto. Il suo contenuto è semplicemente quello che finora abbiamo visto incorporato nella pagina, ovvero le chiamate per ottenere i Nifty Corners sugli elementi che vogliamo arrotondare. È infatti una buona pratica in situazioni reali tenere in file esterni CSS e Javascript. Vediamo il contenuto di layout.js:

window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#header","bottom","#D6DEEC","#84B7FF","smooth");
Rounded("div#header h1","bottom","#84B7FF","#657DA6","small smooth");
Rounded("div#content","tl bottom","#D6DEEC","#FFF","smooth");
Rounded("div#nav","tr bottom","#D6DEEC","#95B3DE","smooth");
Rounded("div#sidenotes","all","#D6DEEC","#B1C0D5","smooth");
Rounded("form","all","#D6DEEC","#B4CEF7","smooth");
Rounded("blockquote","tr bl","#FFF","#CDFFAA","border #88D84F");
Rounded("div#relax","all","#FFF","transparent");
Rounded("div#footer","all","#D6DEEC","#CCCCCC","small border #fff");
}

Tra le cose da notare, il modo in cui si sono ottenuti bordi arrotondati spessi nell'header usando la funzione Rounded sull'header e sull'h1 al suo interno. Ho lasciato i colori come utlime regole CSS, così sarà facile modificarli insieme ai colori del file Javascript. Di questa pagina ho preparato anche la versione senza Javascript, che è la base di partenza dell'esempio finale, così da mostrare come la pagina senza i Nifty Corners renda comunque bene.

Conclusioni

La versione qui presentata è decisamente più versatile e robusta rispetto a quella presentata nello scorso appuntamento. A questo punto, credo che sia una versione definitiva. Buon divertimento!