CSS  »  Articoli  »  Effetti con CSS 

A distanza di più di un'anno dalla prima versione dei Nifty Corners Angoli arrotondati senza immagini, e dopo la Nifty Corners: miglioramenti e nuove funzionalità, eccoci arrivati alla terza versione. Dopo una breve introduzione alle novità introdotte rispetto alle precedenti e i riferimenti per l'uso dello script, presenteremo diversi esempi in cui non si sono usate immagini per gli angoli arrotondati, ma solo Javascript e CSS. Cominciamo subito.

Le novità

Sono diverse le novità introdotte nei Nifty Corners Cube, che in generale sono stati pensati per essere più versatili e semplici da usare. Basti pensare che dei quattro parametri nella prima versione e cinque nella seconda, nella terza versione si usano solo due parametri di cui uno opzionale.

Vediamo brevemente le novità:

• non è più necessario specificare i colori, che vengono ora rilevati automaticamente;
• i Nifty Corners sono ora più semplici da integrare nel processo di design, grazie al fatto che il padding (sia verticale che orizzontale) viene preservato. Unica limitazione è che il padding deve essere specificato in pixel;
• è possibile usarli più facilmente con altri script;
• sono disponibili ora tre dimensioni: piccoli (2px), medi (5px) e grandi (10px);
• è stato migliorato/esteso il supporto per i selettori CSS usati come parametro;
• sono state introdotte le Nifty Columns, ovvero le false colonne senza sfondo;
• basta ora una sola riga nella sezione head per linkare l'intera libreria: il CSS per i Nifty Corners viene infatti caricato tramite lo script stesso;
• sono ora rilasciati sotto licenza.

Insieme a molte novità, che scopriremo attraverso diversi esempi, due inversioni di tendenza rispetto alla precedente versione. Il supporto per Internet Explorer 5.0 è stato definitivamente abbandonato, ma la compatibilità con gli altri browser stata mantenuta: tutti gli esempi dell'articolo sono stati testati con successo su IE 5.5, IE6, IE7 beta 2, Opera 8.5, Firefox 1.5 e Safari 2.0. Gli utenti IE5.0, come quelli con Javascript disabilitato, vedranno comunque la pagina senza angoli arrotondati.

Ho dovuto abbandonare i Nifty Corners con bordi: si sono rivelati un po' problematici nella versione 2, e non sono riuscito ad integrarli in questa nuova versione per problemi di resa su IE.

Nifty Corners 3: introduzione

Siamo così pronti a presentare il primo esempio: si tratta di un div con angoli arrotondati grazie ai Nifty Corners. Per chi non avesse letto gli articoli precedenti, i Nifty Corners sono una soluzione per ottenere angoli arrotondati senza immagini, ma solo con CSS e Javascript. In particolare, questa terza versione si compone di tre parti essenziali:

• Un file Javascript
• Un file CSS
• Le chiamate Javascript specifiche della pagina

In quanto ai primi due punti, i file esterni non necessitano di modifiche e andranno copiati nella stessa cartella della pagina HTML. C'è da evidenziare che basterà linkare il file Javascript che si occuperà, se i Nifty Corners possono girare, di aggiungere automaticamente il CSS esterno necessario. Se guardate il codice HTML dell'esempio, l'unica referenza a file esterni è infatti la seguente riga:

<script type="text/javascript" src="Niftycube.js"></script>

Per quanto riguarda il terzo punto, ecco il codice HTML della pagina, con Javascript incorporato, per ottenere un div con angoli arrotondati:

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

In grassetto ho riportato la parte variabile dello script, che sarà la parte che andrà modificata secondo le esigenze e costituisce la chiamata alla funzione Nifty. Questa riceve due parametri che sono il vero punto di forza dei Nifty Corners. Vediamoli da vicino.

Altri articoli

Altre guide

Altre newsletter