CSS3-Übergänge in Dreamweaver CS6

• April 19, 2024

Mit HTML5 und CSS3 werden interaktive Websites zu den Erwartungen. Nun zu Dreamweaver^R. Mit CS6 und dem neuen CSS Transitions-Bedienfeld können Sie Ihre eigenen interaktiven Effekte erstellen, ohne Code schreiben zu müssen. Die Ausgabe dieses Prozesses ist nur CSS3 ohne JavaScript. Daher müssen Sie sich keine Sorgen machen, wenn der Viewer JavaScript aktiviert hat. Die von Dreamweaver erstellten Übergänge können in jedem modernen Webbrowser abgespielt werden.

Mal sehen, wie einfach es ist, eigene interaktive Übergänge zu erstellen. Der Übergang kann auf jede Klasse, ID oder jedes CSS-Element angewendet werden. Wir müssen lediglich die Werte im Bereich CSS-Übergänge festlegen.

1. Unser erster Schritt besteht darin, das Element auszuwählen, auf das wir den Übergang anwenden möchten. In unserem Beispiel handelt es sich um einen Menülink.
   
   
2. Klicken Sie auf Fenster - CSS-Übergänge, um das Bedienfeld zu öffnen.
   
   
3. Klicken Sie im Bedienfeld CSS-Übergänge auf das Pluszeichen, um einen Übergang hinzuzufügen.
   
   
4. Im Dialogfeld Neuer Übergang können Sie über das Menü Zielregel aus den Voreinstellungen auswählen oder unseren eigenen Namen für den Übergang eingeben. Geben Sie den Namen .morph ein.
   
   
5. Als nächstes müssen wir die Aktion auswählen, die den Übergang auslöst. Wählen Sie im Menü "Übergang ein" die Option "Schweben", damit der Übergang ausgelöst wird, wenn Sie mit der Maus über den Link fahren. Andere Auswahlmöglichkeiten sind: aktiv, aktiviert, deaktiviert, aktiviert, fokussiert, schweben, unbestimmt und zielgerichtet.
   
   
6. Für die Menüoption haben wir zwei Möglichkeiten. Lassen Sie uns die erste wählen.
   
   Verwenden Sie für alle Eigenschaften den gleichen Übergang
   Verwenden Sie für jede Eigenschaft einen anderen Übergang
   
   
7. Für die Dauer und Verzögerung des Übergangs können wir Sekunden oder Millisekunden verwenden. Stellen wir die Dauer auf 1 Sekunde und die Verzögerung auf 0,05 Sekunden ein.
   
   
8. Für die Timing-Funktion haben wir mehrere Möglichkeiten zur Lockerung. Lassen Sie uns Ease Out wählen.
   
   
9. Um eine CSS-Eigenschaft hinzuzufügen, klicken Sie auf das Pluszeichen und wählen Sie eines aus der Popup-Liste aus. Wählen wir Hintergrundfarbe.
   
   
10. Sobald wir eine Eigenschaft ausgewählt haben, können wir den Endwert für den Übergang festlegen. Abhängig von der von uns ausgewählten Eigenschaft erhalten Sie im Menü Endwert das entsprechende Menü für diese Eigenschaft. Für die Hintergrundfarbe erhalten wir den Farbwähler. Wenn wir die Font-Weight-Eigenschaft hinzufügen, erhalten wir ein Menü mit voreingestellten Gewichten.
    
    
11. Schließlich müssen wir auswählen, wo der Übergang erstellt werden soll. Wir haben die Wahl zwischen Nur dieses Dokument oder Neue Stylesheet-Datei. Verwenden wir den ersten.
    
    

Sobald wir auf die Schaltfläche "Übergang erstellen" klicken, können wir sehen, dass der Übergang im Bedienfeld "CSS-Übergänge" aufgelistet wurde. Dies zeigt an, dass der Morph-Übergang durch die Hover-Aktion ausgelöst und auf das Ziel "a.morph" angewendet wird.

Wenn wir die Codeansicht überprüfen, sehen wir, dass die Morph-Klasse zum Link hinzugefügt wurde.

Wenn Sie mit der Maus über den Link in der Live-Ansicht fahren, ändert sich die Hintergrundfarbe.

Aber was wäre, wenn wir den Übergang bearbeiten müssten? Wir können dies über das CSS Transitions-Panel tun.

1. Wählen Sie den Übergang a.morph und das Bearbeitungssymbol wird aktiv (Stiftsymbol).
   
   
2. Klicken Sie auf das Symbol Bearbeiten, um das Dialogfeld Übergang bearbeiten zu öffnen. Hier können wir die Werte nach Bedarf ändern oder eine neue Eigenschaft und einen neuen Endwert hinzufügen.
   
   

Nachdem wir den Morph-Übergang erstellt haben, können wir ihn problemlos auf andere Elemente anwenden, da er jetzt über das Menü Zielregel verfügbar ist.

* Adobe hat mir eine Kopie dieser Software zu Überprüfungszwecken zur Verfügung gestellt.

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: Adobe Dreamweaver CC Tutorial #004 - CSS Übergänge (April 2024).