Tranziții CSS3 în Dreamweaver CS6

• Mai 17, 2024

Odată cu adăugarea HTML5 și CSS3, site-urile interactive devin așteptate. Acum, cu Dreamweaver^R CS6 și noul panou CSS Transitions, vă puteți crea propriile efecte interactive fără a fi necesară scrierea unui cod. Ieșirea din acest proces este doar CSS3, fără JavaScript. Prin urmare, nu trebuie să vă faceți griji dacă vizualizatorul a activat JavaScript. Tranzițiile create de Dreamweaver se pot juca în orice browser web modern.

Să vedem cât de ușor este să ne creăm propriile tranziții interactive. Tranziția poate fi aplicată oricărei clase, ID sau CSS. Tot ce trebuie să facem este să stabilim valorile în panoul CSS Transitions.

1. Primul nostru pas este să selectăm elementul la care dorim să aplicăm tranziția. În exemplul nostru va fi un link de meniu.
   
   
2. Faceți clic pe Window - CSS Transitions pentru a deschide panoul.
   
   
3. În panoul Tranziții CSS, faceți clic pe semnul Plus pentru a adăuga o tranziție.
   
   
4. În caseta de dialog Noua tranziție, putem utiliza meniul Regula țintă pentru a alege dintre presetări sau tipul numelui propriu pentru tranziție. Să introducem numele .morph.
   
   
5. În continuare, trebuie să alegem acțiunea care va declanșa tranziția. Din meniul Transition On, alegeți Hover pentru ca tranziția să se declanșeze atunci când plasăm mouse-ul peste link. Alte opțiuni includ: activ, bifat, dezactivat, activat, focalizare, trecere, nedeterminată și țintă.
   
   
6. Pentru opțiunea de meniu, avem două opțiuni. Să alegem primul.
   
   Utilizați aceeași tranziție pentru toate proprietățile
   Utilizați o tranziție diferită pentru fiecare proprietate
   
   
7. Pentru durata și întârzierea tranziției, putem folosi Seconds sau Milliseconds. Să setăm Durata la 1 secundă și Întârzierea la .05 secundă.
   
   
8. Pentru funcția de sincronizare, avem mai multe opțiuni de ușurare. Să alegem Ease Out.
   
   
9. Pentru a adăuga o proprietate CSS, faceți clic pe semnul Plus și alegeți una din lista pop-up. Să alegem culoarea de fundal.
   
   
10. După ce am ales o proprietate, putem seta Valoarea finală pentru tranziție. În funcție de proprietatea pe care am ales-o, meniul Valoare finală ne va oferi meniul corespunzător pentru acea Proprietate. Pentru culoarea de fundal obținem selectorul de culori. Dacă adăugăm proprietatea Font-Weight, obținem un meniu cu greutăți prestabilite.
    
    
11. În sfârșit, trebuie să alegem Unde să creăm tranziția. Opțiunile noastre sunt doar acest document sau fișierul cu stil de stil nou. Să folosim primul.
    
    

Odată ce facem clic pe butonul Creare tranziție, putem vedea că tranziția a fost listată în panoul CSS Transitions, indicând că tranziția morf va fi declanșată de acțiunea de transfer și aplicată la ținta a.morph.

Dacă verificăm vizualizarea codului, vedem că clasa morf a fost adăugată la link.

Când trecem mouse-ul peste linkul din vizualizarea Live, culoarea de fundal se va schimba.

Dar dacă ar trebui să edităm tranziția? Putem face acest lucru prin panoul CSS Transitions.

1. Selectați tranziția a.morph și pictograma Edit va deveni activă (pictograma creion).
   
   
2. Faceți clic pe pictograma Editați pentru a deschide caseta de dialog Editare tranziție. Aici putem modifica valorile după cum este necesar sau adăugați o nouă proprietate și o valoare finală.
   
   

Acum că avem tranziția morfă creată, o putem aplica cu ușurință la alte elemente, deoarece acum este disponibilă din meniul Regula țintă.

* Adobe mi-a furnizat o copie a acestui software în scop de examinare.

Copyright 2018 Adobe Systems Incorporated. Toate drepturile rezervate. Captura (ecranele) de produs Adobe tipărite cu permisiunea 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 și Flash Paper este / sunt [o] marcă înregistrată [sau] sau o marcă comercială a Adobe Systems Incorporated în Statele Unite și / sau în alte țări.