Supporto alle nuove Specifiche CSS 3: Usiamole Subito!!!

Con le ultime versioni dei MIGLIORI browser in circolazione (Internet Explorer infatti continua a remare controcorrente... se va bene a lui e ai suoi utenti...), beh insomma stavo dicendo con le ultime versioni di questi browser è giunto il supporto alle specifiche CSS 3 (seppure non ancora definitive mi risulta) e così ho deciso di provarle subito.

Le CSS 3?

Si, ma che cosa sono le specifiche css? Cito da wikipedia:

Come dite? No, non ho preso la citazione dalla versione araba dell'enciclopedia ma da quella italiana. Detto in parole povere (e da uno non troppo esperto in materia) sono delle regole, delle proprietà che vengono attribuite agli oggetti presenti nel sito e che gli permettono di cambiare aspetto grafico. Non avete capito lo stesso? Beh allora chiedete a qualcuno più esperto di me!

Ok, e quindi?

Le CSS3 hanno delle nuove proprietà che permettono di migliorare ulteriormente l'aspetto grafico dei siti e in questo post parlerò di quelle che ho di recente introdotto nel sito.

I bordi arrotondati

Fino ad adesso per ottenere oggetti con gli angoli smussati c'era un solo modo: usare come sfondo immagini con il bordo arrotondato, ma da oggi basta aggiungere una riga alle regole dell'oggetto desiderato:

Edit (26/08/09): ho scoperto che in realtà bisogna aggiungere anche queste righe:

dove 10px sta ad indicare la dimensione del bordo arrotondato. E qui il risultato:

Box ruotati

Altra cosa che mi ha stupito è la possibilità di prendere questi oggetti e girarli su sè stessi:

in questo caso la proprietà funziona solo con alcuni browser (per la precisione quelli che usano come motore di rendering gecko o webkit, come firefox e chrome) ma penso che presto ne verranno supportati anche altri. Se notate rotate viene definito come parametro di una proprietà dal nome generico "transform": infatti questa proprietà può fare molto di più come "stirare" l'oggetto a piacimento, ma non avendolo usato nel sito (e non avendone ancora compreso il funzionamento appieno) non ne parlerò

Oggetti con le ombre

Addirittura è possibile aggiungere le ombre agli oggetti senza dover usare alcun programma di grafica con questo codice:

Anche in questo caso è necessario una riga per ogni motore di rendering, ma fermiamoci un attimo ad osservare i parametri:
inset serve a creare le ombre all'interno dell'oggetto ma è possibile crearle all'esterno omettendo questo parametro, i primi due px indicano di quanto l'ombra si deve spostare rispetto all'oggetto, il terzo px indica il grado di sfumatura, mentre l'ultimo parametro indica il colore dell'ombra (in questo caso nero).

Come si può notare il livello di personalizzazione è sbalorditivo e insieme alle caratteristiche delle precedenti versioni del CSS la pagina web rischia di diventare una vera e propria bomba esplosiva di effetti grafici magari senza dover nemmeno usare un programma di grafica, ma mi raccomando, usateli con parsimonia!!