Share
Mentre i CSS3 si sviluppano sul Web, stanno portando con sé alcune interessanti nuove tecniche di presentazione. Oggi esamineremo le basi dell'utilizzo di transizioni e animazioni CSS3 per aggiungere un ulteriore livello di lucidatura.
Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.
Per iniziare, lavoreremo con alcune tecniche di base: in primo luogo una semplice modifica del colore del testo quando un utente si posiziona su un elemento specificato.
a color: # 000; a: hover color: # f00;
Qui, cambiamo il colore del testo in rosso al passaggio del mouse. Ora, con un po 'di CSS3, possiamo creare un aspetto molto più morbido sfumando gradualmente il colore.
a color: # 000; -webkit-transition: color 1s ease-in; a: hover color: # f00;
Abbiamo aggiunto la proprietà css, -webkit-transition. Si noti che il prefisso -webkit specifica che ciò funzionerà solo nei motori Webkit o Safari e Chrome. Fortunatamente, anche altri browser moderni hanno le loro implementazioni. Una dichiarazione completa che copra tutti i browser potrebbe essere simile alla seguente:
a color: # 000; -webkit-transition: color 1s ease-in; -moz-transition: color 1s ease-in; -o-transizione: facilitazione del colore 1s; transizione: facilitazione del colore 1s;
Tieni presente che, per questo tutorial, ci concentreremo esclusivamente sull'implementazione del webkit. Dopo la dichiarazione della proprietà, abbiamo i valori "color 1s eas-in". Questa è la dichiarazione abbreviata; i tre valori rappresentano:
In questo caso, effettuiamo la transizione usando easy-in, che inizierà la transizione lentamente e accelererà la transizione.
Un altro uso basilare dei cambiamenti di stato è di cambiare lo sfondo di una casella di input su focus.
input.ourInputBox: focus -webkit-transition: background-color 0.5s linear; sfondo: #ccc;
Questa volta, abbiamo inserito la dichiarazione di transizione nello stato di passaggio del mouse, in modo da non aggiungere ulteriori classi inutili al CSS. Applichiamo la transizione una volta che la casella di input acquisisce lo stato attivo.
Le transizioni CSS sono in realtà relativamente semplici da aggiungere alla funzionalità di hover esistente e offrono al tuo sito quella lucidatura extra per i browser che supportano CSS3.
Per fare un passo in più, possiamo anche passare più proprietà CSS usando le versioni a mano lunga della transizione CSS3.
a.thebg color: # 000; sfondo: # f00; padding: 5px; -webkit-border-radius: 5px; -webkit-transition-property: color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; a.thebg: hover color: # f00; background: # 000;
Questa volta, lo sfondo e il colore del testo cambiano al passaggio del mouse, quindi possiamo scegliere come target entrambe queste proprietà con la nostra transizione. Abbiamo semplicemente diviso la transizione: prima abbiamo -webkit-transition-property e separiamo i diversi valori con una virgola. Pertanto, miriamo rispettivamente al colore e alle proprietà dello sfondo.
-webkit-transition-property: colore, sfondo;
Quindi impostiamo la durata della transizione utilizzando:
-webkit-transition-duration: 1s, 1s;
Questi sono referenziati nello stesso ordine della prima affermazione; questa volta, tuttavia, entrambi i valori sono impostati su 1 s.
Infine, impostiamo la funzione di temporizzazione e impostiamo due valori diversi: il primo, lineare, si riferisce alla nostra prima variabile dichiarata - colore; e il secondo si riferisce allo sfondo variabile.
Quindi, abbiamo impostato il colore su una variazione lineare di un secondo e lo sfondo su come eseguire lo smooth-in nello stesso periodo di tempo.
Le transizioni di CSS3 iniziano a diventare uniche quando sono combinate con altre nuove proprietà CSS.
Puoi esaminare esempi di utilizzo di elementi e transizioni sovrapposte su For a Beautiful Web di Andy Clarke.
Creiamo un semplice esempio di animazione di un segno pop-out.
Per prima cosa creiamo il riquadro di delimitazione del segnavia e gli diamo un contesto di posizionamento relativo per garantire che possiamo posizionare gli oggetti assolutamente al suo interno.
#signpost width: 60px; altezza: 196px; position: relative;
Ora mettiamo la scatola sulla pagina e inseriamo i pezzi del nostro segno al suo interno.
Successivamente, il post viene posizionato con uno z-index di due, per posizionarlo sopra il segno.
#post width: 79px; altezza: 196px; z-index: 2; position: relative;
Ora, aggiungiamo il segno, posizionato sotto il post, e lo ruotiamo con la proprietà di trasformazione CSS3.
#sign height: 46px; larghezza: 80px; position: absolute; cima: 10; a sinistra: 60; -webkit-transform-origin: 0 0; -webkit-transform: ruotare (86 gradi); z-index: 1; -webkit-transition: -webkit-transform 0.5s easy-in-out;
Il segno viene ruotato usando -webkit-transform: ruota (86deg), ed è posizionato sotto il post. Per garantire che il segno ruoti attorno al punto corretto, dobbiamo cambiare il trasformare l'origine nell'angolo in alto a sinistra: 0, 0.
Impostiamo la transizione per cambiare la proprietà -webkit-transform su 0,5s con un profilo easy-in-out, e al passaggio del mouse, ruotiamo il segno di nuovo verso il suo orientamento originale.
#signpost: hover #sign -webkit-transform: ruotare (0deg);
Lo facciamo sul #signpost contenente: hover anziché su hover del simbolo #sign.
Ora possiamo legare tutto questo insieme, usando le animazioni del webkit, che ci danno il potere di eseguire cose come la rotazione continua.
Iniziamo creando due immagini circolari e posizionandole all'interno di un div contenitore, come abbiamo fatto con il cartello sopra.
#circles width: 180px; altezza: 180px; position: relative; .outercircle width: 180px; altezza: 180px; position: absolute; z-index: 1; inizio: 0: a sinistra: 0; .middlecircle width: 90px; height: 90px; position: absolute; z-index: 3; top: 45px; a sinistra: 45px;
Ora dobbiamo definire le animazioni; gireremo i cerchi in direzioni opposte, quindi abbiamo bisogno di impostare due animazioni.
@ -webkit-keyframes spin da -webkit-transform: ruotare (0deg); a -webkit-transform: ruotare (360 gradi); @ -webkit-keyframes spinrev from -webkit-transform: ruotare (0deg); a -webkit-transform: ruotare (-360 gradi);
All'animazione viene dato un nome per riferimento, in questo caso "spin" e "spinrev". Quindi, li assegniamo a a e a partire dal valore; quindi ruotiamo l'immagine da 0 gradi a 360 gradi utilizzando la trasformazione webkit e a -360 per il contrario.
Ora assegniamo questa animazione agli stati di passaggio del mouse. Nota che, se lo avessimo assegnato allo stato normale, l'animazione sarebbe stata eseguita immediatamente quando la pagina è stata caricata.
#circles: hover .outercircle -webkit-animation-name: spin; -webkit-animation-iteration-count: infinito; -webkit-animation-timing-function: lineare; -webkit-animation-duration: 10s; #circles: hover .middlecircle -webkit-animation-name: spinrev; -webkit-animation-iteration-count: infinito; -webkit-animation-timing-function: lineare; -webkit-animation-duration: 5s;
Facciamo riferimento al nome dell'animazione creato in precedenza (-webkit-animation-name: spin;). Quindi dichiariamo il numero di volte in cui vogliamo che l'animazione sia eseguita (-webkit-animation-iteration-count: infinito;). In questo caso, l'infinito lo manterrà in tondo e rotondo mentre il div #circles è sospeso.
Successivamente impostiamo la funzione di temporizzazione (-webkit-animation-timing-function: linear;), e, infine, impostiamo una durata per ogni iterazione - in questo caso, saranno dieci secondi (-webkit-animation-duration: 10s ;), e cinque per una rivoluzione completa.
Una volta che tutto funziona, dovremmo considerare i nostri utenti che stanno navigando senza browser Web compatibili con CSS3. Ciò è facilmente ottenibile utilizzando una libreria JavaScript come Modernizr, che aggiunge classi all'elemento HTML relativo alle funzionalità del browser.
Utilizzando l'esempio del post sign sopra, i browser che non supportano le trasformazioni CSS non inseriranno correttamente il segno sotto il post; in modo che possiamo indirizzare questi browser e semplicemente nascondere il segno fino a quando non è aleggiato sopra.
.no-csstransforms #signpost #sign display: none; .no-csstransforms #signpost: hover #sign display: block;
È semplice come collegare allo script Modernizr, trovare il nome di classe appropriato e quindi creare un'istruzione CSS separata per quell'istanza.
È tutto per ora. Spero ti sia piaciuto! Fatemi sapere se avete domande / commenti qui sotto!
Accentsconagua