Dodaj ramki, zaokrąglij rogi i cienie.

Poznaj DXPR BuilderBuduj stronyStylizuj elementy

Opraw kartę w ramkę, zaokrąglij rogi zdjęcia albo unieś blok nad stronę cieniem. Wszystko to ustawisz w panelu Styl elementu, a po najechaniu zmienisz w panelu Styl najechania. Użyj tego, aby wyróżnić jedną kartę. Dla tej samej ramki w całej serii kart wspólna klasa utrzyma je podobne.

Film podąża za recepturą poniżej: zamienia blok tekstowy w kartę z ramką, okrągłymi rogami i cieniem, który pogłębia się po najechaniu.

Zanim zaczniesz

  • Otwórz stronę w DXPR Builder; wskazanie elementu pokazuje jego pasek sterowania z opcją More. Nowy w kreatorze? Zobacz Twoja pierwsza strona.
  • Zapisz w oknie zachowuje zmianę w edytorze. Zapisz na pasku narzędzi kreatora nad treścią zapisuje stronę i pokazuje „Saved field”.
  • Wyróżnij jedną rzecz. Ramka albo cień przyciąga wzrok do kluczowej daty, oferty albo cytatu. Nałóż je na wszystko, a przestaną działać.
  • Utrzymaj serię podobną. Dla tej samej ramki na wielu kartach zapisz jedną kartę jako szablon albo użyj wspólnej klasy. Zobacz HTML ID i klasy.
  • Pozwól motywowi stroić cienie. Pięć poziomów Drop shadow definiuje się raz dla całej witryny. Twój motyw może przemodelować poziom, a każdy element, który go używa, podąży.

Przepis: wyróżniona karta

Otrzymujesz miękki blok z cienką ramką w kolorze marki. Ma okrągłe rogi i cień, który rośnie po najechaniu.

  1. Najedź na element tekstowy, kliknij More, a potem Settings.
  2. Otwórz panel Styl. Model pudełkowy siedzi u góry. Jego kłódki zaczynają otwarte; kliknij kłódkę obok Padding, aby ją zamknąć, tak aby cztery boki poruszały się razem.
  3. Kliknij górny bok Padding, wpisz 32 i naciśnij Enter. Wszystkie cztery boki pokazują teraz 32px.
  4. Wybierz jasny kolor Tła, na przykład jasnoszary.
  5. Ustaw Styl ramki na Solid.
  6. Zamknij kłódkę obok ramki, a następnie kliknij jeden z jej boków, wpisz 1 i naciśnij Enter.
  7. Wybierz kolor ramki, ustaw promień rogów na 16 i cień na 3.
  8. Otwórz panel Styl najechania i ustaw Drop shadow na 5.
  9. Kliknij Zapisz w oknie, a potem Zapisz na pasku narzędzi.
  10. Wybierz Podgląd w menu widoku (ikona oka) i wskaż kartę. Jej cień się pogłębia.

Co widzisz

Panel Styl elementu tekstowego ze stylem ramki Solid, promieniem rogów 16 i cieniem 3, obok szarej karty wycieczki po kampusie z cienką ciemnoniebieską ramką, zaokrąglonymi rogami i miękkim cieniem

Karta ma cienką ramkę w twoim kolorze, okrągłe rogi i miękki cień pod spodem. W Podglądzie cień pogłębia się, gdy wskaźnik stoi nad kartą, i wraca, gdy z niej zejdzie.

Jak zbudowana jest ramka

Ramka potrzebuje trzech ustawień, a panel je rozdziela. Ustaw wszystkie trzy:

  1. Styl ramki wybiera linię: Solid, Dotted albo Dashed. Na Theme defaults większość elementów nie ma wcale ramki. None usuwa ramkę rysowaną przez twój motyw.
  2. Pierścień ramki w modelu pudełkowym ustawia szerokość każdego boku, od 0 do 50 px. Jeśli zostawisz puste, przeglądarka użyje własnej szerokości około 3 px.
  3. Kolor ramki ustawia kolor. Jeśli zostawisz puste, ramka przyjmie kolor tekstu.

