5 miglioramenti della progettazione CSS3 che è possibile utilizzare oggi

Cascading Style Sheets (CSS) è il linguaggio del Web design, e la prossima generazione di proprietà di progettazione CSS non farà che mollare il bit da rilasciare.

Sei ansioso di iniziare a usarli, ma non sai da dove iniziare?

Sebbene molte delle nuove proprietà non siano ancora "ufficiali" , alcuni browser hanno già implementato molte delle caratteristiche delle future specifiche CSS Level 3.

Il problema è che molti browser, in particolare Internet Explorer, non lo hanno.

Il trucco per usare queste nuove funzionalità CSS3 è trattarle come miglioramenti del design .

Un miglioramento del design (di cui discuto nel mio nuovo libro Speaking In Styles: i fondamenti del CSS per i web designer ) è un tocco di eleganza che aggiungi al design del tuo sito che aumenta il suo fascino visivo senza diminuire la sua usabilità se lo stile non viene reso.

Questo può essere un richiamo insidioso, poiché esiste una linea sottile tra la valorizzazione e non la diminuzione dell'usabilità:

• Esempio di miglioramento della progettazione : utilizzo del raggio del bordo per arrotondare gli angoli del riquadro, creando un design più accattivante. Tuttavia, se gli angoli non sono renderizzati, il sito è ancora utilizzabile.
• Esempio di riduzione dell'usabilità del design : utilizzo di un valore di colore RGBA negli sfondi di elementi sovrapposti che devono essere tutti visibili, aspettandosi che gli elementi superiori siano semitrasparenti. Ciò renderà impossibile per alcune persone utilizzare il sito, diminuendo in tal modo l'usabilità della pagina.

Diamo un'occhiata a 5 diverse proprietà CSS3 con cui puoi iniziare a giocare in questo momento, a patto che tenga sempre presente che dovrebbero essere utilizzate solo per migliorare il tuo design e non essere considerate affidabili per l'usabilità del sito.

Questo è il design originale, prima di applicare qualsiasi miglioramento del design CSS3

1. Colori trasparenti

Browser di supporto : Apple Safari 4, Firefox 3.0.5, Google Chrome 1

RGBA ti consente di controllare l'opacità di un particolare riempimento colore, indipendentemente dal fatto che si tratti di testo, sfondo, bordi o colori dell'ombra.

L'impostazione della trasparenza del colore richiede che tu specifichi il valore del colore usando la notazione RGB - i valori esadecimali non sono consentiti - con un valore A aggiuntivo da 0 (trasparente) a 1 (opaco).

rgba(0-255,0-255,0-255,0-1)

Dovresti anche includere un semplice valore RGB o esadecimale come alternativa per gli altri browser da utilizzare:

.topbox {color: rgb(235,235,235);color: rgba(255,255,255,0.75);background-color: rgb(153,153,153);background-color: rgba(0,0,0,0.5);border-color: rgb(235,235,235);border-color: rgba(255,255,255,0.65);}

La buona notizia è che esiste anche una soluzione alternativa, almeno per i colori di sfondo, in Internet Explorer, che supporta i colori trasparenti utilizzando un filtro e stili condizionali:

Nota: A causa del fatto che WordPress non è stato in grado di visualizzare il codice sopra riportato nel contenuto di questo post, è stato incluso come immagine, pertanto sarà necessario digitare questo codice manualmente.

2. Angoli arrotondati

Browser di supporto : Apple Safari 3, Firefox 1, Google Chrome 1

Il raggio del bordo imposta la curvatura di ciascun angolo del riquadro, come se ci fosse un cerchio immaginario sull'angolo con un raggio specifico (r):

border-radius: r;

Anche se border-radius farà parte delle future specifiche CSS3, sia il Mozilla Project (Firefox) che il Webkit (Safari e Chrome) hanno implementato le proprie versioni che devono essere incluse per la massima compatibilità cross-browser:

-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;

Puoi anche impostare il raggio per gli angoli singolarmente:

3. Ombre di testo

Browser di supporto : Apple Safari 3, Firefox 3.0.5, Google Chrome 1

Aggiungi un'ombra sotto qualsiasi testo, controllando la sinistra / destra e l'offset su / giù, oltre al colore:

text-shadow: x y blur color;

Puoi combinare l'ombreggiatura del testo con un colore trasparente per controllare l'oscurità dell'ombra:

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

Puoi anche includere più ombre di testo semplicemente ripetendo i valori separati da una virgola:

text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);

4. Box Shadows

Browser di supporto : Apple Safari 4, Firefox 3, Google Chrome 1

L'aggiunta di un'ombra discendente a qualsiasi riquadro sullo schermo segue lo stesso formato dell'aggiunta di un'ombra di testo:

box-shadow: x y blur color;

Proprio come text-shadows, Mozilla e Webkit hanno implementato il proprio vocabolario in anticipo rispetto allo standard CSS finale:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);-moz-box-shadow: 0 0 10px rgb(0,0,0);box-shadow: 0 0 10px rgb(0,0,0);

Puoi aggiungere più ombre semplicemente includendo più valori separati da spazi:

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),15px -20px 20px rgba(255,0,0,.75);box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),15px -20px 20px rgba(255,0,0,.75);

5. Sfondi multipli

Browser di supporto : Apple Safari 1.3, Google Chrome 1

Includere più immagini di sfondo in un singolo elemento richiede semplicemente ulteriori set di valori da aggiungere alle proprietà dello sfondo, separate da virgole. Dovresti includere una singola immagine di sfondo come backup per altri browser:

background-image: url(astro-127531.png);background-image: url(astro-127531.png),url(Hubble-112993.png);background-repeat: no-repeat;background-position: bottom left;background-position: bottom left, top right;

BONUS SPECIALE

Ruota di tutto!

Browser di supporto : Apple Safari 4, Firefox 3.5, Chrome 1

Sebbene non faccia ancora parte delle specifiche CSS3, Webkit ha implementato la propria proprietà di trasformazione, che Mozilla sta seguendo con. La trasformazione può includere un numero di tipi di valore diversi, ma uno dei più interessanti e utili come un miglioramento del design è ruotato:

-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);

Aspetto come visto nei browser che non supportano CSS3 (es. Opera 9)

Guarda l'esempio di lavoro dal vivo (Richiede Safari 4+, Firefox 3.5+ o Chrome 1+)

Jason Cranford Teague è l'autore di Speaking In Styles: i fondamenti del CSS per i web designer . Scaricalo ora Amazon per il 27% di sconto sul prezzo di copertina.

Usi qualche miglioramento del design nei tuoi siti web? Per favore condividi i tuoi esempi con noi!

• ← Oltre 250 risorse per aiutarti a diventare un esperto di CSS
• Oltre 200 icone vettoriali esclusive gratuite: 'Primo' →