Lavorare con gli strumenti di alimentazione CSS3

CSS3 è una delle nuove tecnologie web più interessanti disponibili per gli sviluppatori web in questo momento. Utilizzando alcune delle sue numerose funzionalità, è possibile riprodurre gli effetti che avresti potuto fare in precedenza in Photoshop, con il codice CSS che è più manutenibile, più veloce da caricare e alla moda con le ultime tendenze. Continua a leggere per conoscere gli strumenti energetici disponibili e come combinarli per produrre gli effetti grafici più avanzati.

CSS3 ha molte caratteristiche, ma alcune di esse sono indispensabili per imparare se stai per riprodurre effetti di tipo Photoshop. Io chiamo questi miei "utensili elettrici". Includono quanto segue:

  1. Border Radii
  2. Box Shadows
  3. Ombre di testo
  4. Sfumature
  5. Sfondi multipli

Ognuna di queste funzionalità può aiutare a sostituire alcune delle immagini che potresti aver creato in Photostop in passato. In questo modo, stai rendendo il tuo sito web più gestibile dal momento che puoi modificare una proprietà semplicemente modificando il file CSS piuttosto che modificando un'immagine in Photoshop. Stai anche caricando il tuo sito web più velocemente poiché le immagini utilizzano molta larghezza di banda. Esploriamo queste funzionalità una per una.


Power Tool # 1: Border Raggio

Supporto per browser:

  • Safari: 3.2+
  • Firefox: 3.0+
  • Cromo: 3.0+
  • Musica lirica: 10.5+
  • Internet Explorer: 9.0+

Ormai, probabilmente hai sentito parlare di border-radius un milione di volte. È super facile da usare ed è supportato da tutti i browser moderni. Se non lo sai già, il raggio di confine è un modo per creare angoli arrotondati con CSS: non sono necessarie immagini! Diamo un'occhiata alla sintassi.

 -webkit-border-radius: size; -moz-border-radius: size; border-radius: dimensione;

Esistono tre sintassi che è necessario utilizzare. Il primo è per i browser basati su Webkit, come Safari e Chrome; il secondo è per i browser basati su Mozilla, come Firefox; e l'ultima è la versione non prefissata, per i browser che la supportano, inclusi IE9, Opera e Safari 5.

L'applicazione di un raggio di 10 pixel al bordo di un div crea il seguente effetto:

OK, facile! Passiamo al prossimo strumento elettrico.


Power Tool # 2: Box Shadows

Supporto per browser:

  • Safari: 3.2+
  • Firefox: 3.5+
  • Cromo: 3.0+
  • Musica lirica: 10.5+
  • Internet Explorer: 9.0+

Le ombre di casella sono un'altra funzionalità ben supportata. La loro sintassi assomiglia a questo:

 -webkit-box-shadow: offset_x offset_y blur_radius color; -moz-box-shadow: offset_x offset_y blur_radius color; box-shadow: offset_x offset_y blur_radius color;

Ancora una volta dobbiamo usare i prefissi dei fornitori per Webkit e Mozilla. Il primo e il secondo parametro della proprietà box-shadow sono le posizioni di offset dalle coordinate sinistra e superiore dell'elemento. Impostando un valore positivo su queste proprietà si sposta l'ombra a destra e in basso rispetto all'elemento e l'impostazione di un valore negativo sposta l'ombra a sinistra e in alto rispetto all'elemento. Il blur_radius è la quantità di sfocatura che vuoi aggiungere alla tua ombra (quanto difficile o sfocato lo vuoi). Infine, l'ultimo parametro è il colore che vuoi che sia l'ombra. Aggiungere un'ombra al nostro div arrotondato utilizzato in precedenza creerà un bell'aspetto.

 -webkit-box-shadow: 5px 5px 10px # 555; -moz-box-shadow: 5px 5px 10px # 555; box-shadow: 5px 5px 10px # 555;

Un'altra caratteristica precisa delle ombre delle finestre CSS è la parola chiave inset. Quando la parola chiave inserita è presente, l'ombra viene visualizzata all'interno della casella anziché all'esterno. Questo può creare un bell'aspetto depresso soprattutto per i pulsanti. Ecco come sarebbe il nostro div con un'ombra inserita.

 -webkit-box-shadow: 0 0 20px # 333 inserto; -moz-box-shadow: 0 0 20px # 333 inserto; box-shadow: 0 0 20px # 333 inserto;

