Transitions CSS3 dans Dreamweaver CS6

• Mai 4, 2024

Avec l'ajout de HTML5 et CSS3, les sites Web interactifs deviennent les attentes. Maintenant, avec Dreamweaver^R CS6 et le nouveau panneau Transitions CSS, vous pouvez créer vos propres effets interactifs sans avoir à écrire de code. La sortie de ce processus est CSS3 uniquement, sans JavaScript. Par conséquent, vous n'avez pas à vous inquiéter si le spectateur a activé JavaScript. Les transitions créées par Dreamweaver peuvent être lues dans n'importe quel navigateur Web moderne.

Voyons à quel point il est facile de créer nos propres transitions interactives. La transition peut être appliquée à n'importe quelle classe, ID ou élément CSS. Tout ce que nous devons faire est de définir les valeurs dans le panneau Transitions CSS.

1. Notre première étape consiste à sélectionner l'élément auquel nous souhaitons appliquer la transition. Dans notre exemple, ce sera un lien de menu.
   
   
2. Cliquez sur Fenêtre - Transitions CSS pour ouvrir le panneau.
   
   
3. Dans le panneau Transitions CSS, cliquez sur le signe Plus pour ajouter une transition.
   
   
4. Dans la boîte de dialogue Nouvelle transition, nous pouvons utiliser le menu Règle cible pour choisir parmi les préréglages ou taper notre propre nom pour la transition. Tapons le nom .morph.
   
   
5. Ensuite, nous devons choisir l'action qui déclenchera la transition. Dans le menu Transition activée, choisissez Survoler pour que la transition se déclenche lorsque nous plaçons notre souris sur le lien. Les autres choix incluent: actif, vérifié, désactivé, activé, focus, survol, indéterminé et cible.
   
   
6. Pour l'option de menu, nous avons deux choix. Choisissons le premier.
   
   Utilisez la même transition pour toutes les propriétés
   Utilisez une transition différente pour chaque propriété
   
   
7. Pour la durée et le retard de la transition, nous pouvons utiliser des secondes ou des millisecondes. Fixons la durée à 1 seconde et le délai à 0,05 seconde.
   
   
8. Pour la fonction de synchronisation, nous avons plusieurs choix d'accélération. Choisissons Ease Out.
   
   
9. Pour ajouter une propriété CSS, cliquez sur le signe Plus et choisissez-en une dans la liste déroulante. Choisissons la couleur de fond.
   
   
10. Une fois que nous avons choisi une propriété, nous pouvons définir la valeur finale de la transition. Selon la propriété que nous avons choisie, le menu Valeur finale nous donnera le menu correspondant pour cette propriété. Pour la couleur de fond, nous obtenons le sélecteur de couleurs. Si nous ajoutons la propriété Font-Weight, nous obtenons un menu de poids prédéfinis.
    
    
11. Enfin, nous devons choisir où créer la transition. Nos choix sont Ce document uniquement ou Nouveau fichier de feuille de style. Utilisons le premier.
    
    

Une fois que nous avons cliqué sur le bouton Créer une transition, nous pouvons voir que la transition a été répertoriée dans le panneau Transitions CSS, indiquant que la transition de morphing sera déclenchée par l'action de survol et appliquée à la cible a.morph.

Si nous vérifions la vue du code, nous voyons que la classe morph a été ajoutée au lien.

Lorsque nous passons notre souris sur le lien en mode En direct, la couleur d'arrière-plan change.

Mais que faire si nous avions besoin de modifier la transition? Nous pouvons le faire via le panneau CSS Transitions.

1. Sélectionnez la transition a.morph et l'icône Modifier deviendra active (icône crayon).
   
   
2. Cliquez sur l'icône Modifier pour ouvrir la boîte de dialogue Modifier la transition. Ici, nous pouvons modifier les valeurs selon les besoins ou ajouter une nouvelle propriété et une valeur finale.
   
   

Maintenant que nous avons créé la transition de morphing, nous pouvons facilement l'appliquer à d'autres éléments car elle est désormais disponible dans le menu Règle cible.

* Adobe m'a fourni une copie de ce logiciel à des fins de révision.

Copyright 2018 Adobe Systems Incorporated. Tous les droits sont réservés. Copies d'écran des produits Adobe reproduites avec la permission d'Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst et Flash Paper Paper est / sont [une] marque [s] déposée (s) ou une marque [s] d'Adobe Systems Incorporated aux États-Unis et / ou dans d'autres pays.

Instructions Vidéo: Dreamweaver CC Tutorial: Inserting Animations to your Website (Mai 2024).