Podręcznik użytkownika Anuluj

Stosowanie gradientów na tło

 

 

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

Właściwość gradient
Właściwość gradient

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). Kombinacje kolorów można następnie zapisać w postaci próbek.
    • 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 ją 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ąć kolor zamknięcia, przeciągnij go poza panel.
  • Określanie kąta gradientu liniowego.
  • Aby wzór był powtarzany, zmodyfikuj 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%)
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%)
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
Uwaga:

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

Uwaga:

W przypadku właściwości cienia pola (box-shadow) zawsze generowane są prefiksy Webkit i w3c, niezależnie od tego, czy zostały wybrane w oknie Preferencje, czy też nie.

Wszelkie zmiany gradientu są również odzwierciedlane w składni specyficznej dla poszczególnych dostawców. Otwierając w programie Dreamweaver CC istniejący plik, który zawiera składnię specyficzną dla dostawcy, należy pamiętać o wybraniu odpowiednich prefiksów dostawcy w oknie Preferencje. 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 panelu Projektant CSS.

Uwaga:

Program Dreamweaver CC 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.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?