Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Dreamweaver CS6 : Les nouveautés

Utiliser la fonction Transitions CSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Explorons ensemble la toute nouvelle fonctionnalité Transitions CSS proposée par Dreamweaver CS6. Bien que le principal accès reste depuis le menu Fenêtre > Transitions CSS, il est également possible d'accéder à cette nouvelle catégorie depuis l'aide à la définition des règles.
07:06

Transcription

Il est très simple de mettre en application la toute nouvelle fonctionnalité de transition CSS proposée par Dreamweaver CS6. Donc, vous ouvrez dans le menu Fenêtre Transition CSS. C'est un tout nouveau panneau qui ouvre une boîte de dialogue relativement ergonomique, simple d'utilisation et complète. Ici, on va choisir une règle de cible. Alors, on pourrait choisir l'élément body. Mais, ce qu'on voudrait pouvoir choisir, ce sont des éléments de paragraphes, ici à l'intérieur. Et dès l'instant qu'on va faire une nouvelle règle, on n'a pas la possibilité d'accéder aux balises paragraphes telles quelles. Ce qu'on va faire, on va au moins décrire une balise paragraphe, dans les CSS, ici et créer une nouvelle requête de balise, paragraphe, OK. Et on va mettre un font size de 0.8 em, donc écrire les paragraphes de manière beaucoup plus petite. Alors, 0.8 ça peut-être un peu beaucoup, on va redescendre à 0.9, voilà. Donc ici on a des paragraphes très petits. Et ce qu'on pourrait apporter comme fonctionnalité, ce serait une transition que quand la souris survole le paragraphe, qu'on le mette en position de lecture beaucoup plus ergonomique. On va revenir dans nos transitions CSS, on va appliquer notre règle cible et on va pouvoir attraper la balise p qui a été définie. Donc dans cette balise p, qu'est ce qu'on va faire comme transition? Est-ce qu'on va transiter dès qu'on sera sur coché, décoché, activer le focus ? Nous, ce qui nous intéresse ici, c'est dès qu'on va survoler l'élément. On a la possibilité d'apporter les mêmes règles pour toutes les propriétés, quelles que soient les propriétés. Je vous propose de directement partir dans quelque chose de plus sophistiqué, et d'appliquer des transitions différentes pour chaque propriété. Toutes les propriétés qui sont accessibles peuvent se définir ici. Ce qu'on pourrait faire, c'est commencer par margin-left, demander d'obtenir une durée de 0.5 secondes. Alors on peut exprimer les durées en secondes ou en millisecondes. Ici on pourrait 500 millisecondes ou 0.5 secondes comme dirait la balise. Ne partez pas sur des transitions trop longues, ce n'est pas efficace, ça ne fait pas le job, essayez de faire des transitions plus courtes. Est-ce qu'il y a un retard ? Non, dès l'instant où je survole, je veux que ça déclenche. Est-ce qu'il y a une accélération à placer? Oui, on va faire un ease-in-out, c'est-à-dire que ça va accélérer dès le départ et ralentir vers l'arrivée. On aurait la possibilité de faire l'inverse, c'est-à-dire de ralentir au départ et d'accélérer sur la sortie, ou alors de faire un ralentissement sur l'entrée et la sortie. Linear serait une possibilité d'avoir une fonction affine, c'est-à-dire que le déplacement est constant du début à la fin de l'animation. Donc, ici on va rester sur un ease-in-out. Et quelle va être la valeur de la fin de ma marge gauche? On pourrait demander, par exemple, 4 em dans les valeurs de sortie. Alors, il ne l'a pas pris dans ce sens-là, on va le lui donner directement dans le petit menu déroulant. Qu'est-ce qu'on va ajouter comme autre propriété ? On va ajouter une nouvelle propriété qui va être le font-size. Et là, le font-size, pareil. À quel moment va-t-on faire la transition ? 0.4, ça me va très bien, mettons, assez rapide. Quel va être le retard ? Le retard, rappelez-vous, on avait mis une durée de 0.5 secondes, donc on pourrait commencer, par exemple, à 0.4 secondes. Quand la première n'est pas tout à fait terminée, on va enclencher la seconde, où ça pourrait être 0.35, voilà. Comme ça, ça va s'enchaîner, il y aura une sorte de cohérence entre les deux. Et là pareil, on va opter pour du ease-in-out. Quelle va être la valeur de fin ? Elle était 1.09, on pourrait passer à 1.3 em. Voilà. Qu'est-ce que vous pouvez rajouter ? Rajouter une autre propriété qui serait une bordure, par exemple une bordure left-width, qui pourrait apparaître ici. Et ce border-left, quelle va être la durée ? On pourrait faire 0.2 secondes. Un retard, quand la première sera terminée donc la première commençait à durée 0.25 donc on pourrait faire 0.75, mettons 0.8 secondes, minutage ease-in-out, valeur de fin 2 pixels par exemple, sur une bordure finale. Voilà, donc on pourrait créer la transition. On voit que dans la transition, on a trois instances qui sont affectées. Effectivement, j'ai trois balises p qui sont affectées par cette transition sur l'état hover, ici. Et si je regarde du côté du code, on voit qu'ici, au niveau du CSS, il y a quelque chose qui a apparu. Je vais passer en code pur sur le CSS. Et là, vous voyez, on a, sur la balise p hover, toutes nos informations qui sont arrivées, ici. Par contre, sur la balise p de départ, on a le déclencheur de l'animation qui est passé. Il faut bien comprendre ça dans les transitions, c'est que les valeurs d'arrivée sont placées sur le sélecteur qui correspond à cette arrivée mais par contre, le déclenchement de la transition est placé sur le sélecteur d'où part la transition. Ceci dit, ce que je vais rajouter, c'est le fait que dans la bordure p, ici, on n'a pas... Donc je vais reprendre mon panneau CSS pour faire plus simple. ...on n'a pas, dans la bordure p, de bordure, ici. Je vais demander, uniquement pour la partie left, de mettre une bordure, par exemple solid. Je vais y mettre un gris relativement léger, un peu plus effacé que celui-là, je vais partir sur un gris plus clair, comme ça, et je vais mettre une largeur de zéro, qui est une description faite dans border-left au départ, parce que je ne peux pas arriver sur 2 sans avoir défini cet état de couleur et de nature de trait. On va enregistrer tout ça et on va passer à la zone navigateur. Que nenni, me direz-vous ! On va rester sur la partie indirecte, ici, et vous voyez que, déjà, dans la partie indirecte, tout fonctionne, et tout se place de manière très propre. Qu'est-ce qu'on pourrait rajouter ? On va pouvoir rajouter... Alors, ce n'est pas très ergonomique. Je pourrais faire quelque chose d'accessible et ergonomique. Il est vrai que le résultat n'est pas tellement à la hauteur de ce que j'escomptais. Ce qui nous manque, c'est d'avoir un petit padding à l'intérieur, un petit padding qui va pousser ce texte, et qui va le décaler. Donc, on va rejouer sur la partie hover mais il faut rentrer sur la transition. Regardez ici, sur la partie transition, on a un élément qui a été fait margin-left, font-size, border-left. Je vais pouvoir rajouter une nouvelle transition qui va être padding, cette fois-ci, padding-left, voilà. Et sur le padding-left, pareil, je vais rajouter une durée de 0.25 secondes qui aura un retard de zéro. On peut le décaler dès le départ avec un ease-in-out, voilà, OK. Donc, qu'est-ce que donne, maintenant, mon élément ? Non, je n'ai pas le padding-hover. Ah oui c'est vrai, je n'ai pas donné la valeur. Ici, on va rentrer sur padding-left, deux points, et on va mettre, par exemple, 1em, ici sur la partie padding-left. Je vais faire Fichier Enregistrer tout. Et dès l'instant où on navigue, on va essayer de casser ce en direct et, regardez, on a pu recharger. Des fois, il faut casser le en direct pour pouvoir reprendre cette valeur-là. Et là, voyez, on a une transition qui a été faite, et qui est complètement lisible directement depuis l'interface de Dreamweaver.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 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 !