Anche se, prima di utilizzare al pieno le nuove specifiche CSS 3 dovremo aspettare almeno un paio di anni, qualcosa possiamo utilizzare anche da subito ma ovviamente la cosa non è cosi semplice.
Il problema maggiore è che Internet Explorer 6 (ovviamente sempre lui..) ovviamente non supporta per nulla tale specifica e, visto che il 48% dei naviganti lo usa ancora, rende impossibile l’implementazione anche delle poche spefiche ad oggi utilizzabili.
Una possibile soluzione potrebbe essere quella di utilizzare queste nuove funzionalità nei browser che le supportano (Firefox , Safari che usano i prefissi -moz e -webkit), non pregiudicandone però l’usabilità in tutti gli altri.
Vediamo ad oggi cosa si può utilizzare delle nuove specifiche CSS3:
1. Bordi Smussati
Non so voi ma quante volte, sopratutto all’inizio, si impazzisce per creare dei perfetti bordi arrotondati? ecco, in soccorso arrivano i CSS3 con i rounded corners:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-border-radius: 20px;
Si possono modificare anche singolarmente:
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;
Potete usare questa specifica in Firefox, Safari and Chrome.
2. Immagini come bordi
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
Anche per questa funzione possiamo gestire singolarmente i bordi:
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-rightright-image
border-right-image
Queste funzioni sono supportate da Firefox (dalla versione 3.1 in su), Safari e Google Chrome.
3. Ombreggiatura al testo e ai contenitori
Finalmente possiamo creare le ombre senza aver bisogno di utilizzare delle immagini, niente più Photoshop almeno per questo.
Per ombreggiare un contenitore useremo quindi:
-webkit-box-shadow: 8px 8px 22px #333;
-moz-box-shadow: 8px 8px 22px #333;
box-shadow: 8px 8px 22px #333;
Per ombreggiare un testo useremo invece:
text-shadow: 2px 2px 5px #333;
Le prime due voci indentificano in pixel la dimensione dell’ombra rispettivamente sull’asse X e sull’asse Y, la terza voce indentifica la sfocatura ed infine la quarta voce il colore dell’ombreggiatura.
Questa specifica è supporta in Firefox (dalla versione 3.1 in avanti), Safari, Chrome (solo ombreggiatura su contenitori) and Opera (solo ombreggiatura sul testo).
4. Font personalizzati
Indubbiamente la mia preferita, non potete immaginare quante volte ho pensato “maledizione come starebbe bene questo sito con questo font” ma ovviamente bisogna scegliere un font “usabile, predefinito”.
Ora non più, con l’avvento delle specifiche CSS3 e la chiamata @font-face possiamo utilizzare qualsiasi font posizionato in una directory del nostro server.
Decisamente notevole.
Prima di tutto si richiama il font desiderato:
@font-face {
font-family:'MrFlockFont';
src: url('/font/MrFlockFont.otf') format('opentype');
}
Poi lo usiamo come se fosse un font classico:
H1{ font-family: ‘MrFlockFont’, Helvetica, Sans-Serif;}