CSS3 átmenetek a Dreamweaver CS6-ban

• Június 30, 2024

A HTML5 és a CSS3 kiegészítésével az interaktív webhelyek válnak várhatóvá. Most a Dreamweaverrel^R A CS6 és az új CSS átmenetek panel létrehozhat saját interaktív effektusokat anélkül, hogy bármilyen kódot kellene írni. Ennek a folyamatnak a kimenete csak CSS3, JavaScript nélkül. Ezért nem kell aggódnia, ha a néző engedélyezte a JavaScriptet. A Dreamweaver által létrehozott átmenetek bármilyen modern böngészőben lejátszhatók.

Lássuk, milyen könnyű létrehozni saját interaktív átmeneteinket. Az átmenet bármilyen osztályra, azonosítóra vagy CSS elemre alkalmazható. Csak annyit kell tennünk, hogy beállítsa az értékeket a CSS Átmenetek panelen.

1. Első lépésünk az az elem kiválasztása, amelyre alkalmazni kívánjuk az átmenetet. Példánkban ez menüpont lesz.
   
   
2. A panel megnyitásához kattintson az Ablak - CSS átmenetek elemre.
   
   
3. A CSS Átmenetek panelen kattintson a Plusz jelre az átmenet hozzáadásához.
   
   
4. Az Új átmenet párbeszédpanelen a Célszabály menü segítségével választhatunk a presetek közül, vagy beírhatjuk a saját nevünket az átmenetre. Írjuk be a .morph nevet.
   
   
5. Ezután ki kell választanunk az áttérést kiváltó műveletet. Az Átmenet be menüben válassza a Lebegés menüpontot, hogy az átmenet akkor induljon el, ha az egérrel a link fölé helyezzük. Egyéb lehetőségek: aktív, ellenőrzött, letiltva, engedélyezve, fókusz, lebegés, határozatlan és cél.
   
   
6. A menüopcióhoz két választási lehetőséget kínálunk. Válasszuk az elsőt.
   
   Használja ugyanazt az átmenetet minden tulajdonsághoz
   Használjon különféle átmenetet minden tulajdonsághoz
   
   
7. Az átmenet időtartamához és késleltetéséhez másodperc vagy ezredmásodpercet használhatunk. Állítsuk az Időtartamot 1 másodpercre, a késleltetést pedig 0,05 másodpercre.
   
   
8. Az időzítési funkcióhoz számos megkönnyítő választás van. Válasszuk az Ease Out lehetőséget.
   
   
9. CSS tulajdonság hozzáadásához kattintson a Plusz jelre, és válasszon egyet az előugró listából. Válasszuk a Háttér szín lehetőséget.
   
   
10. Miután kiválasztottunk egy tulajdonságot, beállíthatjuk az átmenet végértékét. A kiválasztott tulajdonságtól függően a Végérték menü megadja nekünk az adott ingatlan megfelelő menüjét. A Háttér színhez a Színválasztót kapjuk. Ha hozzáadjuk a Betű-súly tulajdonságot, akkor egy menüt kapunk az előre beállított súlyokkal.
    
    
11. Végül ki kell választanunk, hogy hol hozzuk létre az átmenetet. Választásunk csak a dokumentum vagy az új stíluslap-fájl. Használjuk az elsőt.
    
    

Miután rákattintunk az Átalakítás létrehozása gombra, láthatjuk, hogy az átmenet szerepel a CSS Átmenetek panelen, jelezve, hogy az morf átmenetet a lebegő művelet váltja ki és alkalmazzuk az a.morph célpontra.

Ha ellenőrizzük a kód nézetet, akkor látjuk, hogy a morph osztály hozzá lett adva a linkhez.

Ha az egérmutatót áthelyezzük a link felett élő nézetben, a háttér színe megváltozik.

De mi lenne, ha szerkesztenünk kellene az átmenetet? Ezt megtehetjük a CSS Átmenetek panelen.

1. Válassza ki az a.morph átmenetet, és a Szerkesztés ikon aktívvá válik (ceruza ikon).
   
   
2. Kattintson a Szerkesztés ikonra az Átalakítás szerkesztése párbeszédpanel megnyitásához. Itt megváltoztathatjuk az értékeket, vagy szükség szerint hozzáadhatunk új tulajdonságot és végső értéket.
   
   

Most, hogy létrehoztuk a morph-átmenetet, könnyen alkalmazhatjuk más elemekre is, mivel ez a Célszabály menüből elérhető.

* Az Adobe átadta nekem a szoftver egy példányát felülvizsgálat céljából.

Szerzői jog 2018 Adobe Systems Incorporated. Minden jog fenntartva. Az Adobe termék képernyőképe (i) újra kinyomtatva az Adobe Systems Incorporated engedélyével. 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 és Flash Paper vagy bejegyzett védjegy (ek) vagy az Adobe Systems Incorporated védjegye (i) az Egyesült Államokban és / vagy más országokban.

Video Utasításokat: CSS Efecto - 16 expansion de borde @JoseCodFacilito (Június 2024).