Prechody CSS3 v Dreamweaveri CS6

• Smieť 5, 2024

S pridaním HTML5 a CSS3 sa interaktívne webové stránky stávajú očakávanými. Teraz s Dreamweaverom^R CS6 a nový panel CSS Transitions si môžete vytvoriť vlastné interaktívne efekty bez potreby písania akéhokoľvek kódu. Výstupom tohto procesu je iba CSS3 bez JavaScriptu. Preto si nemusíte robiť starosti, ak divák povolil JavaScript. Prechody vytvorené Dreamweaverom sa môžu prehrávať v akomkoľvek modernom webovom prehliadači.

Pozrime sa, aké ľahké je vytvoriť vlastné interaktívne prechody. Prechod možno použiť na akýkoľvek prvok triedy, ID alebo CSS. Potrebujeme iba nastaviť hodnoty v paneli Prechody CSS.

1. Naším prvým krokom je vybrať prvok, na ktorý sa má prechod uplatniť. V našom príklade to bude odkaz na ponuku.
   
   
2. Kliknutím na Window - CSS Transitions otvorte panel.
   
   
3. Na paneli Prechody CSS kliknite na znamienko Plus a pridajte prechod.
   
   
4. V dialógovom okne Nová prechod môžeme použiť ponuku Cieľové pravidlo na výber z predvolieb alebo napísať vlastný názov pre prechod. Zadajte názov .morph.
   
   
5. Ďalej musíme zvoliť akciu, ktorá spustí prechod. Z ponuky Prechod na vyberte Hover, aby sa prechod spustil, keď umiestnime kurzor myši na odkaz. Medzi ďalšie možnosti patrí: aktívne, kontrolované, deaktivované, povolené, zaostrenie, vznášanie sa, neurčité a cieľové.
   
   
6. Pre možnosť ponuky máme dve možnosti. Vyberme prvý.
   
   Rovnaký prechod použite pre všetky vlastnosti
   Pre každú vlastnosť použite iný prechod
   
   
7. Pre trvanie a oneskorenie prechodu môžeme použiť sekundy alebo milisekundy. Nastavme trvanie na 1 sekundu a oneskorenie na 0,05 sekundy.
   
   
8. Pre funkciu načasovania máme niekoľko možností uvoľnenia. Poďme si vybrať Ease Out.
   
   
9. Ak chcete pridať vlastníctvo CSS, kliknite na znamienko Plus a vyberte ho z rozbaľovacieho zoznamu. Vyberme pozadie-farba.
   
   
10. Po výbere vlastníctva môžeme nastaviť konečnú hodnotu prechodu. V závislosti od vlastníctva, ktoré sme si vybrali, nám ponuka Konečná hodnota poskytne príslušné menu pre túto Vlastnosť. Pre farbu pozadia získame výber farby. Ak pridáme vlastnosť Font-Weight, dostaneme ponuku predvolených hmotností.
    
    
11. Nakoniec musíme zvoliť, kam vytvoriť prechod. Naše voľby sú Iba tento dokument alebo Nový súbor so štýlmi. Použime prvý.
    
    

Keď klikneme na tlačidlo Vytvoriť prechod, vidíme, že prechod bol uvedený na paneli Prechody CSS, čo naznačuje, že morfický prechod sa spustí akciou vznášania a aplikuje sa na cieľ a.morf.

Ak skontrolujeme zobrazenie kódu, vidíme, že do odkazu bola pridaná trieda morfov.

Keď myšou prejdeme cez odkaz v živom zobrazení, zmení sa farba pozadia.

Čo keby sme však potrebovali upraviť prechod? Môžeme to urobiť pomocou panela Prechody CSS.

1. Vyberte prechod a.morfu a ikona Upraviť sa aktivuje (ikona ceruzky).
   
   
2. Kliknutím na ikonu Upraviť otvorte dialógové okno Upraviť prechod. Tu môžeme podľa potreby zmeniť hodnoty alebo pridať novú vlastnosť a koncovú hodnotu.
   
   

Teraz, keď máme vytvorený morfický prechod, môžeme ho ľahko použiť na ďalšie prvky, pretože je teraz k dispozícii z ponuky Target Rule.

* Spoločnosť Adobe mi poskytla kópiu tohto softvéru na účely kontroly.

Copyright 2018 Adobe Systems Incorporated. Všetky práva vyhradené. Snímky obrazovky produktov spoločnosti Adobe dotlačené so súhlasom spoločnosti 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 a Flash Paper je / sú [a] registrované ochranné známky alebo ochranné známky spoločnosti Adobe Systems Incorporated v USA a / alebo iných krajinách.