Panel Styl elementu tekstowego z 2px w pierścieniu ramki, fioletową próbką koloru ramki i stylem ramki Dashed, obok bloku oferty Early bird z fioletową przerywaną ramką

Promień rogów zaokrągla wszystkie cztery rogi, od 0 do 100 px. Zaokrągla też tło i cień. Na obrazie zaokrągla samo zdjęcie.

Aby uzyskać koło, zrób element kwadratowym. Następnie ustaw promień rogów na połowę jego szerokości w pikselach: 100 dla elementu o szerokości 200 px. Dla szerszych dodaj klasę Circular (50% radius) w polu HTML classes. Na obrazie ta klasa zaokrągla ramkę wokół zdjęcia, nie zdjęcie, więc użyj tam promienia rogów.

Poziomy cieni

Poziom Cień pod elementem
0 Brak z DXPR Builder; decyduje twój motyw
1 2 px w dół, 7 px rozmycia, 20% czerni
2 4 px w dół, 12 px rozmycia, 30% czerni
3 5 px w dół, 25 px rozmycia, 30% czerni
4 8 px w dół, 38 px rozmycia, 30% czerni
5 12 px w dół, 57 px rozmycia, 30% czerni

Pięć białych kart oznaczonych Level 1 do Level 5, każda z głębszym i bardziej miękkim cieniem niż poprzednia

To są domyślne poziomy. Każdy poziom to współdzielony styl, nie wartość zapisana na twojej stronie, więc motyw może przestroić poziom dla całej witryny. Dla programisty twojego motywu: poziomy to zmienne CSS --dxb-box-shadow-1 do --dxb-box-shadow-5.

W panelu Styl najechania opcja Drop shadow ustawia poziom, gdy wskaźnik stoi nad elementem. Nowy cień pojawia się płynnie w 0,15 sekundy. Wyższy poziom po najechaniu sprawia, że karta wygląda na uniesioną.

HTML classes oferuje więcej kształtów: Lifted drop shadow, Raised drop shadow, 3D shadow i Curved horizontal drop shadow. Ma też bootstrapowe Small shadow, Default shadow i Large shadow. Użyj jednego cienia na element. Klasy cieni Bootstrapa biją suwak Drop shadow.

Jeśli nie widać ustawionej ramki, rogów ani cienia

  • Ramka się nie pojawia. Styl ramki jest na Theme defaults albo None. Wybierz Solid, Dotted albo Dashed.
  • Ramka jest grubsza niż chcesz. Nie ustawiono szerokości, więc przeglądarka używa około 3 px. Ustaw boki ramki w modelu pudełkowym.
  • Ramka ma zły kolor. Pusty kolor ramki przyjmuje kolor tekstu. Wybierz kolor ramki.
  • Rogi zostają kwadratowe. Klasa taka jak No rounded corners (rounded-0) w polu HTML classes albo reguła motywu z !important wygrywa. Usuń chip albo zapytaj webmastera o regułę motywu.
  • Rogi się zaokrąglają, ale koło się nie pojawia. Suwak kończy się na 100 px. Użyj klasy Circular (50% radius).
  • Cień nic nie zmienia. Bootstrapowa klasa cienia, na przykład Large shadow, w polu HTML classes wygrywa. Usuń jej chip. Poziom 1 też jest blady, więc do testu wybierz poziom 3.
  • Cień nie rośnie po najechaniu. Ustaw Drop shadow w panelu Styl najechania, nie w Styl, i wybierz wyższy poziom niż spoczynkowy.
  • Zmienił się tylko jeden bok. Kłódka obok Padding albo ramki była otwarta. Zamknij ją i wpisz wartość ponownie.
  • Cień najechania nigdy nie pokazuje się na telefonie. Ekrany dotykowe nie mają wskaźnika, więc wygląd najechania pokazuje się dopiero po stuknięciu.

Co dalej?

  • Odstępy: daj treści miejsce wewnątrz ramki.