L'ultima caratteristica delle ombre di casella che vale la pena menzionare è la possibilità di avere più ombre sullo stesso elemento. Questo è molto utile e può eliminare il markup extra nel tuo codice HTML solo per applicare un'ombra aggiuntiva. Tutto ciò che devi fare per creare più ombre è separarle con virgole. Ecco un esempio:

 -webkit-box-shadow: 0 0 20px # 333 inserto, 20px 15px 30px giallo, -20px 15px 30px lime, -20px -15px 30px blu, 20px -15px 30px rosso; -moz-box-shadow: 0 0 20px # 333 inserto, 20px 15px 30px giallo, -20px 15px 30px lime, -20px -15px 30px blu, 20px -15px 30px rosso; box-shadow: 0 0 20px # 333 inserto, 20px 15px 30px giallo, -20px 15px 30px lime, -20px -15px 30px blu, 20px -15px 30px rosso;

Power Tool # 3: Text Shadows

Supporto per browser:

  • Safari: 3.2+
  • Firefox: 3.5+
  • Cromo: 3.0+
  • Musica lirica: 10.1+
  • Internet Explorer: Spero che arrivi presto!

Le ombre di testo sono come ombre di riquadri, tranne che sono ombre per il testo piuttosto che per l'intero elemento. Fortunatamente, non è necessario il prefisso del venditore per l'ombreggiatura del testo.

 text-shadow: offset_x offset_y blur_radius color;

Le opzioni per l'ombreggiatura del testo sono le stesse di box-shadow, tranne per il fatto che non è presente il supporto per l'ombreggiatura del testo integrato. Ecco una demo che fa apparire il testo altrimenti invisibile fuori dalla pagina.

 color: #fff / * text text to white * / text-shadow: 0 0 50px # 333;

Questo crea il seguente effetto:

Come con le ombre di riquadri, è possibile avere più ombre di testo semplicemente separandole con virgole. Ecco un esempio che crea un effetto testo fiammeggiante.

 text-shadow: 0 0 4px #ccc, 0 -5px 4px # ff3, 2px -10px 6px # fd3, -2px -15px 11px # f80, 2px -18px 18px # f20;

Le ombre di testo possono creare effetti straordinari e possono integrare molto bene altri effetti.


Power Tool # 4: gradienti

Supporto per browser:

  • Safari: 4+
  • Firefox: 3.6+
  • Cromo: 5+
  • Musica lirica: Spero che arrivi presto!
  • Internet Explorer: Spero che arrivi presto!

Le sfumature sono una delle funzionalità più potenti a tua disposizione se vuoi creare questi fantastici effetti. Anche se il supporto completo del browser non è ancora presente, puoi sempre fornire stili di fallback ai browser senza supporto. Ricorda: i siti web non hanno bisogno di apparire uguali in tutti i browser. Esistono due tipi di gradienti che è possibile creare: gradienti lineari e gradienti radiali. Come ci si potrebbe aspettare, i gradienti lineari si muovono lungo una linea retta ei gradienti radiali girano attorno a un cerchio. Le sfumature possono essere utilizzate ovunque potresti aver usato un'immagine in passato, ad esempio per lo sfondo, l'immagine di bordo o elenchi puntati.

Sfortunatamente per gli sviluppatori web ci sono due diverse sintassi: una per Mozilla e un'altra per Webkit.

Sintassi per Webkit

Safari e Chrome utilizzano entrambi il motore di rendering Webkit, quindi utilizzano sempre la stessa sintassi. La loro sintassi del gradiente è piuttosto semplice:

 -webkit-gradiente (,  [, ]?,  [, ]? [, ] *)

Webkit utilizza la stessa sintassi per i gradienti sia lineari che radiali. Basta cambiare il genere parametro per passare da uno all'altro.

Sintassi per Mozilla

Firefox utilizza sintassi separate per i gradienti lineari e radiali, entrambi molto diversi dalle controparti Webkit.

 -moz-linear-gradient ([ || ,]? ,  [, ] *) -moz-radial-gradient ([ || ,]? [ || ,]? , [, ] *)

Diamo un'occhiata a queste sintassi separatamente.

Gradienti lineari

Per semplicità, ecco la sintassi di un Webkit solo per i gradienti lineari.

 -webkit-gradient (lineare, start_x start_y, end_x end_y, stop, stop ...)

La sintassi di Firefox ha questo aspetto.

 -moz-linear-gradient (angolo start_x start_y, stop, stop ...)

