L'essentiel de Dreamweaver CC 2017

Appliquer des transitions

Testez gratuitement nos 1268 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dreamweaver propose une palette de transition CSS modeste. Malgré tout, vous réaliserez rapidement tout type de transition et, surtout, vous pourrez les modifier quand bon vous semble.
09:58

Transcription

Grâce au CSS, il est possible d'utiliser également des transitions. Il n'y a pas de timeline comme on pourrait l'avoir dans Flash ou dans Animate mais on va se retrouver aujourd'hui avec des possibilités assez importantes au niveau des CSS. Côté de Dreamweaver, on a une toute petite palette sans prétention qui nous permet de réaliser un grand nombre de transitions de manière très simple et très efficace. Vous allez voir. Je vais la coller ici, juste à côté du CSS Designer. J'ai préparé quatre petits carrés, quatre balises div : carré 1, carré 2, carré 3 et carré 4 qui vont nous servir à expérimenter cette palette et de voir un peu les possibilités que l'on nous permet d'atteindre. Pour l'instant, je vais simplement sélectionner une balise div, je vais venir du côté GLOBAL et on va créer un sélecteur de type div ici tout simplement. Sur ce div on va placer une largeur... Alors je vais passer en dur ici. Pour ça il suffit de double-cliquer sur la largeur, de taper 100px par exemple. Je valide avec la tabulation, je revalide avec Entrée, je redéfinis 100px de largeur, et je valide. On a tous les carrés, carrés div 1, div 2, div 3 et div 4 qui vont faire 100px de large. Ce qu'on va demander à ces carrés également, c'est de flotter. Pour leur flottaison, on va utiliser une flottaison gauche classique qui va simplement les mettre les uns à la suite des autres : deux, trois, et le quatrième, il n'y est pas assez alors on va juste donner un peu plus de place pour que le quatrième puisse passer. Maintenant on va s'adresser carré par carré pour pouvoir placer tout simplement une transition de manière distincte à chacun. On va venir ici, on va venir sur la carré 1. Sur le carré 1, dans ses propriétés, on va lui donner comme couleur d'arrière plan par un exemple un background-color qui sera dans les verts, tout simplement. En RGBa, parfait. On va commencer maintenant, à vouloir travailler avec les transitions sur ce carré. On va laisser tomber le CSS Designer et on va passer sur la palette des transitions. On va dire qu'on ajoute une transition et là la palette nous dit sur quelle cible veux-tu affecter cette transition ? On va l'affecter sur carré 1. On aurait pu aller sur tous les div par exemple : on est pas obligé d'aller forcément sur une classe. Là on va aller sur carré 1 et on va dire qu'on souhaite que cette transition soit affectée sur l'état de survol. On va demander « Même règle pour toutes les propriétés » et on va demander une durée d'une seconde. On pourrait utiliser des secondes ou des millisecondes donc ça pourrait être très rapide ou très lent. On va rester sur du lent : on va demander une seconde. Au niveau de la fonction de minutage, on va utiliser un ease-in-out ou on va utiliser un linear, c'est vous qui voyez. On va prendre un linear. Pour mieux comprendre chacune de ces easy, je vous invite à vous rapprocher de ce site : « easings.net/fr » où vous avez l'intégralité des ease qui sont définies ici. Linear veut dire qu'on va être complètement progressif ici, ça va être une fonction affine linéaire. Maintenant si vous regardez les possibilités que vous avez, si vous sélectionnez, vous avez le petit curseur qui nous donne le résultat avec l'accélération. Si vous cliquez sur l'élément, vous allez rentrer dans l'explication avec tous les détails et le mode de fonctionnement. Je vous invite à vous rapprocher de ce site pour comprendre chacune des fonctions de minutage. Ici sur la largeur, on va demander par exemple le width même si cette information est donnée ou pas donnée dans la règle initiale, on peut l'utiliser directement dans valeur de fin: 10 px. Et je vais demander de créer une transition. Maintenant, quand je vais venir survoler l'élément, vous voyez ici, vous avez le retour qui passe. C'est linéaire, c'est-à-dire qu'il n'y a pas d'accélération ni de départ. On aurait très bien pu venir dans la classe numéro 2 cette fois-ci placer une deuxième transition, et dire qu'on va affecter carré 2. Carré 2 n'existe pas donc on va venir dans le CSS Designer ici on va créer une nouvelle règle pour carré 2, et lui donner une couleur différente. Voilà. Je vais venir dans les transitions CSS et demander cette fois-ci .carre2 qui sera sur hover pareillement avec une durée de une seconde. Par contre, au niveau de la fonction de minutage, on va demander un ease-out. Là je vais toujours demander un width. Toujours 10px, pour voir cette différence, ici justement, avec l'accélération ou pas. Créer une transition. Regardez : si je viens créer celle-là, on voit bien que c'est linéaire. Et si je prends celle-là, il y a un ralentissement à la fin qu'on peut ressentir. On va pouvoir aussi jouer sur des propriétés très particulières. Regrardez : je vais venir dans le CSS Designer, on va définir un carré 3, et on va lui donner comme couleur d'arrière-plan une couleur qui serait dans les jaunes ici par exemple en RGBa. Je vais prendre volontairement du RGBa. Au niveau de la transition, on va créer une nouvelle transition sur .carre3 qui sera sur le hover toujours avec une durée d'une seconde. Fonction de minutage : je peux rester dans du linéaire, ce n'est pas gênant à ce niveau-là. Par contre au niveau de Propriété, je vais prendre background-color et je vais partir sur une couleur qui serait bleu et qui serait un HSLa, pourquoi pas. On n'est pas obligé, avec même de la transparence c'est bon. Et je vais la valider. Dès qu'on crée la transition, si on regarde bien, on va pouvoir faire des transitions sur des couleurs sans soucis. Pour le carré 4, on va créer cette classe. Parfait. On va lui donner une couleur d'arrière-plan qui serait dans les oranges. Hexadécimal, peu importe le type. On a vu que ce n'était pas gênant au niveau du type de couleur ici. Si maintenant, on vient sur la transition, on va demander dans cette transition d'avoir une transition sur .carre4, Je vais demander d'avoir sur le hover, une propriété qui pourrait être... Une durée d'une seconde, toujours, on va rester là dessus. Une propriété qui pourrait être un transform. Vous allez voir que peu importe l'ordre dans lequel on va définir ces valeurs, je pourrais demander par exemple, un scale. C'est un transform 2D, un scale. On aurait pu faire sur un transform 3D également mais là c'est un transform 2D que Dreamweaver me propose et je vais demander un scale de 0. Donc si je fais Créer une transition, quand je survole, vous avez que le départ part sur le scale, il n'y a pas de soucis. Mais si je refais un double-clique sur l'élément ici, en double-cliquant, la boîte de dialogue se rouvre. Maintenant je vais lui dire que je ne veux pas les mêmes règles pour toutes les propriétés mais bien au contraire, je veux des transitions différentes pour chacune des propriétés. Si la durée d'une seconde me convient très bien, maintenant je voudrais qu'il y ait un retard de deux secondes c'est-à-dire qu'elle passe après une nouvelle transition que je vais ajouter ici. Je pourrais venir chercher par exemple ici dans les transform pour continuer dans les transformations, mais voyez que Dreamweaver propose du Transform 2D qui a déjà été utilisé et je n'ai pas de Transform 3D. Ça ne veut pas dire que c'est impossible ça veut simplement dire que Dreamweaver n'a pas intégré Transform 3D dans cette version de transition. On va rester sur un background-color par exemple ici. Dès que je vais choisir un background-color, je vais pouvoir venir définir ici par exemple, dans les bleus, en hexadécimal je vais choisir une couleur bien précise qui serait par exemple 3F6CD4 qui est un bleu assez particulier. Je peux le valider par la touche Entrée. Je vais lui demander cette fois-ci une durée d'une seconde. C'est à lui que je vais demander une valeur de retard de 0. Comme il est à 0, il passera d'abord puis la transformation arrivera après. Je peux maintenant enregistrer la transition. Du fait qu'il y ait un retard, quand je vais survoler, il va d'abord transformer en bleu il va attendre un petit peu, puis il va partir faire son effet de ease. Et là il va pouvoir repartir. On peut cumuler les transitions comme ça. En jouant sur les délais de retard, ici on le voit bien, le transform ne s'exécutera qu'avec deux secondes de retard. Donc le premier qui va partir puisqu'il n'a pas de retard, c'est bien le background-color qui va partir, qui va s'exécuter d'abord. Il va durer une seconde et il y aura une seconde d'attente pour exécuter la suite. Côté CSS : tous les CSS ont été générés automatiquement par Dreamweaver ici. Si je passe dans la partie du code, on va s'apercevoir qu'on a déjà tous les pré-fixages qui sont ou pas nécessaires, mais ils y sont, ils ont été faits. Chaque carré va avoir toutes ces valeurs de départ. Toutes les valeurs d'arrivée sont définies dans la partie hover. Par contre, tout ce qui est côté transition va être défini dans la partie de origin c'est-à-dire qu'on défini dans la partie d'origin en lui disant : « attention voici comment tu es, mais tes transitions sont gérées de telle manière ». À ce moment là, les transitions vont être affectées aux effets d'arrivée au moment même du survol. Si vous avez des effets de transition double vous allez avoir chaque effet de transition séparé par des virgule et défini de manière indépendante. Sinon, si vous utilisez le même paramétrage pour toutes les transitions, vous allez pouvoir faire un all directement et donner les valeurs de départ. C'est tout ce qu'il y a à faire au niveau des transitions. Ce n'est pas très compliqué d'un point de vue écriture, mais on voit que Dreamweaver nous rend énormément de services avec cette petite boîte de transition parce que ça va écrire tout le code pour nous et ça va le générer de manière très souple et surtout ça va nous laisser la possibilité, en étant dans le code source, de pouvoir en double-cliquant dessus, venir modifier les transitions et les adapter selon nos besoins.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !