CSS3 sta davvero iniziando a prendere slancio con molti dei comandi descritti nel lavoro del progetto CSS3 supportato da Firefox, Safari e Google Chrome. Ho pensato di mettere insieme alcuni dei miei preferiti.

I primi

⤽
Prima di iniziare i comandi CSS3 richiedono una sintassi specifica per ogni browser.

Per il browser Mozilla Firefox abbiamo bisogno del prefisso -moz-
/* Esempio */
-moz-border-radius:
e per il browser Safari il prefisso -webkit-
/* Esempio */
-webkit-border-radius:

1. Raggio del bordo border-radius
⤽
Il comando border-radius in CSS3 crea angoli curvilinei su un elemento. Invece di usare quattro o più immagini per creare angoli curvi utilizzate i seguenti comandi:
#box1 {
	border: 1px solid #699;
	/* per Mozilla Firefox */
	 -moz-border-radius: 20px;
	/* per Safari & Google Chrome */
	-webkit-border-radius: 20px;
}
Il comando border-radius non è supportato da Internet Explorer.
2. Box ombreggiato box-shadow
⤽
Un’ombra può essere applicata a elementi utilizzando il comando CSS3 box-shadow. La box-shadow accetta tre valori numerici, più un valore esadecimale per il colore da applicare a questo effetto. I numeri sono i seguenti:

  1. Distanza di offset orizzontale dell’ombra – Un valore positivo significa che l’ombra si getterà a destra, e un valore negativo sulla sinistra;
  2. Distanza di offset verticale dell’ombra – Un valore positivo significa che l’ombra si vedrà sotto, e sopra con un valore negativo;
  3. Sfocatura dell’ombra.

Completiamo con l’aggiunta di un valore esadecimale per il colore dell’ombra:

#box2 {
	/* Non vincolanti per l'effetto ombra */
	border:1px solid #699;
	/* per Mozilla Firefox */
	-moz-box-shadow: 5px 5px 5px #b6ebf7;
	/* per Safari & Google Chrome */
	-webkit-box-shadow: 5px 5px 5px #b6ebf7;
}
Il comando box-shadow non è supportato da Internet Explorer.
3. Trasparenza o RGBA
⤽
La trasparenza è sempre stata difficile da omologare. Diversi browser storicamente hanno applicato la trasparenza utilizzando comandi diversi. Continuando questa incoerenza cross-browser abbiamo anche l’aggiunta della nuova proprietà CSS3 per lo sfondo che è il RGBA, che in linea di principio questo comando è più logico. Il comando è composto da quattro valori numerici – il primo, il secondo e il terzo sono i valori rossi, verdi e blu da (0-255), rispettivamente seguito dal canale alfa o trasparenza che va da (0-1).
/*
* Per il comando RGBA i prefissi per i browser 
* specifici -moz-,-webkit- non sono necessari.
*/
#box3 {
	background-color: rgba(110, 142, 185, .5);
}
Il comando colore di sfondo (background-color) aggiunge un bel colore di sfondo blu-grigio a 0,5 o 50% di opacità nei browser che interpreta bene la proprietà CSS3 per RGBA.

Il valore RGBA non è compreso da Internet Explorer

Purtroppo Internet Explorer tenterà anche di interpretare il comando per il colore di sfondo, ma non capisce il RGBA. Per garantire che il colore di sfondo sia impostato in IE uno hack, solo per IE-only, si fa necessario. Nell’esempio che segue lo pseudo selettore (:last-child) che Internet Explorer non riesce a capire è usato per escluderla.

#box3 {
	/* Per tutti i browsers */
	background-color: #6e8eb9;
}

body:last-child #box3 {
/* Esclude tutti i browsers IE che usano :last-child */
	background-color: rgba(110, 142, 185, .3)!important;
}
Il valore RGBA non è compreso da Internet Explorer
4. Colonne
⤽
La possibilità di aggiungere colonne è stata aggiunta da CSS3. Invece di elementi galleggianti all’interno di contenitori possiamo impostare il numero di colonna, la larghezza e la sua regola:
#box4 {
	/* Non obbligatorio per la proprietà della colonna */
	border: 1px solid #699;
	/* per Mozilla Firefox */
	-moz-column-count: 3;
	-moz-column-gap: 15px;
	-moz-column-rule: 1px solid #6e8eb9;
	/* per Safari & Google Chrome */
	-webkit-column-count: 3;
	-webkit-column-gap: 15px;
	-webkit-column-rule: 1px solid #6e8eb9;
}
Colonna numero 1
Colonna numero 2
Colonna numero 3
5. Immagini di sfondo multiple
⤽
Per le immagini di sfondo, quando si tratta di CSS, è sempre stata restrittiva poiché si può solo applicare un’immagine di sfondo per ogni elemento. Questo non è il caso di CSS3 che permette multiple immagini per ogni elemento semplicemente con la virgola come separatore o in inglese comma-separating.
Per disporre l’immagine sia sulla destra sia sulla sinistra di un elemento è possibile utilizzare, con un po’ di stile, con i seguenti comandi:
#box5 blockquote {
	background:url(img/quotel.gif) no-repeat 0 0, url(img/quoter.gif) no-repeat 100% 0;
	border:1px solid #699;
	padding:0 20px;
}
Questo comando non sarà reso da Internet Explorer giacché non accetta due immagini di sfondo su un singolo elemento. Un’esclusione a tutti IE con un o hack è richiesta.
#box5 blockquote {
/* Per tutti browsers, apre solo la virgoletta */
	background: url(img/quotel.gif) 0 0 no-repeat;
	padding: 0 20px;
}

Utilizzando le multiple immagini su un singolo elemento ha davvero cambiato la mia vita

Per garantire che lo sfondo sia impostato ci vuole uno hack solo per IE-only. Nell’esempio che segue lo pseudo selettore (:last-child) che Internet Explorer non riesce a capire è usato per escluderla.

body:last-child #box5 blockquote{
/* Esclude tutti i browsers IE che usano :last-child */
	/* Poi le due immagini */
	background: url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
}

Utilizzando le multiple immagini su un singolo elemento ha davvero cambiato la mia vita

Gli inseguitori
⤽
6. Dimensionamento box - modello vecchia scuola
⤽
Non potevo non includere questa in una top ten del CSS3 dei migliori consigli, letti in diversi forum, anche quelli nostalgici e accoglienti perché ci hanno fatto impensierire, non poco, su Internet Explorer 5. Ogni elemento della pagina è , ovviamente reso utilizzando il box model e l’ordine del box model è sempre stato importante e poco intuitivo.

Lo standard box model del W3C, che tutti abbiamo familiarità, è oggi una proprietà impostabile da un elemento utilizzando il seguente comando CSS3 box-sizing:content-box.
#box6 {
	width: 200px;
	padding: 10px;
	/* per Mozilla Firefox */
	-moz-box-sizing: content-box;
	/* per IE8 */
	box-sizing: content-box;
	/* per Safari & Google Chrome */
	-webkit-box-sizing: content-box;
}
Il contenitore DIV ha una larghezza di 200px e un padding di 10px; ciò significa che la sua larghezza totale è di 220px (larghezza del contenitore più il padding sinistro e il padding destro)

Il comando CSS3 box-sizing:content-box accetta anche border-box che pone il padding o l’imbottitura interna della larghezza, proprio come Internet Explorer 5!

#box6b {
	width: 200px;
	padding: 10px;
	/* per Mozilla Firefox */
	-moz-box-sizing: border-box;
	/* per IE8 */
	box-sizing: border-box;
	/* per Safari & Google Chrome */
	-webkit-box-sizing: border-box;
}
Il contenitore DIV ha anche una larghezza di 200px e un padding di 10px, ma il padding è all’interno dell’area del contenuto quindi la sua larghezza totale è di 200px.

