Share
Durante questo rapido tutorial ci occuperemo dei concetti di Opacità e Trasparenza negli elementi HTML. Giocheremo con una serie di effetti che, prima di CSS3, potevano essere raggiunti solo utilizzando diverse immagini create in Photoshop.
Nota: Tutti i seguenti esempi sono stati testati su Mozilla Firefox, Safari e Chrome. Se vuoi ottenere qualcosa di simile in IE o in qualsiasi altro browser lascia un commento e sarò lieto di aiutarti.
In questo tutorial verranno utilizzati sfondi sfumati, ombre box e sfondi di immagini multiple, argomenti trattati nei primi due tutorial di questa serie:
Se hai mai utilizzato Photoshop o un pacchetto di grafica simile, avrai familiarità con Opacity Value. Questa magia funziona aumentando o diminuendo la trasparenza di qualsiasi elemento grafico in un valore percentuale, da 0% (Completamente invisibile) a 100% (Completamente visibile). Questa percentuale è il valore "Alpha", ti spiegherò come funziona più avanti nel tutorial.
CSS3 include la proprietà "opacità", pronta per essere implementata in tutti i browser moderni, ma come funziona? Immagina di avere tre elementi di Photoshop all'interno di una cartella, come mostrato nello screenshot seguente: un'immagine, una riga di testo e un quadrato solido su uno sfondo di un'immagine. L'immagine, il testo e il quadrato giallo si trovano all'interno di una cartella denominata "Sezione". Riducendo la percentuale di Opacità di quella cartella, tutti i livelli al suo interno appariranno più trasparenti.
Nei CSS3 le cose funzionano più o meno lo stesso. La Cartella è diventata un elemento contenitore HTML (un div, un paragrafo, una sezione, ecc.) Pertanto, alterando la proprietà "opacità" di quell'elemento (come in Photoshop) aumenterà o diminuirà la visibilità di tutti gli elementi al suo interno. Prendi, ad esempio, questo codice HTML:
Questo è un elemento opaco al 100%, tutto all'interno di questo tag è completamente visibile
Ora, vediamo il CSS per il markup precedente.
/ * Immagine di sfondo a tutta pagina * / body.image background-image: url (images / bg.jpg); posizione di sfondo: centro in alto; background-attachment: fixed; background-repeat: no-repeat; / * Opacity Test * / .opaque opacity: 1; .translucent60 opacity: 0.6;
Come vedi, cambiare l'opacità è davvero facile, ma quando lo useresti? Una tecnica molto efficace sta aumentando l'opacità sul : hover pseudoclasse:
.translucent_on_hover opacità: 0.4; .translucent_on_hover: hover opacity: 0.9;
Ma se vuoi un veramente effetto impressionante, puoi inserire alcune transizioni?
Un effetto di transizione interpola gli stati intermedi tra due stadi o istanze di qualsiasi stile di elemento HTML.
Per mantenere le cose semplici per ora, diamo un'occhiata al codice di base di un effetto di transizione (in un lasso di tempo di 1 secondo).
-webkit-transition: tutti gli anni easy-in-out;
-moz-transition: all-in-out tutti 1s;
-o-transition: tutti gli anni di easy-in-out;
-ms-transition: tutti 1s easy-in-out;
transizione: tutti 1s easy-in-out;
Suggerimento: Per garantire che non ti perdi nessuno dei vari prefissi del browser, controlla lo strumento Prefxr recentemente pubblicato da Jeffrey Way. Spacca.
Hai solo bisogno di allegare questa regola CSS all'elemento che desideri animare con un effetto di transizione, come questo:
.translucent_transition opacity: 0.4; -webkit-transition: tutti 1s easy-in-out; -moz-transition: tutti 1s easy-in-out; -o-transizione: tutti gli anni di easy-in-out; -ms-transition: tutti 1s easy-in-out; transizione: tutti 1s easy-in-out; .translucent_transition: hover opacity: 0.9;
Lo stile "easy-in-out" significa che la transizione di opacità avverrà al passaggio del mouse (aumentando l'opacità) e tornerà (diminuendo l'opacità) al valore originale quando il cursore si sposta all'esterno dell'elemento.
Ogni pixel di colore può essere creato combinando tre serie di valori: rosso, verde e blu, ognuno da 0 a 255.
Di solito utilizziamo valori esadecimali per i colori nei fogli di stile, ad esempio i colori di base:
Puoi ottenere gli stessi colori usando i valori RGB nei CSS, come segue: rgb (.
Un modo semplice per ottenere i valori RGB di qualsiasi colore è usando il Selettore colore di Photoshop, come mostrato nell'immagine qui sotto.
Quando si applica la proprietà "opacità" in CSS, si influisce sull'intero contenitore e su tutto il contenuto al suo interno. Questo è utile a volte, ma puoi volere solo avere lo sfondo trasparente e lasciare il testo e l'immagine al 100% opachi. Ecco di nuovo il valore "Alpha".
CSS3 ci consente di utilizzare un formato di colore RGB che include un quarto valore denominato Alpha. Questo non è un nuovo concetto, le immagini PNG utilizzano il canale alfa per impostare la trasparenza dei pixel su un'immagine su un valore compreso tra 0 e 1 (dallo 0% al 100%). Questo crea un effetto di trasparenza migliore rispetto alla gestione delle immagini GIF, in quanto impostano solo un valore visibile / invisibile ai pixel.
Prendi ad esempio il seguente grafico:
Si noti che sto solo cambiando l'opacità sul livello di sfondo giallo.
Per questo tipo di effetti c'è il "RGBA"(Rosso, verde, blu, alfa) valore del colore:
RGBA (
.opaco background-color: rgba (255, 150, 0, 1); / * Alpha = 1 significa 100% opaco * /
E se vuoi ridurre l'opacità dello sfondo per renderlo traslucido, è facile come cambiare l'ultimo valore sui parametri di colore rgba.
.traslucido background-color: rgba (255, 150, 0, .6); / * Alpha = .6 significa 60% opaco * /
Poiché il colore rgba si comporta come un classico colore esadecimale, è possibile utilizzarlo su uno sfondo a gradiente lineare.
.translucent_gradient background-image: -moz-linear-gradient (top, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (rgba (255, 150, 0, .9)), a (rgba (255, 150, 0, .1)) , color-stop (1, rgba (255, 150, 0, .1)));
E naturalmente puoi combinarlo con lo stile opacità per creare effetti di transizione gradevoli.
.translucent_transition opacity: 0.4; -webkit-transition: tutti 1s easy-in-out; -moz-transition: tutti 1s easy-in-out; -o-transizione: tutti gli anni di easy-in-out; -ms-transition: tutti 1s easy-in-out; transizione: tutti 1s easy-in-out; background-image: -moz-linear-gradient (top, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (rgba (255, 150, 0, .9)), a (rgba (255, 150, 0, .1)) , color-stop (1, rgba (255, 150, 0, .1))); .translucent_transition: hover opacity: 1;
Ora proviamo qualcosa di più complesso. Combineremo più sfondi di immagini usando la trasparenza, un effetto di opacità al passaggio del mouse e angoli arrotondati e ombre di riquadri per creare una sensazione di profondità.
Iniziamo con Photoshop, nelle risorse del tutorial troverai il PSD del seguente grafico:
Cercheremo di ottenere un risultato esatto usando solo stili CSS3. Ci saranno un paio di immagini di esempio per la miniatura sulle sezioni e uno sfondo di pattern (puoi creare il tuo). Questa volta ho usato bgpatterns.com per creare un'immagine ripetitiva.
Iniziamo con il markup HTML, niente di troppo complicato:
Trasparenza e opacità
Qualche testo qui
Trasparenza e opacità
Qualche testo qui
Ora la parte divertente, il CSS. Prima ripristina gli stili predefiniti, imposta la tipografia del corpo e imposta gli stili per la sezione wrapper:
/ * Reset * / html, corpo, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, forma, fieldset, tabella, th, td , img margin: 0; padding: 0; border: 0px; header, section, footer, aside, nav, article, figure display: block; / * Fine del reset * / body font-family: Arial, Helvetica, sans-serif; color: # 333; html height: 100%; / * Per aggiungere una sfumatura CSS3 a tutto il corpo della pagina devi impostare questa altezza su 100% * /. Wrapper margin: 0px auto; larghezza: 960px; padding: 60px 0px 60px 0px; .left text-align: left;
Quindi imposta lo sfondo del corpo, in pratica un'immagine ripetuta (puoi usare qualsiasi immagine tu desideri)
/ * Immagine di sfondo del corpo * / corpo altezza: 100%; background: url (images / bg.png); / * Immagine sfondo * /
Ora, imposteremo gli stili di un altro div wrapper chiamato "page", questo div avrà fondamentalmente la stessa larghezza e altezza della finestra del browser, e ancora più importante, aggiungeremo uno sfondo sfumato lineare usando i colori RGBA.
/ * Gradiente trasparente * / .pagina larghezza: 100%; height: 100%; background: -moz-linear-gradient (in alto, rgba (15,20,5,0.75) 0%, rgba (15,20,5,0) 50%, rgba (15,20,5,0,75) 100%) ; / * Gradiente trasparente * / sfondo: -webkit-gradiente (lineare, superiore sinistro, inferiore sinistro, da (rgba (15,20,5,0,75)), color-stop (0,5, rgba (15,20,5,0 )), a (rgba (15,20,5,0.75))); / * Gradiente trasparente * /
Ora, imposta lo stile della sezione contenitore, una casella d'angolo arrotondata con uno sfondo traslucido.
/ * Sfondo trasparente RGBA * / .container larghezza: 770px; padding: 15px; altezza: 460PX; margine: 0px auto; / * Sfondo traslucido * / sfondo: rgba (89, 113, 29, 0,5); / * Raggio bordo * / bordo: 1px solido # 71941D; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; / * Sbarazzarsi di Bleed * / -moz-background-clip: padding; -webkit-background-clip: padding-box; sfondo-clip: padding-box; / * Box Shadow * / box-shadow: 0px 0px 25px rgba (0,0,0,0,75); -moz-box-shadow: 0px 0px 25px rgba (0,0,0,0,75); -webkit-box-shadow: 0px 0px 25px rgba (0,0,0,0,75);
Sta iniziando a prendere forma. Ora imposta gli stili delle caselle di contenuto. Imposta la posizione, un effetto angolo arrotondato, uno sfondo traslucido sfumato e lo combineremo con un effetto hover aumentando l'opacità al passaggio del mouse (per abilitare gli effetti di transizione).
.box / * Position * / padding: 10px; margin-bottom: 20px; min-height: 200px; / * Sfondo sfumatura traslucido * / sfondo: -moz-linear-gradient (superiore, rgba (26,35,8,0), rgba (26,35,8,0,85)); / * Gradiente trasparente * / sfondo: -webkit-gradiente (lineare, superiore sinistro, inferiore sinistro, da (rgba (26,35,8,0.15)), a (rgba (26,35,8,0.85))); / * Gradiente trasparente * / / * Angoli arrotondati * / -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; / * Correggi il bleed * / -moz-background-clip: padding; -webkit-background-clip: padding-box; sfondo-clip: padding-box; / * Nascondilo un po 'fino a quando il mouse non supera * / opacità: 0.4; / * Abilita effetti di transizione * / -webkit-transition: tutti gli anni di easy-in-out; -moz-transition: tutti 1s easy-in-out; -o-transizione: tutti gli anni di easy-in-out; -ms-transition: tutti 1s easy-in-out; transizione: tutti 1s easy-in-out; .box: hover opacity: 1;
Ora aggiungiamo il tocco finale, per gli elementi HTML all'interno delle scatole. Puoi provare ad aggiungere più effetti agli elementi in modalità statica e al passaggio del mouse, questa volta creerò un'ombra di riquadro visibile sul tag "img" quando il mouse si trova sopra la sezione "scatola":
.box img float: left; margin-right: 20px; border: 1px solid # 71941D; .box: hover img box-shadow: 5px 5px 5px rgba (0,0,0,0.50); -moz-box-shadow: 5px 5px 5px rgba (0,0,0,0.30); -webkit-box-shadow: 5px 5px 5px rgba (0,0,0,0.30); .box h3 font-size: 14px; font-weight: bold; color: # 8eb548; text-transform: uppercase; padding-basso: 20px; .box p color: # c0cf9d; font-size: 11px; line-height: 150%;
E questo è tutto, vediamo come appare in un browser:
Non c'è limite a ciò che può essere fatto usando trasparenze e effetti di opacità combinati con altri stili CSS3. Provalo ora!
Accentsconagua
Questo è un elemento opaco al 100%, tutto all'interno di questo tag è completamente visibile 
