Bien que les modifications implémentées par CSS3 ne soient toujours pas prises en charge par tous les navigateurs, les fonctionnalités inter-navigateurs de ceux qui le prennent en charge peuvent être très pénibles, mais il est toujours amusant d'expérimenter et de voir ce qui est possible.
Dans ce bref tutoriel, nous allons nous rendre fous avec les transitions CSS3 de Webkit pour créer une page Web simple qui présente de très jolis effets de fondu de couleur.
Effet final
Afin que vous puissiez avoir une idée de la direction que nous prenons, voici une démonstration de l'effet final.
Comme vous pouvez le constater, nous utilisons les transitions CSS3 de Webkit pour modifier la couleur d'arrière-plan, la couleur du texte, la couleur du lien et la couleur du lien de survol afin de donner une touche de vie à une page Web autrement simple. Lorsque vous déplacez votre souris dans le rectangle, l’arrière-plan, la couleur du texte et la couleur du lien changent. Ensuite, survoler un lien déclenchera une autre transition de couleur pour le texte du lien.
Nous devrons nous en tenir à Webkit car les transitions de Firefox sont encore à venir (recherchez -moz-transition dans Firefox 3.7).
Transitions CSS3
Avant de commencer, examinons la syntaxe de base des transitions CSS3 que nous allons utiliser. Fondamentalement, les transitions Webkit spécifient trois éléments: la propriété à transformer, la durée de la transition et la fonction de minutage. Voici un exemple.
Dans l'exemple ci-dessus, nous avons choisi de faire passer la couleur de manière linéaire sur une période d'une seconde. La fonction de synchronisation contrôle la vitesse du changement sur la durée de la transition. Le choix de linéaire maintient le taux de changement constant tandis que le choix de l’intégration accélérera légèrement la transition au fur et à mesure de son avancement. Pour une explication détaillée des options de la fonction de chronométrage, consultez l'article de Webkit.org sur l'animation CSS.
L'exemple ci-dessus n'a sélectionné qu'une seule propriété pour la transition, mais nous pouvons également choisir de convertir plusieurs propriétés en une seule commande. Considérer ce qui suit:
Cet exemple sélectionne à la fois la couleur du texte et la couleur de l'arrière-plan (séparées par des virgules) pour une transition d'une seconde. La fonction de chronométrage de la couleur? la propriété est linéaire alors que le? fond? la propriété se voit attribuer la fonction easy-in.
Pour en savoir plus sur cet exemple, consultez l'article de NetTuts sur les transitions CSS3.
Mise en route: le HTML
La première chose à faire est de jeter un modèle XHTML vierge de base (nous aurions pu tout aussi bien utiliser HTML5, mais j'ai décidé de me concentrer sur une nouvelle technologie à la fois).
Une fois que votre modèle vide a été haché, ajoutez un seul div pour contenir le texte. Tapez ce que vous voulez dans cette zone, assurez-vous simplement d'ajouter quelques liens pour que vous puissiez obtenir le plein effet des transitions.
C'est tout! Comme je l'ai dit précédemment, nous construisons un exemple extrêmement simple, c'est donc tout le code HTML dont vous aurez besoin. J'ai donné un div classe au lieu d'un identifiant vous pouvez donc facilement ajouter d’autres zones à la page qui reprendront cette fonctionnalité.
CSS de base
Le code HTML n’a produit à ce stade qu’un seul paragraphe ennuyeux; nous nous en remettrons donc beaucoup à CSS pour rendre la page plus attrayante.
Pour commencer, nous allons ajouter un style de base directement au corps.
Ici, nous avons défini des styles de base pour l'arrière-plan, le conteneur de texte et les liens dans le conteneur de texte. Nous avons donné à l'arrière-plan une couleur gris très foncé, rendu le texte blanc et utilisé l'extrait de code Better Helvetica de Chris Coyier pour nous donner un joli texte fin.
Enfin, nous avons stylisé les liens de manière à ce qu’ils soient gris clair et qu’ils ne comportent aucune décoration de texte. Voici ce que vous devriez avoir à ce stade:
Nous allons ensuite développer la section textContainer en lui donnant une bordure fine et en l’alignant au centre de la page. Cette dernière partie (en centrant le tout sur la page) est accomplie en donnant une largeur à la div et en réglant la marge sur auto. Assurez-vous également d’aligner le texte au centre afin qu’il ne soit pas accroché du côté gauche du div.
Cela devrait vous donner l'aspect de base que vous avez vu dans la démo.
Ajout de la magie
Maintenant que notre page est stylée, nous souhaitons ajouter quelques transitions de couleurs pour rendre les choses plus vivantes. Le premier endroit où nous voudrons créer une transition est dans le conteneur principal textContainer. Nous utiliserons le même code que celui que nous avons vu dans l'explication des transitions CSS3 ci-dessus.
Cela définira une transition sur tout changement que nous apportons à la couleur? ou? fond? propriétés, en utilisant une seconde transition et deux fonctions de synchronisation différentes: linéaire et facilité d’entrée.
Ensuite, nous allons définir une transition vers le texte du lien afin que toute modification apportée à cette couleur déclenche une seconde transition.
Comme indiqué ci-dessus, ce code ne fera rien en soi. Cela permet de garder un œil sur les modifications apportées aux propriétés spécifiées. Lorsqu'une modification est apportée à cause d'autres commandes CSS, elle est remplacée par ces paramètres.
Le catalyseur
Lors de la configuration des transitions, vous avez besoin d'un événement pour déclencher la transition. En CSS, l’un des événements les plus simples et les plus courants est le survol. Bien que les événements de survol s’appliquent le plus souvent aux liens (ce que nous ferons), nous en appliquerons également un simplement à la div dans son ensemble, de sorte que la transition est déclenchée lorsque la souris entre.
Comme nous avons déjà configuré les commandes de transition, les événements de survol sont vraiment simples et n’utilisent que quelques lignes de code pour changer les couleurs. Nous aborderons d’abord l’événement Div Hover.
Cela fera en sorte que lorsque le curseur de quelqu'un entre dans la division, la couleur du texte passe au gris foncé et l'arrière-plan au blanc. Cependant, les couleurs de nos liens restent actuellement au même gris qu'avant le survol. Ajoutez le code suivant pour changer cela.
Cela le configure de sorte que lorsqu'un survol survient dans le .textContainer, tous les liens deviennent bleu clair. Enfin, nous souhaitons que la couleur du texte bleu clair s’assombrisse au fur et à mesure que vous la survolez.
Notez qu’il existe une grande différence entre .textContainer: survoler un et .textContainer a: survol. Le premier affecte la couleur du lien lorsque votre souris entre n'importe où dans la division et le dernier affecte la couleur du lien lorsque vous survolez uniquement les liens.
Cela termine notre CSS aussi. Maintenant, lorsque vous entrez dans la div avec votre souris, l’arrière-plan devrait progressivement virer au blanc, le texte doit virer au gris foncé et les liens au bleu clair. Ensuite, lorsque vous survolez un lien, celui-ci devrait progressivement devenir plus sombre.
Conclusion
J'espère que cet article a suscité quelques idées dans votre tête pour des choses amusantes à faire avec les transitions CSS. Faites-moi savoir dans les commentaires ci-dessous ce que vous avez pensé de l'effet global et comment vous pourriez l'améliorer. Assurez-vous également de partager tous les liens que vous avez avec d'autres exemples de transition CSS3.