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
-moz-
/* Esempio */
-moz-border-radius:
-webkit-
/* Esempio */
-webkit-border-radius:
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;
}
border-radius
non è supportato da Internet Explorer.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:
- Distanza di offset orizzontale dell’ombra – Un valore positivo significa che l’ombra si getterà a destra, e un valore negativo sulla sinistra;
- Distanza di offset verticale dell’ombra – Un valore positivo significa che l’ombra si vedrà sotto, e sopra con un valore negativo;
- 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;
}
box-shadow
non è supportato da Internet Explorer.
/*
* Per il comando RGBA i prefissi per i browser
* specifici -moz-,-webkit- non sono necessari.
*/
#box3 {
background-color: rgba(110, 142, 185, .5);
}
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.
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;
}
#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 2
Colonna numero 3
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;
}
#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
box model
e l’ordine del box model
è sempre stato importante e poco intuitivo.
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 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;
}
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;
}
outline
e di border
permette l’uso di due colori diversi di per i bordi.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%);
}
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));
}
gradient
può contenere molti color-stop
, che consente la creazione di modelli complessi.transform
, con la proprietà di ruotare l’elemento accettando i gradi come parametro.
#box9 {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
}
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;
}
transition-property
#box10 a:hover {
color: #0f0;
-moz-transition-property: color;
-webkit-transition-property: color;
}
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;
}
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;
}
Ci sono molti altri modi per animare gli elementi e il progetto di lavoro per le transizioni CSS3 lo descrive in dettaglio.
Ancora nessun commento