CSS tip #1 – Angoli arrotondati
Scritto da Salvo il 9 dicembre 2008 con 3 commenti
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 [...]...
- 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 [...]...
- CSS Tip #14 – Testo su più colonne Uno dei casi più comuni nel design CSS è quello di suddividere del testo in più colonne, con gli standard attuali l’unico modo “rapido” per ottenere l’effetto è quello di [...]...
Riguardo Salvo...
Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.
Se ti e' sembrato utile perche' non mi offri un caffe'?
Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!
Volevo segnalarti nei vari Browser anche epiphany che usa come motore sia MOZILLA che GECKO ed ora stanno lavorando anche alla versione WEBKIT , sfortunatamente esiste solo per sistemi linux