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

Accès Premium gratuitement

Accédez à notre bibliothèque complète des articles Hub Premium, les fichiers projet et les premiers 10% de chaque Cours-vidéo de la Bibliothèque Didacticiel en ligne .

Créez votre compte gratuit!

Amusez-vous avec CSS3 Transitions
Traduit par Google Translate

Il semble que les éditeurs de navigateurs sont vraiment pousser de nouvelles fonctionnalités via CSS3 à un rythme assez rapide, malgré CSS2.1 seulement après avoir été

Même si CSS3 est des années avant de terminé la plupart des navigateurs modernes ont été l'œuvre pendant un moment. Dans cette astuce Ill vous montrer un roll-over joli petit effet en utilisant CSS3 Transitions.


Etape 1

J'ai quelques balisage très simple ici. Juste une liste non ordonnée avec quelques liens po:


Ive mettre les balises lien à l'intérieur des balises span purement pour la rétrocompatibilité. Je sais que c'est pas strictement sémantique, mais si vous voulez que cela fonctionne dans IE6 (Shakes poing!) Voilà comment youll besoin de le marquer en tant IE6 (Shakes poing!) Ne comprennent pas: hover sur autre chose que lien balises. Pour IE7 youll doivent s'assurer de déclarer un doctype pour: hover pour travailler sur des éléments non-lien. Pathétique, je sais!

Ive appliqué certains style simple de faire une barre de navigation horizontale.


Ceci est le résultat:


Ive appliquée display: inline; les balises de liste pour prévenir certains problèmes de présentation dans IE6 (Shakes poing!).


Etape 2

Maintenant Im allons appliquer une image de fond pour mes tags lien:


Ceci est le résultat:


Je sais que cela semble un peu bizarre mais en assument avec moi. L'image est positionnée en utilisant la règle de fond raccourci.

de fond: ;


Étape 3

Maintenant, je peux le style des balises span.


Ceci est le résultat.


Youll remarquerez que l'image de fond les balises lien 'est maintenant caché par la couleur de fond de la balise span qui est assis sur le dessus de celui-ci. La balise span est également 20px petit en hauteur que la balise de lien. Ceci est important!


Etape 4

Maintenant Ill appliquer le: hover pour règle de ma balise lien. Cela entraînera l'image de fond lien balises à descendre 10px, essentiellement le révéler quand vous passez la souris sur le lien.


Ceci est le résultat.


À ce stade, vous êtes essentiellement en mode de repli. Le balisage actuel devrait fonctionner dans tous les navigateurs connus. Tout code-je ajouter à partir de maintenant sera CSS3 et de soutien peuvent varier d'un navigateur à.


Etape 5

Maintenant Ill ajouter mon CSS3 règle de transition vers les balises lien.


Voici comment cela fonctionne.

transition:

tout (s'appliquent à toutes les propriétés CSS de cet élément)

0,3 s (le temps de la transition)

linéaire (la courbe de calendrier de la transition)


Désormais, tout changement dans les propriétés des balises lien (au survol) sera une transition en douceur à sa nouvelle valeur. À savoir la position de fond et la couleur du texte.

Youll Remarquez aussi que il ya un bon vendeur de quelques préfixes de Transitions CSS. Chaque navigateur implémente actuellement cet effet de différentes manières afin que nous devons cibler autant que nous le pouvons.


-Moz-= Mozilla Firefox

-Webkit-= Safari, Chrome

-O-= Opera


Une fois cela terminé, il deviendra tout simplement la transition.


Etape 6

Enfin Ill ajouter quelques virages rapides arrondie.


Ceci est le résultat:


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!!


Conclusion

Ce concept peut être appliqué à des charges de roll-over effets. Dans le télécharger ci-dessous youll trouver quelques exemples plus, y compris cet effet, où lorsque vous rouler sur un album, il vous montre au format CD, en vinyle avec une belle transition.


Téléchargement spécial CSS3 exemples ici.

Jouer au sujet et avoir du plaisir



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