Přechody CSS3 v Dreamweaveru CS6

• Duben 26, 2024

S přidáním HTML5 a CSS3 se interaktivní webové stránky stávají očekávanými. Nyní s Dreamweaverem^R CS6 a nový panel CSS Transitions si můžete vytvořit vlastní interaktivní efekty bez nutnosti psát jakýkoli kód. Výstupem z tohoto procesu je pouze CSS3, bez JavaScriptu. Pokud tedy prohlížeč povolil JavaScript, nemusíte se obávat. Přechody vytvořené Dreamweaverem lze hrát v jakémkoli moderním webovém prohlížeči.

Podívejme se, jak snadné je vytvořit vlastní interaktivní přechody. Přechod lze použít na jakýkoli prvek třídy, ID nebo CSS. Musíme pouze nastavit hodnoty v panelu Přechody CSS.

1. Naším prvním krokem je vybrat prvek, na který chceme přechod použít. V našem příkladu to bude odkaz na menu.
   
   
2. Klepnutím na Window - CSS Transitions otevřete panel.
   
   
3. Na panelu Přechody CSS klepněte na znaménko Plus a přidejte přechod.
   
   
4. V dialogu Nový přechod můžeme pomocí nabídky Cíl pravidla vybrat z předvoleb nebo zadat vlastní název pro přechod. Napište název .morph.
   
   
5. Dále musíme zvolit akci, která spustí přechod. Z nabídky Přechod na vyberte Přechod, aby se přechod spustil, když umístíme myš na odkaz. Mezi další možnosti patří: aktivní, kontrolované, deaktivované, aktivované, zaostření, vznášení, neurčité a cílené.
   
   
6. Pro možnost nabídky máme dvě možnosti. Pojďme si vybrat první.
   
   Pro všechny vlastnosti použijte stejný přechod
   Pro každou vlastnost použijte jiný přechod
   
   
7. Pro trvání a zpoždění přechodu můžeme použít sekundy nebo milisekundy. Nastavíme trvání na 1 sekundu a zpoždění na 0,05 sekundy.
   
   
8. Pro funkci časování máme několik možností uvolnění. Pojďme zvolit Ease Out.
   
   
9. Chcete-li přidat vlastnost CSS, klikněte na znaménko Plus a vyberte jednu z rozbalovacího seznamu. Vyberme barvu pozadí.
   
   
10. Jakmile vybereme vlastnost, můžeme nastavit konečnou hodnotu pro přechod. V závislosti na vlastnosti, kterou jsme vybrali, nám nabídka Konečná hodnota poskytne odpovídající nabídku pro danou vlastnost. Pro barvu pozadí získáme výběr barvy. Pokud přidáme vlastnost Font-Weight, dostaneme nabídku přednastavených vah.
    
    
11. Nakonec musíme vybrat, kam vytvořit přechod. Naše možnosti jsou Pouze tento dokument nebo Nový soubor stylů. Pojďme použít první.
    
    

Jakmile klikneme na tlačítko Vytvořit přechod, můžeme vidět, že přechod byl uveden na panelu Přechody CSS, což naznačuje, že morfový přechod bude spuštěn akcí vznášení a aplikován na cíl a.morf.

Pokud zkontrolujeme zobrazení kódu, vidíme, že do odkazu byla přidána třída morphů.

Když přejdeme myší přes odkaz v živém zobrazení, změní se barva pozadí.

Ale co kdybychom potřebovali upravit přechod? Můžeme to udělat pomocí panelu CSS Transitions.

1. Vyberte a.morfní přechod a ikona Upravit bude aktivní (ikona tužky).
   
   
2. Klepnutím na ikonu Upravit otevřete dialogové okno Upravit přechod. Zde můžeme změnit hodnoty podle potřeby nebo přidat novou vlastnost a koncovou hodnotu.
   
   

Nyní, když máme vytvořen morfický přechod, můžeme jej snadno použít na další prvky, protože je nyní k dispozici v nabídce Target Rule.

* Adobe mi poskytla kopii tohoto softwaru pro účely kontroly.

Copyright 2018 Adobe Systems Incorporated. Všechna práva vyhrazena. Snímky obrazovky produktů Adobe přetištěné se souhlasem společ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 / jsou [a] registrovanou ochrannou známkou (značkami) nebo ochrannou známkou (značkami) společnosti Adobe Systems Incorporated ve Spojených státech a / nebo jiných zemích.

Video Návody: Fireworsk-cs6-First-Text-cz .avi (Duben 2024).