Toto téma vám poskytne informace o tom, jak používat panel CSS Designer pro použití a úpravu přechodů u pozadí vašich webových stránek.
Prostřednictvím panelu CSS Designer můžete na pozadí svých webových stránek používat přechody. Vlastnosti přechodu naleznete v rámci kategorie pozadí.
Kliknutím na symbol 
u vlastnosti přechodu otevřete panel přechodů. Pomocí tohoto panelu můžete provést následující:
- Můžete vybírat barvy z různých barevných modelů (RGBa, Hexadecimální nebo HSLa). Poté uložte různé kombinace barev jako vzorky barev.
- Pokud budete chtít novou barvu změnit zpět na barvu původní, klikněte na původní barvu (K).
- Pořadí palet můžete měnit jejich přetažením na požadované místo.
- Chcete-li smazat vzorek barvy, přetáhněte vzorek z panelu.
- S využitím barevných záložek můžete vytvářet komplexní přechody. Kliknutím kdekoli v rozsahu výchozích barevných záložek vytvoříte další barevnou záložku. Chcete-li smazat barevný Stop, přetáhněte barevný Stop z panelu.
- Můžete určit úhel lineárního přechodu.
- Chcete-li vzorek opakovat, upravte vlastnost background-repeat.
- Můžete ukládat vlastní přechody a palety.
Pojďme si vysvětlit následující kód:
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
- 57deg: Představuje úhel lineárního přechodu
- rgba(255, 255, 255, 1.00): Barva první barevné záložky
- 0%: Definice barevné záložky
V aplikaci Dreamweaver lze pro barevné záložky používat pouze hodnoty „%“. Jestliže použijete další hodnoty, jako např. „px“ nebo „em“, aplikace Dreamweaver je vyhodnotí jako „nil“. Zároveň aplikace Dreamweaver nepodporuje barvy CSS a použijete-li je v rámci kódu, budou vyhodnoceny jako „nil“.
Vykreslování přechodů ve webových prohlížečích
Pokud jako pozadí použijete přechody, můžete v aplikaci Dreamweaver nastavit, aby se přechody řádně zobrazily v nejrůznějších webových prohlížečích. Aplikace Dreamweaver umožňuje doplnit kód o tovární předvolby, které umožní webovým prohlížečům vhodné zobrazení přechodů.
V aplikaci Dreamweaver lze v rámci formátu w3c zapisovat tovární předvolby pro následující platformy:
- Webkit
- Firefox
- Opera
Ve výchozím nastavení vytváří aplikace Dreamweaver tovární předvolby pro službu Webkit a živé zobrazení Dreamweaver. Tovární předvolby pro ostatní potřebné platformy můžete přidávat prostřednictvím dialogového okna Předvolby (Předvolby > Styly CSS).
Pro stín Box se prefixy Webkit a w3c vždy generují bez ohledu na to, zda jste je vybrali v Předvolbách nebo ne.
Veškeré změny přechodů se projeví také v syntaxi specifické pro dané platformy. Pokud otevřete existující soubor obsahující syntaxe specifické pro dodavatele v aplikaci Dreamweaver, ujistěte se, že zvolíte požadované prefixy dodavatele v Předvolbách.Při použití nebo změně přechodů totiž aplikace Dreamweaver aktualizuje pouze hodnoty kódu pro platformy Webkit a živé zobrazení Dreamweaver. Syntax v kódu pro ostatní platformy se tedy neaktualizuje.
Záměna obrázků a přechodů na pozadí
Jediným kliknutím můžete měnit pořadí obrázků a přechodů na pozadí, ve kterém jsou uvedeny v kódu.
Klikněte na šipku vedle vlastnosti URL nebo Přechod v nástroji CSS Designer.
Dreamweaver obsahuje základní implementaci funkce výměny pozadí.Pokud používáte několik hodnot nebo obrázků, záměna nemusí proběhnout podle vašich očekávání. Současně nyní předpokládejme, že chcete použít obrázek, další obrázek a přechod na pozadí. Záměna přechodu proběhne v následujícím pořadí: přechod, druhý obrázek, první obrázek.
Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.
