CSS3-overgange i Dreamweaver CS6

• Kan 19, 2024

Med tilføjelsen af ​​HTML5 og CSS3 bliver interaktive websteder det forventede. Nu med Dreamweaver^R CS6 og det nye CSS-overgangspanel, kan du oprette dine egne interaktive effekter uden at skulle skrive nogen kode. Outputet fra denne proces er kun CSS3 uden JavaScript. Derfor behøver du ikke at bekymre dig, hvis seeren har aktiveret JavaScript. Overgange oprettet af Dreamweaver kan afspilles i enhver moderne webbrowser.

Lad os se, hvor let det er at oprette vores egne interaktive overgange. Overgangen kan anvendes på alle klasse-, ID- eller CSS-elementer. Alt, hvad vi skal gøre, er at indstille værdierne i panelet CSS-overgange.

1. Vores første skridt er at vælge det element, som vi ønsker at anvende overgangen til. I vores eksempel vil det være et menuklink.
   
   
2. Klik på Window - CSS Transitions for at åbne panelet.
   
   
3. Klik på Plus-tegnet i CSS-overgangspanelet for at tilføje en overgang.
   
   
4. I dialogboksen Ny overgang kan vi bruge menuen Målregel til at vælge fra de forudindstillinger eller indtaste vores eget navn til overgangen. Lad os indtaste navnet .morph.
   
   
5. Derefter skal vi vælge den handling, der vil udløse overgangen. I menuen Overgang til skal du vælge Hover, så overgangen udløses, når vi placerer musen over linket. Andre valg inkluderer: aktiv, markeret, deaktiveret, aktiveret, fokus, hover, ubestemt og mål.
   
   
6. For menuindstillingen har vi to valg. Lad os vælge det første.
   
   Brug den samme overgang til alle egenskaber
   Brug en anden overgang til hver egenskab
   
   
7. I overgangens varighed og forsinkelse kan vi bruge sekunder eller millisekunder. Lad os indstille varigheden til 1 sekund og forsinkelsen til 0,05 sekund.
   
   
8. Til timefunktionen har vi flere lette valg. Lad os vælge Ease Out.
   
   
9. For at tilføje en CSS-egenskab skal du klikke på Plus-tegnet og vælge en fra pop-up-listen. Lad os vælge Baggrundsfarve.
   
   
10. Når vi har valgt en egenskab, kan vi indstille slutværdien for overgangen. Afhængigt af den ejendom, vi har valgt, giver menuen Slutværdi os den tilsvarende menu for den egenskab. Til baggrund-farve får vi farvevælgeren. Hvis vi tilføjer egenskaben Font-Weight, får vi en menu med forudindstillede vægte.
    
    
11. Endelig skal vi vælge Hvor skal vi oprette overgangen. Vores valg er kun dette dokument eller New Style Sheet File. Lad os bruge det første.
    
    

Når vi klikker på knappen Opret overgang, kan vi se, at overgangen er blevet vist i CSS-overgangspanelet, hvilket indikerer, at morf-overgangen vil blive udløst af hover-handlingen og anvendt til a.morph-målet.

Hvis vi kontrollerer kodevisningen, ser vi, at morfeklassen er føjet til linket.

Når vi passerer musen over linket i Live-visning, ændres baggrundsfarven.

Men hvad hvis vi havde brug for at redigere overgangen? Vi kan gøre dette via CSS-overgangspanelet.

1. Vælg overgangen a.morph, og ikonet Rediger vil blive aktivt (blyantikon).
   
   
2. Klik på ikonet Rediger for at åbne dialogboksen Rediger overgang. Her kan vi ændre værdierne efter behov eller tilføje en ny egenskab og slutværdi.
   
   

Nu hvor vi har oprettet morf-overgangen, kan vi nemt anvende den til andre elementer, fordi den nu er tilgængelig fra menuen Målregel.

* Adobe leverede en kopi af denne software til mig til gennemgangsformål.

Copyright 2018 Adobe Systems Incorporated. Alle rettigheder forbeholdes. Adobe-produktskærmbilleder (r) genudtrykt med tilladelse fra 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, fyrværkeri, Bidrage, Captivate, Flash Catalyst og Flash Paper er / er enten [a] registreret varemærke [er] eller et varemærke [s] fra Adobe Systems Incorporated i USA og / eller andre lande.

Video Instruktioner: html buttons in joomla (Kan 2024).