All Articles Web
Amusez-vous avec CSS3 Transitions
Toby Pitman on Mon, July 25th | 0 comments
If you are curious about how to create visual nice and responsive roll over effects with transitions in CSS3 then stop here. Toby Pitman, shows you how to implement some very neat CSS3 tricks.

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



Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: