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í.

Vlastnost přechodu
Vlastnost přechodu

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é můžete vlastní barevné kombinace ukládat jako barevné palety.
    • Pokud budete chtít novou barvu změnit zpět na barvu původní, klikněte na původní barvu (K).
    • Pořadí vzorků barev můžete měnit jejich přetažením na požadované místo.
    • Chcete-li barevnou paletu odstranit, přetáhněte ji mimo panel.
  • 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. Barevnou záložku odstraníte jejím přetažením mimo panel.
  • Můžete určit úhel lineárního přechodu.
  • Chcete-li vzorec opakovat, upravte vlastnosti opakování na pozadí.
  • Můžete ukládat vlastní přechody a vzorky palet.

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

Poznámka:

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).

Poznámka:

V případě stínů Pole se předvolby pro službu Webkit a w3c vytvoří vždy nezávisle na tom, zda je v nabídce Předvolby vyberete.

Veškeré změny přechodů se projeví také v syntaxi specifické pro dané platformy. Jestliže v aplikaci Dreamweaver CC otevřete stávající soubor obsahující syntaxi pro konkrétní platformu, ujistěte se, že v nabídce Předvolby zvolíte odpovídající tovární předvolby. 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.

Na panelu CSS Designer klikněte na šipku u vlastnosti URL nebo přechodu.

Poznámka:

Aplikace Dreamweaver CC nabízí základní implementaci funkce zá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.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online