Spraw, aby elementy reagowały na najechanie.

Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe

Spraw, aby element zmieniał się, gdy odwiedzający go wskaże: pudło unoszące się, przycisk ciemniejący, obraz jaśniejący. Wygląd spoczynkowy ustawiasz w panelu Style, a wygląd najechania w jego bliźniaku, panelu Hover style. Przykład buduje szare pudło tekstowe unoszące się po najechaniu.

Film nadaje pudłu tekstowemu tło, dopełnienie i cień pogłębiający się po najechaniu.

Budowanie pudła tekstowego

  1. Kliknij + w obszarze treści i wybierz Section z karty Layout.
  2. Kliknij + na sekcji i wybierz Row.
  3. Kliknij ikonę siatki na wierszu, wybierz kafelek z trzema równymi kolumnami i kliknij Save.
  4. Kliknij + w pierwszej kolumnie i wybierz Text z karty Content.
  5. Wpisz „Open day”, ustaw na Heading 3 i dodaj jeden wiersz pod nim.

Ustawienie stylu spoczynkowego

  1. W tym samym oknie ustawień otwórz panel Style.
  2. Wybierz jasnoszare Background.
  3. W modelu pudełkowym ustaw górny, lewy i dolny bok Padding na 24.
  4. Ustaw Border radius na 8.
  5. Ustaw Drop shadow na 1.

Ustawienie stylu najechania

  1. Otwórz panel Hover style.
  2. Ustaw Drop shadow na 4.
  3. Kliknij Save.
  4. Kliknij Save na pasku narzędzi kreatora DXPR.
  5. Otwórz menu widoku, ikonę oka na pasku narzędzi, i wybierz Preview.
  6. Przenieś wskaźnik na pudło tekstowe.

Co widzisz

W spoczynku pudło tekstowe jest szare, z zaokrąglonymi rogami i lekkim cieniem. Gdy wskaźnik je osiągnie, cień się pogłębia i pudło zdaje się unosić; gdy wskaźnik odejdzie, osiada z powrotem. Zmiana cienia jest animowana. Pozostałe zmiany najechania, na przykład nowy kolor, przełączają się od razu.

Ustawienia

Panel Hover style zawiera te same pola co panel Style. Pole pozostawione puste zachowuje wartość spoczynkową.

Pole Użycie po najechaniu
Margin, Border, Padding (model pudełkowy) Przesunięcie, obramowanie albo powiększenie elementu
Font color Wyróżnienie tekstu
Border color Podkreślenie obramowania
Background Zmiana wypełnienia
Background image, Background style, Background position Podmiana albo przesunięcie obrazu
Border style Pokazanie obramowania
Font size Powiększenie tekstu
Border radius Zaokrąglenie rogów
Opacity Odsłonięcie albo przyciemnienie elementu
Drop shadow Dodanie głębi, od 1 do 5

Typowe wzorce

  • Unoszenie karty: Drop shadow 1 w Style, 4 w Hover style.
  • Odsłonięcie obrazu: Opacity 0.7 w Style, 1 w Hover style.
  • Zmiana koloru przycisku: ciemniejsze Background w Hover style.
  • Wyróżnienie obramowaniem: Border style Solid z jasnym Border color w Style, akcentujący Border color w Hover style.

Jeśli nie widzisz efektu

  • Pudło tekstowe nie zmienia się po wskazaniu. Wartość najechania równa się wartości spoczynkowej albo przez pomyłkę ustawiono ją w panelu Style. Otwórz More > Settings i podnieś Drop shadow w panelu Hover style.
  • Efekt trudno ocenić podczas edycji. W trybie edycji element pokazuje też pasek narzędzi i obrys po wskazaniu. Wybierz Preview w menu widoku i wskaż ponownie.
  • Opacity, Font size albo Border radius ustawione na 0 nie działa. Wartość 0 liczy się jako nieustawiona dla tych trzech pól. Aby element prawie całkowicie wygasić, użyj Opacity 0.01.

Co dalej?