Nella sintassi Webkit start_x e start_y parametri specificano la posizione iniziale del gradiente e end_x e end_y specificano la posizione finale del gradiente. Puoi utilizzare uno qualsiasi dei valori di dimensione CSS standard, comprese le percentuali, nonché le parole chiave a sinistra, in alto, in basso, a destra e al centro come valori per questi parametri di posizione. Le soste sono un modo per specificare specifici colori da utilizzare in punti specifici lungo il gradiente. Puoi avere il numero di interruzioni di colore che vuoi, ma devi averne almeno due: un colore iniziale e finale. Per ulteriori interruzioni di colore, è possibile utilizzare la funzione color-stop () che fornisce una posizione come percentuale o decimale compreso tra 0 e 1, nonché un colore. Per esempio: color-stop (50%, nero) creerebbe una fermata del colore nero esattamente a metà del gradiente. Piuttosto che scrivere 0% e 100% per i colori iniziale e finale, esistono le funzioni di convenienza da () a (). Tutto quello che devi fornire a questi è il colore.

La sintassi di Firefox è molto meno diretta e ha molti modi per raggiungere lo stesso obiettivo. L'unica cosa che è statica riguardo alla sintassi sono i fermi colore, che sono solo un colore seguito da una posizione in percentuale. Per le posizioni iniziale e finale, puoi lasciare 0% e 100% e se lasci la posizione su una qualsiasi delle altre interruzioni di colore, queste vengono distribuite uniformemente in tutto il gradiente. A differenza della sintassi Webkit, la sintassi di Firefox non ha una posizione finale, solo una posizione iniziale e un angolo. Il gradiente si estenderà dalla posizione iniziale all'angolo specificato. Se lasci uscire l'angolo, si esaurirà perpendicolarmente da quel punto. Se si omette il punto di partenza tutti insieme, il gradiente verrà eseguito dall'alto verso il basso. Questa sintassi è un po 'confusa e un po' meno flessibile della semplice sintassi di Webkit, quindi è meglio imparare dall'esempio.