7. Contorni
⤽
Outilines sono inclusi nella specifica CSS3 e permettono sia un bordo che un contorno d’applicare ad un singolo elemento.
La proprietà outline è identico al comando border. La proprietà aggiuntive offset permette tuttavia di spostare ulteriormente il bordo all’interno o all’esterno di un elemento.
#box7 {
	border: 1px solid #000;
	outline: 1px solid #699;
	outline-offset: -9px;
}
La combinazione di outline e di border permette l’uso di due colori diversi di per i bordi.

8. Sfondo gradienti
⤽
Gli sfondi gradienti in CSS3 sono molto flessibili e possono essere utilizzati per creare modelli complessi. Nella forma più semplice il gradiente CSS lineare permette un gradiente da applicare a un elemento dall’alto verso il basso e da sinistra a destra.
In questo esempio di gradiente CSS3 in Mozilla Firefox si applica un gradiente di luce blu sul fondo di un contenitore in appena il 20% di altezza.
#box8 {
	/* per Mozilla Firefox */
	background: -moz-linear-gradient(bottom, #b6ebf7, #fff 20%);
}
Safari utilizza un approccio meno intuitivo ma più flessibile, utilizzando i valori d’interruzione di colore. Il seguente è un esempio di codice specifico per Safari segue (notare che linear è incluso tra parentesi anziché all’esterno).
#box8 {
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}
Il comando gradient può contenere molti color-stop, che consente la creazione di modelli complessi.

9. Rotazione
⤽
CSS3 permette anche la rotazione degli elementi usando il comando transform, con la proprietà di ruotare l’elemento accettando i gradi come parametro.
#box9 {
	-moz-transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
}
Questo comando funziona bene come immagine ma il rendering del testo è scarso e estremamente difficile da leggere se si usa il testo di piccole dimensioni.

10. Animazione
⤽
E, infine, solo gli utenti con Safari o con Firefox 4 della versione beta hanno le transizioni. Le transizioni includono la rotazione, smorzando l’effetto in & out degli elementi e ha la possibilità di specificare quante volte lo fanno … e molto altro!
Un semplice esempio potrebbe includere, cambiando l’effetto hover di un collegamento, il modo in cui il colore cambia in modo uniforme da un colore all’altro.
Sia Safari sia Firefox 4 supportano questa funzionalità consistentemente.
In primo luogo definire un colore al link:
.box a {
	color: #0f0;
}
Impostare un colore e la proprietà per animarlo con transition-property
#box10 a:hover {
	color: #0f0;
	-moz-transition-property: color;
	-webkit-transition-property: color;
}
Quanto tempo deve durare l’animazione con transition-duration
#box10 a:hover {
	color: #0f0;
	-moz-transition-property: color;
	-webkit-transition-property: color;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
}
Che tipo di animazione deve essere usata (quali ease, linear, ease-in, ease-out e molto altro ancora!).
#box10 a:hover {
	color:#31801f;
	-moz-transition-property: color;
	-webkit-transition-property:  color;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-moz-transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
}
I link possono essere stilizzati per avere transizioni sottili utilizzando i comandi per transizioni in CSS.

Ci sono molti altri modi per animare gli elementi e il progetto di lavoro per le transizioni CSS3 lo descrive in dettaglio.

Conclusione
⤽
Spero che abbia trovato in questa top ten CSS3 consigli utili! Questi nuovi comandi CSS3 segnano una nuova era nel web design, nello sviluppo e nell’utilizzo di CSS3 possiamo guardare avanti per un Web con una gamma più vivace!

Quest’articolo è stato scritto grazie ad una collezione di appunti, in differenti lingue, trovate nella rete. E il suo scopo è di recuperarli, a portata di click, quando si è sotto progetto e non si ha tempo per navigare e scegliere quello che serve. Spero possa servire anche a voi!