CSS tip #1 – Angoli arrotondati

9 dicembre, 2008 - Tags: css tip, webdesign

Nel realizzare la nuova versione del mio sito ho voluto utilizzare una proprietà CSS un pò avanti sui tempi, (infatti la troveremo “ufficializzata” con i CSS3), ma che 2 motori di rendering web molto diffusi hanno gia deciso di utilizzare: il BORDER RADIUS.

Questa proprietà , in base al valore indicato, genera degli angoli arrotondati nei bordi del tag nel quale viene applicato, permettendo al designer di ottenere questo effetto nativamente da CSS e senza dover creare immagini di sottofondo con altri programmi di grafica da applicare agli oggetti interessati, con i conseguenti vantaggi in “malleabilità” dell’effetto e di minor peso in kilobyte per chi deve visualizzare la pagina (volete mettere una riga di codice contro uno più file immagini di sfondo? ).

Come ho anticipato prima però questa proprietà fa parte dello standard CSS3 che è ancora in fase di sviluppo, tuttavia i motori di rendering Gecko (sviluppato da Mozilla) e Webkit (sviluppato da Apple) hanno introdotto delle loro proprietà CSS specifiche per ottenere questo stesso effetto:

-moz-border-radius: 15px; /* Per i browser con base Mozilla(Gecko) */
-webkit-border-radius: 15px; /* Per i browser con base Webkit */
border-radius: 15px; /* Regola generale per CSS3 */

Se utilizzate un browser con supporto per i CSS3 potete vedere un’esempio live.

Attualmente l’unico problema è per chi utilizza browser che non supportano CSS3 o non hanno un motore di rendering di base Mozilla/Webkit (Attualmente sono: Internet Explorer 6 e 7, e Opera 9 – ma gia con l’alpha di Opera 10 è stato annunciato il pieno supporto di CSS3) che non vedranno i bordi arrotondati

Browser con motore MOZILLA: Firefox , Flock , Camino (solo per MacOS), Galeon, Conkeror, Songbird (Firefox integrato), SeaMonkey.

Browser con motore WEBKIT: Chrome (Google), Safari (Apple), Browser Web su sistemi mobili S60 (Symbian/Nokia), iCab, Midori.

Articoli correlati:

• CSS Tip #12 – Chi supporta i CSS3? Da qualche anno si dice che i CSS3 siano alle porte…. tuttavia la loro ufficializzazione non è ancora avvenuta e non si sa neanche quando avverrà. Ma nonostante tutto alcuni webdesigners li usano, merito principalmente di Mozilla e Apple che...
• CSS Tip #8 – “Vedo e non vedo”, ovvero: la trasparenza Le trasparenze sono un’effetto molto gradevole se ben utilizzato, tuttavia per creare simulazioni di trasparenza spesso si usa Photoshop e successivamente si esporta il tutto come immagine normale. Da qualche tempo ormai gran parte dei browser (per non dire tutti)...
• CSS Tip #9 – Css di Natale! In quest’edizione “speciale” dei Css tips, dedico qualche minuto a spiegare come ho scritto i Css per il “Christmas Pack 2009″. Come vedrete, molte delle proprietà che uso per inserire questi elementi nella pagina le abbiamo già incontrate in precedenti...