Ecco un semplice esempio di gradienti CSS in azione. Questo gradiente va dall'angolo in alto a sinistra all'angolo in basso a sinistra (in altre parole, dall'alto verso il basso) e dal rosso al bianco.

 -gradiente webkit (lineare, in alto a sinistra, in basso a sinistra, da (rosso) a (bianco)); -moz-linear-gradient (rosso, bianco)

Impostando questo come proprietà di background di un div, otteniamo il seguente risultato:

Aggiungendo un fermo colore e cambiando l'angolo del gradiente, possiamo ottenere un effetto diverso.

 -gradiente webkit (lineare, in alto a sinistra, in basso a destra, da (rosso), color-stop (50%, bianco), a (rosso)); -moz-linear-gradient (sinistra in alto, rosso, bianco, rosso);

Gradienti radiali

Ecco la sintassi per i gradienti radiali in Webkit.

 -webkit-gradient (radiale, inner_circle_center_x inner_circle_center_y, inner_circle_radius, external_circle_center_x outer_circle_center_y, outer_circle_radius, stop, stop ...)

La sintassi di Firefox ha questo aspetto.

 -moz-radial-gradient (center_x center_y, dimensione della forma, stop, stop ...)

La sintassi di Webkit è un po 'più complicata della sintassi del gradiente lineare, ma gli stessi principi si applicano ancora. I gradienti radiali in Webkit hanno due cerchi: un cerchio iniziale e un cerchio finale. Si specificano le posizioni X e Y centrali per ciascuno di questi cerchi insieme ai loro raggi. Infine, specifica che il colore si arresta nello stesso modo in cui lo hai fatto per i gradienti lineari.

La sintassi di Firefox per i gradienti radiali è simile alla sintassi per i gradienti lineari in quanto tutte le sue parti, ad eccezione delle interruzioni di colore, possono essere tralasciate. È possibile specificare le posizioni X e Y centrali del gradiente in modo simile alle coordinate del cerchio interno nella sintassi Webkit, ma in Firefox non esiste un cerchio esterno. Invece puoi specificare una forma e una dimensione del gradiente. La forma può essere un cerchio o un'ellisse, il cui ultimo non è attualmente possibile creare in Webkit. La dimensione accetta molte parole chiave diverse, ma non una dimensione in pixel come ci si sarebbe potuti aspettare. Puoi leggere ciò che ciascuna di queste costanti fa su Mozilla Developer Center. Per questo tutorial, utilizzeremo solo i valori predefiniti. Ancora una volta, se lasci le posizioni X e Y centrali, si presume che siano il centro dell'oggetto che stai riempiendo con una sfumatura. Se si omette la forma e la dimensione, si presume che il gradiente sia un cerchio che riempie l'intera scatola.

 -gradiente webkit (radiale, centro centro, 0, centro centro, 50, da (bianco), a (rosso)); -moz-radial-gradient (bianco, rosso)

Se applichiamo questo gradiente allo sfondo di un div, questo è ciò che otterremo.


Strumento di alimentazione n. 5: più sfondi

Supporto per browser:

  • Safari: 3.2+
  • Firefox: 3.6+
  • Cromo: 3.0+
  • Musica lirica: 10.5+
  • Internet Explorer: 9.0+

Gli sfondi multipli semplificano la creazione di effetti complessi nei CSS senza la necessità di creare markup aggiuntivi nel codice HTML. Avere supporto per questo significa che gli elementi possono avere più sfumature e sfondi di immagini insieme al colore di sfondo standard. Non c'è differenza nella sintassi di più sfondi da singoli sfondi: solo la virgola li separa e si parte!

Ecco un esempio di un div con uno sfondo sfumato e un bel effetto texture usando un'immagine:

 background: url (noise.png), -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, da (# 999), a (# 333)); background: url (noise.png), -moz-linear-gradient (# 999, # 333);

Dobbiamo dichiararlo due volte poiché, come abbiamo appreso, esiste una diversa sintassi del gradiente per ogni browser. Questo crea il seguente effetto:


Combinare la potenza: costruire un fantastico pulsante CSS3

Ora che abbiamo a disposizione cinque grandi utensili elettrici, combiniamoli per produrre un effetto ancora più impressionante.

Ci sono così tanti diversi tipi di pulsanti che puoi scegliere di progettare. Per essere semplici, emuliamo qualcosa che esiste già: lo stile del pulsante Mac OS X..

Inizieremo con il nostro codice HTML per questa demo. È davvero piuttosto semplice, solo due DIV e del testo.

 
Pulsante

Ora inizieremo con il nostro CSS di base. Per prima cosa, modelliamo il pannello.

 .panel background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (#bbbcbb), a (# 959695)); background: -moz-linear-gradient (#bbbcbb, # 959695); background-color: # b7b9b7; larghezza: 100 px; 

Il pannello è solo un bel contenitore per il nostro pulsante. Ha una sfumatura che va dall'alto verso il basso tra due bei colori grigi. Per quei browser che non supportano i gradienti, viene fornito un colore di sfondo di fallback.

Ora, diamo un'occhiata al CSS per il pulsante attuale.

 .pulsante display: blocco in linea; margine: 20px; imbottitura: 3px 6px; famiglia di font: 'Lucida Grande', Arial, sans-serif; dimensione del font: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid rgba (0, 0, 0, 0.6); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (#fbfcfb), a (# 9d9e9d)); background: -moz-linear-gradient (#fbfcfb, # 9d9e9d); background-color: # c0c2c0; text-shadow: rgba (255, 255, 255, 0.4) 0px 1px; -webkit-box-shadow: rgba (255, 255, 255, 0,4) 0 1px; -moz-box-shadow: rgba (255, 255, 255, 0,4) 0 1px; box-shadow: rgba (255, 255, 255, 0.4) 0 1px; -webkit-user-select: none; -moz-user-select: none; cursore: predefinito; 

C'è una quantità decente di codice qui, che utilizza tutti gli strumenti di alimentazione che ho descritto sopra, ad eccezione di più sfondi. Ci sono diverse sezioni di questo codice, che prenderemo uno per uno. Le prime due righe sono solo alcune semplici informazioni di layout. Impostazione del pulsante da visualizzare: il blocco in linea consente di estendere automaticamente il contenuto, indipendentemente dal testo inserito nel pulsante. La sezione successiva fornisce alcune informazioni sui font al pulsante. Infine, nella terza sezione, useremo il nostro primo strumento di potere: il raggio di confine. Nel caso del nostro bel bottone, gli diamo un bel raggio di 3px. Quindi diamo il pulsante a un bordo. Si noti che stiamo usando rgba come colore qui. Questo ci permette di rendere il colore parzialmente trasparente come facciamo qui, creando un bel colore grigiastro. Nella prossima sezione di codice, impostiamo lo sfondo del pulsante. Diamo uno sfondo sfumato e una tinta unita per il fallback nei browser che non supportano ancora i gradienti. Successivamente, utilizziamo l'ombreggiatura del testo per rendere il testo leggermente inciso nel pulsante. Ancora una volta usiamo rgba qui per dare un bianco parzialmente trasparente all'ombra del testo. La sezione di codice finale della penna crea un'ombra di casella. Ora, questo in realtà non sembra un'ombra, in realtà sembra un secondo bordo, ma dà una bella evidenziazione alla parte inferiore del pulsante per farlo sembrare inciso sullo sfondo e complimenta con il colore del bordo. Questo è un trucco utile per sapere se vuoi che qualcosa appaia come se avesse più bordi: io la uso molto. Infine, l'ultima sezione del codice CSS è un bel trucco che impedisce la selezione del testo nei browser basati su Webkit e Firefox, e imposta il cursore sulla freccia predefinita piuttosto che sul cursore di selezione del testo.

Finora, questo codice rende il nostro pulsante simile a questo:

OK, quindi non troppo male! Passiamo all'aspetto depresso del pulsante.

 .pulsante: attivo background: # B5B5B5; -webkit-box-shadow: rgba (255, 255, 255, 0,4) 0 1px, nero 0px 1px 3px inset, rgba (0, 0, 0, 0,4) 0px -5px 12px inserto; -moz-box-shadow: rgba (255, 255, 255, 0,4) 0 1px, nero 0px 1px 3px inset, rgba (0, 0, 0, 0,4) 0px -5px 12px inserto; box-shadow: rgba (255, 255, 255, 0,4) 0 1px, nero 0px 1px 3px inset, rgba (0, 0, 0, 0,4) 0px -5px 12px inserto; text-shadow: rgba (255, 255, 255, 0.3) 0px 1px; 

Quando il pulsante viene premuto, cambiamo un numero di cose. Per prima cosa, impostiamo lo sfondo su un colore semplice, rimuovendo il gradiente che avevamo impostato per il paraolio. Questo perché creeremo l'aspetto depresso con un'ombra di riquadro anziché una sfumatura. La prossima cosa che facciamo è impostare l'ombra, o piuttosto le ombre multiple. La prima ombra nell'elenco è la stessa che avevamo nello stato normale: l'evidenziazione nella parte inferiore del pulsante. La seconda e la terza ombra sono quelle che fanno sembrare premuto il nostro pulsante. La prima di queste è un'ombra nera inserita che si trova dall'alto a 1 pixel e ha 3 pixel di sfocatura, un'ombra dall'aspetto piuttosto scuro. L'ultima ombra è anche nera, ma un nero leggermente trasparente che viene impostato dai 5 pixel in basso con 12 pixel di sfocatura. Questo crea l'aspetto scuro sulla parte inferiore del pulsante quando viene premuto. L'ultima cosa che dobbiamo fare quando questo pulsante viene premuto è solo ridurre l'opacità dell'ombra del testo di una tacca in modo che non risulti come un pollice irritato.

Questo è tutto! Il nostro pulsante è completo. Ecco come appare la versione compressa:


Conclusione

Sostituire le immagini con CSS3 ha molti vantaggi. Rende il tuo lavoro come uno sviluppatore web più semplice dal momento che non è necessario aprire Photoshop ogni volta che è necessario apportare modifiche all'interfaccia utente. Rende più veloce il tuo sito web o l'applicazione web poiché non è necessario scaricare così tante immagini pesanti. E ti consente di creare un'esperienza più ricca, interattiva e desiderabile per gli utenti in modo tale che continueranno a tornare per di più.

Ti lascerò un po 'di ispirazione di cose che potresti fare con CSS3. Questi non sono necessariamente gli esempi più reali del mondo, ma mostrano ciò che è possibile con un po 'di lavoro.

iPhone realizzato con Pure CSS3

Il primo demo, creato da Jeff Batterton, è un iPhone creato con puro CSS3 - nessuna immagine utilizzata. È molto impressionante, utilizzando gradienti CSS, ombre di testo, ombre di riquadri, transizioni e trasformazioni. Sfortunatamente, al momento sembra corretto solo nei browser basati su Webkit come Safari e Chrome. Potrebbe essere tuo compito far funzionare la demo in Firefox!

Pure icone CSS3 iOS

Un'altra demo, forse ancora più sorprendente, è stata scritta da Louis Harboe. È una ricreazione di alcune icone di iOS in puro CSS, e ricreazioni molto realistiche! Questa demo funziona anche solo con browser basati su Webkit. Se vuoi sapere come alcune di queste icone sono state riprodotte, puoi andare al blog di Louis Harboe dove descrive il processo.

Spero che questo articolo ti sia piaciuto! Sentiti libero di raggiungermi su Twitter, o lasciare i tuoi pensieri nei commenti!