W tym temacie omówiono korzystanie z panelu Projektant CSS do stosowania i modyfikowania gradientów w tle strony WWW.
Panel Projektant CSS umożliwia stosowanie gradientów na tłach serwisu WWW. Właściwość „gradient” jest dostępna w kategorii „background” (Tło).
Kliknij ikonę 
obok właściwości gradient, aby otworzyć panel Gradienty. Panel ten umożliwia wykonywanie następujących czynności:
- Wybieranie kolorów w różnych modelach (RGBa, szesnastkowy lub HSLa). Następnie zapisz różne kombinacje kolorów jako próbki kolorów.
- Aby przywrócić nowy kolor do wartości oryginalnej, kliknij kolor oryginalny (K).
- Aby zmienić kolejność próbek, przeciągnij je na odpowiednie miejsca.
- Aby usunąć próbkę koloru, przeciągnij próbkę poza panel.
- Złożone gradienty można tworzyć przez ustawianie punktów zamknięcia kolorów. Kliknij w dowolnym miejscu między domyślnymi punktami zamknięcia koloru, aby utworzyć nowy kolor zamknięcia. Aby usunąć punkt koloru, przeciągnij punkt koloru poza panel.
- Określanie kąta gradientu liniowego.
- Aby powtórzyć wzorzec, edytuj właściwość background-repeat.
- Własne gradienty można zapisywać jako próbki.
Przypatrzmy się następującemu kodowi:
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: wskazuje kąt gradientu liniowego w stopniach
- rgba(255, 255, 255, 1.00): określa pierwszy kolor zamknięcia
- 0%: określa punkt zamknięcia
W programie Dreamweaver obsługiwane są tylko procentowe wartości punktów zamknięcia (%). Jeśli zostanie użyta inna jednostka, np. px lub em, program Dreamweaver zinterpretuje wartość jako pustą (nil). Ponadto program Dreamweaver nie obsługuje kolorów CSS. Podanie takich kolorów w kodzie spowoduje, że zostaną odczytane jako wartość „nil”.
Renderowanie gradientów w przeglądarkach WWW
Program Dreamweaver można skonfigurować w taki sposób, aby renderował gradienty tła w odpowiedni sposób dla poszczególnych przeglądarek WWW. Program Dreamweaver dodaje do kodu stosowne prefiksy dostawcy, co umożliwia przeglądarkom prawidłowe wyświetlanie gradientów.
Obok formatu w3c możliwe jest generowanie następujących prefiksów dostawców:
- Webkit
- Firefox
- Opera
Program Dreamweaver domyślnie generuje następujące prefiksy dostawcy: Webkit oraz Widok aktywny programu Dreamweaver. W oknie dialogowym Preferencje można wybrać również pozostałe prefiksy dostawcy (Preferencje > Style CSS).
W przypadku cienia Box, prefiksy Webkit i w3c są zawsze generowane niezależnie od tego, czy wybrano je w Preferencjach czy nie.
Wszelkie zmiany gradientu są również odzwierciedlane w składni specyficznej dla poszczególnych dostawców. Jeśli otwierasz istniejący plik zawierający składnie specyficzne dla dostawców w programie Dreamweaver, upewnij się, że wybierasz wymagane prefiksy dostawców w Preferencjach.Wynika to z faktu, że gdy użytkownik zastosuje lub zmieni gradienty, program Dreamweaver domyślnie uaktualni tylko kod dla prefiksu Webkit i Widok aktywny programu Dreamweaver. Pozostała część kodu specyficznego dla innych dostawców nie zostanie więc uaktualniona.
Zamiana obrazów i gradientów tła
Kolejność obrazów w tle i gradientów określoną w kodzie można zmienić jednym kliknięciem.
Kliknij strzałkę obok właściwości URL lub Gradient w CSS Designer.
Program Dreamweaver zawiera podstawową implementację funkcji zamiany tła. Jeśli jest używanych wiele wartości lub obrazów, funkcja zamiany może nie działać w oczekiwany sposób. Załóżmy, że jako tło zastosowano obraz, następnie drugi obraz, a następnie gradient. Zamiana gradientu spowoduje, że kolejność będzie następująca: gradient, drugi obraz, pierwszy obraz.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
