CSS3 è davvero iniziando a raccogliere slancio con molti dei comandi descritti nella bozza di lavoro CSS3 supportata da Firefox, Safari e Google Chrome. Abbiamo pensato di mettere insieme alcuni dei nostri preferiti. Prima di iniziare CSS3 comandi richiede una sintassi specifica del browser per loro di lavorare.

Per Mozilla Firefox abbiamo bisogno di usare il prefisso-moz-, ad esempio:

-Moz-border-radius:

E per il Safari-webkit-prefix, ad esempio:

-Webkit-border-radius:

1. Raggio di confine

Il comando di bordo CSS3 raggio crea angoli curvi su un elemento. Invece di usare 4 o più immagini per creare angoli curvi utilizzare i seguenti comandi:

/ * Per Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * Per Safari e Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Box ombra

Un'ombra può essere applicata agli elementi utilizzando il comando ombra CSS3 box. L'ombra scatola accetta tre valori numerici più un colore da applicare questo effetto. Questi numeri sono i seguenti:

1. Distanza di offset orizzontale di ombre - Un valore positivo indica l'ombra getterò a destra e un valore negativo per la sinistra
2. Distanza di offset verticale d'ombra - Un valore positivo indica l'ombra gettato sotto e un valore negativo sopra
3. Come ci si mosse come l'ombra

Con l'aggiunta di un valore di colore dell'ombra è completa:

/ * Per Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Per Safari e Google Chrome * /
-Webkit-box-shadow: 5x 5px 5px # b6ebf7;

3. Trasparenza o RGBA

La trasparenza è sempre stata difficile. Diversi browser storicamente hanno applicato la trasparenza usando diversi comandi. Continuando questo cross-browser incoerenza abbiamo l'aggiunta del nuovo fondo di proprietà CSS3 RGBA, però in linea di principio questo comando è più logico. Il comando è composto da 4 valori - il primo, secondo e terzo sono valori del rosso, verde e blu (0-255), rispettivamente seguita dal canale alfa o trasparenza (0-1).

Per il comando RGBA i prefissi browser specifico (-moz-,-webkit-) non sono necessari:

# {Box3
background-color: RGBA (110, 142, 185, .5);
}

Il comando colore di sfondo aggiunge un bel colore blu-grigio sfondo a .5 o 50% di opacità nei browser che capire le proprietà CSS3 RGBA.

Purtroppo Internet Explorer tenterà anche di rendere il comando colore di sfondo, ma non capisco RGBA. Per garantire che il colore di sfondo è impostato in IE un IE-only hack è necessario. Nell'esempio seguente l': last-child pseudo-selettore che Internet Explorer non riesce a capire è usato per escluderla.

corpo: last-child {# box3
/ * Escludere tutti i browser IE usando: last-child * /
background-color: RGBA (110, 142, 185, .5) importante;
}

4. Colonne

La possibilità di aggiungere colonne è stato aggiunto a CSS3. Invece di elementi flottanti all'interno di contenitori possiamo impostare il numero di colonna, la larghezza e la regola:

/ * Per Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-gap: 20px;
-Moz-column-rule: 1px solid # 6e8eb9;

/ * Per Safari e Google Chrome * /
-Webkit-column-count: 2;
-Webkit-column-gap: 20px;
-Webkit-column-rule: 1px solid # 6e8eb9;
}

5. Immagini di sfondo multiple

Immagini di sfondo è sempre stata restrittiva quando si tratta a causa del fatto si può solo applicare una immagine di sfondo per ogni elemento CSS. Questo non è il caso di CSS3 che permette di immagini multiple per ogni elemento semplicemente li virgola di separazione.

Per inserire un'immagine sia sul destro e sinistro di un elemento è possibile utilizzare i seguenti comandi, con un po 'di stile:

padding: 0 20px;
}

Questo comando sarà mis-resi da Internet Explorer in quanto non accetta 2 immagini di sfondo in un singolo elemento. Un escludere tutti trucco IE è richiesto.

# Box5 blockquote {
/ * Per tutti i browser, solo un preventivo aperto * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

corpo: last-child # box5 blockquote {
/ * Escludere tutti i browser IE usando: last-child * /
/ * Poi le due immagini * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Sfondo gradienti

Gradienti sfondo CSS3 sono estremamente flessibili e possono essere utilizzati per creare modelli complessi. Nella forma più semplice il gradiente CSS lineare permette un gradiente da applicare ad un elemento dall'alto verso il basso e da sinistra a destra.

Questo esempio di un gradiente di CSS3 in Mozilla Firefox si applica un gradiente di luce blu sul fondo di una scatola appena il 20% delle caselle 'altezza

Safari utilizza un approccio meno intuitivo ma più flessibile, utilizzando i valori di interruzione di colore. Un esempio di codice specifico Safari segue (notare il lineare è incluso tra parentesi invece che fuori):

# {Box8
sfondo:-webkit-gradiente (lineare, in basso a sinistra, in alto a sinistra, colore-stop (0, # b6ebf7), colore-stop (0,20, # fff));
}

7. Rotazione

CSS3 permette anche la rotazione degli elementi con il comando di trasformare, con la proprietà di ruotare gradi accettando come parametro.

<code> # {box9
-Moz-transform: rotate (2DEG);
-Webkit-transform: rotate (2DEG);
} </ Code>

8. Contorni

Outilines sono inclusi nella specifica CSS3 e permettono sia un bordo e uno schema da applicare ad un singolo elemento.

La proprietà schema è identico al comando di confine. L'ulteriore proprietà di offset permette tuttavia il confine da spostare ulteriormente all'interno o all'esterno di un elemento.

Archiviato in: Css da admin