CSS3 Overganger i Dreamweaver CS6

• April 29, 2024

Med tillegg av HTML5 og CSS3, blir interaktive nettsteder det forventede. Nå, med Dreamweaver^R CS6 og det nye CSS Transitions-panelet, kan du lage dine egne interaktive effekter uten å måtte skrive noen kode. Produksjonen fra denne prosessen er bare CSS3, uten JavaScript. Derfor trenger du ikke å bekymre deg hvis seeren har aktivert JavaScript. Overgangene laget av Dreamweaver kan spilles av i hvilken som helst moderne nettleser.

La oss se hvor enkelt det er å lage våre egne interaktive overganger. Overgangen kan brukes på alle klasse-, ID- eller CSS-elementer. Alt vi trenger å gjøre er å angi verdiene i CSS Transitions-panelet.

1. Vårt første trinn er å velge elementet vi ønsker å bruke overgangen til. I eksempelet vårt vil det være en menykobling.
   
   
2. Klikk Window - CSS Transitions for å åpne panelet.
   
   
3. I CSS-overgangspanelet klikker du på Plus-tegnet for å legge til en overgang.
   
   
4. I dialogboksen Ny overgang kan vi bruke Målregel-menyen til å velge fra forhåndsinnstillingene eller skrive inn vårt eget navn for overgangen. La oss skrive inn navnet .morph.
   
   
5. Deretter må vi velge handlingen som vil utløse overgangen. Velg Overfør på menyen Overgang på slik at overgangen vil utløse når vi plasserer musen over lenken. Andre valg inkluderer: aktiv, sjekket, deaktivert, aktivert, fokus, svevet, ubestemmelig og mål.
   
   
6. For menyalternativet har vi to valg. La oss velge det første.
   
   Bruk samme overgang for alle eiendommer
   Bruk en annen overgang for hver eiendom
   
   
7. For overgangens varighet og forsinkelse kan vi bruke sekunder eller millisekunder. La oss sette varigheten til 1 sekund og forsinkelsen til 0,05 sekund.
   
   
8. For tidsfunksjonen har vi flere lettelsesvalg. La oss velge Ease Out.
   
   
9. Hvis du vil legge til en CSS-eiendom, klikker du på Plus-tegnet og velger en fra popup-listen. La oss velge bakgrunnsfarge.
   
   
10. Når vi har valgt en eiendom, kan vi angi sluttverdien for overgangen. Avhengig av egenskapen vi har valgt, vil End Value-menyen gi oss den tilsvarende menyen for den eiendommen. For bakgrunnsfargen får vi fargevalgeren. Hvis vi legger til Font-Weight-egenskapen, får vi en meny med forhåndsinnstilte vekter.
    
    
11. Endelig må vi velge Hvor vi skal lage overgangen. Våre valg er bare Dette dokumentet eller New Style Sheet File. La oss bruke det første.
    
    

Når vi har klikket på Opprett overgang-knappen, kan vi se at overgangen er oppført i CSS Overganger-panelet, noe som indikerer at morf-overgangen vil bli utløst av hover-handlingen og brukt på a.morph-målet.

Hvis vi sjekker kodevisningen, ser vi morph-klassen er lagt til lenken.

Når vi fører musen over lenken i Live-visning, vil bakgrunnsfargen endre seg.

Men hva om vi trengte å redigere overgangen? Vi kan gjøre dette via CSS Transitions-panelet.

1. Velg overgangen a.morph, og Rediger-ikonet vil bli aktivt (blyantikon).
   
   
2. Klikk på ikonet Rediger for å åpne dialogboksen Rediger overgang. Her kan vi endre verdiene etter behov eller legge til en ny eiendom og sluttverdi.
   
   

Nå som vi har opprettet morf-overgangen, kan vi enkelt bruke den på andre elementer fordi den nå er tilgjengelig fra menyen Målregel.

* Adobe ga meg en kopi av denne programvaren for gjennomgang.

Copyright 2018 Adobe Systems Incorporated. Alle rettigheter forbeholdt. Adobes produktskjermbilder er skrevet ut på nytt med tillatelse 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, Fyrverkeri, Bidra, Captivate, Flash Catalyst og Flash Paper er / er enten [a] registrert varemerke [s] eller et varemerke [s] fra Adobe Systems Incorporated i USA og / eller andre land.