--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/ramki-i-cienie' title: 'Dodaj ramki, zaokrąglij rogi i cienie | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:57:59+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Dodaj ramki, zaokrąglij rogi i cienie' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:57:59+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/ramki-i-cienie' articleSection: 'Stylizuj elementy' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/ramki-i-cienie' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Stylizuj elementy](/pl/hc/documentation/learn-dxpr-builder/element-settings) # Dodaj ramki, zaokrąglij rogi i cienie. Poznaj DXPR BuilderBuduj stronyStylizuj elementy ## W tym przewodniku Powiązane przewodniki - [Dodaj odstępy wewnątrz elementów i wokół nich](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/odstepy) 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](/pl/hc/dokumentacja/nauka-dxpr-builder/pierwsze-kroki/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](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css). - **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 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. **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 | 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](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/odstepy): daj treści miejsce wewnątrz ramki.