X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Premium Accesso libero

Accedere alla nostra libreria di articoli Hub Premium, file di progetto e il primo 10% di ogni tutorial-video dalla libreria di tutorial online .

Crea un account gratuito ora!

Divertirsi con CSS3 Transizioni
Tradotto da Google Translate

Sembra che i produttori di browser sono davvero spingendo CSS3 nuove caratteristiche attraverso ad un ritmo piuttosto veloce, nonostante CSS2.1 appena essere stato

Anche se è CSS3 anni di distanza dall'essere concluso i browser più moderni che sono stati di attuazione per un po '. In questo piccolo trucco Ill vi mostrerà un roll-over pulito poco effetto usando CSS3 transizioni.


Fase 1

Ho alcuni tag molto semplici qui. Solo una lista non ordinata con alcuni link in:


Ive mettere il tag link all'interno di alcuni tag span puramente per la compatibilità all'indietro. So che la sua non strettamente semantico, ma se si vuole che questo lavoro in IE6 (Scuote pugno!) Questo è il modo youll necessità di segnare in su come IE6 (Scuote pugno!) Non capire: hover su qualcosa di diverso collegamento tag. Per IE7 youll necessario assicurarsi di dichiarare un doctype per: hover a lavorare su non-link elementi. Patetico, lo so!

Ive applicato alcuni stile semplice per fare una barra orizzontale di navigazione.


Questo è il risultato:


Ive applicata display: inline; per i tag lista per evitare alcuni problemi di layout in IE6 (Scuote pugno!).


Fase 2

Ora Im andando ad applicare un'immagine di sfondo per i miei tag link:


Questo è il risultato:


So che questo sembra un po 'strano, ma abbiate pazienza. L'immagine è posizionata utilizzando la regola di fondo stenografia.

di fondo: ;


Fase 3

Ora posso lo stile del tag span.


Questo è il risultato.


Youll notare che l'immagine di sfondo del tag link 'è ora nascosta dal colore di sfondo del tag span che è seduto su di esso. Il tag span è anche più piccolo 20px in altezza rispetto al tag link. Questo è importante!


Fase 4

Ora Ill applicare la: hover regola al mio tag link. In questo modo il collegamento tag immagine di sfondo per spostare verso il basso 10px, essenzialmente rivelando quando il mouse sopra il link.


Questo è il risultato.


A questo punto si sta essenzialmente nella modalità di sicurezza. Il markup corrente dovrebbe funzionare in tutti i browser conosciuti. Qualsiasi codice io aggiungo da ora in poi sarà CSS3 e supporto variano da browser a browser.


Fase 5

Ora Ill aggiungere la mia CSS3 regola di transizione per i tag link.


Heres come funziona.

transizione:

tutti (si applicano a tutte le proprietà CSS di questo elemento)

0,3 s (il tempo per il passaggio)

lineare (la curva di tempi di transizione)


Ora qualsiasi modifica le proprietà del tag link (al passaggio del mouse) sarà di transizione senza problemi al suo nuovo valore. Vale a dire la posizione di fondo e il colore del testo.

Youll notare anche che ci sono un bel paio di prefissi venditore per le transizioni CSS. Ogni browser implementa attualmente questo effetto in modi diversi quindi abbiamo bisogno di indirizzare il maggior numero possibile.


-Moz-= Mozilla Firefox

-Webkit-= Safari, Chrome

-O-= Opera


Una volta che questo è finalizzato diventerà semplicemente transizione.


Fase 6

Infine Ill aggiungere un po 'curve veloci arrotondati.


Questo è il risultato:


Compatibilità

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


Conclusione

Questo concetto può essere applicato a carichi di roll-over. Nel download sotto youll trovare alcuni esempi tra cui questo effetto in cui quando si tira su un album che mostra il formato CD, vinile con un bel passaggio.


SCARICA SPECIALI CSS3 esempi.

Gioca su e divertirsi un po '



Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link