Додайте межі, заокруглення й тіні.

Обрамуйте картку, заокругліть кути фото або підніміть блок над сторінкою за допомогою тіні. Усе це задається на панелі Стиль елемента, а під час наведення змінюється на панелі Стиль наведення. Використовуйте це, щоб виокремити одну картку. Для тієї самої рамки на цілій серії карток спільний клас тримає їх схожими.

Відео повторює рецепт нижче: воно перетворює текстовий блок на картку з межею, круглими кутами й тінню, що глибшає під час наведення.

Перш ніж почати

• Відкрийте сторінку в DXPR Builder; наведення на елемент показує його панель керування з пунктом Більше. Уперше в конструкторі? Див. Ваша перша сторінка.
• Зберегти у діалозі зберігає зміну в редакторі. Зберегти на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено».
• Виокремте щось одне. Межа або тінь притягує погляд до ключової дати, пропозиції або цитати. Розмістіть її скрізь, і вона перестане працювати.
• Тримайте серію схожою. Для тієї самої рамки на багатьох картках збережіть одну картку як шаблон або скористайтеся спільним класом. Див. Ідентифікатор HTML і класи.
• Дайте темі налаштувати тіні. П’ять рівнів Падаюча тінь визначено один раз для всього сайта. Ваша тема може переоформити рівень, і кожен елемент, що його використовує, наслідує.

Рецепт: виокремлена картка

Ви отримуєте м’який блок із тонкою межею у вашому фірмовому кольорі. Він має круглі кути й тінь, що росте під час наведення.

1. Наведіть вказівник на елемент Текст, натисніть Більше, потім Налаштування.
2. Відкрийте панель Стиль. Блокова модель лежить нагорі. Її замки починаються відкритими; натисніть замок біля Внутрішнього відступу, щоб його закрити, тож його чотири сторони рухатимуться разом.
3. Натисніть верхню сторону Внутрішнього відступу, введіть 32 і натисніть Enter. Усі чотири сторони тепер показують 32px.
4. Виберіть світле Тло, наприклад блідо-сірий.
5. Задайте для параметра Стиль межі значення Суцільна.
6. Закрийте замок біля Межі, потім натисніть одну з її сторін, введіть 1 і натисніть Enter.
7. Виберіть Колір межі, задайте Радіус межі 16 і задайте Падаючу тінь 3.
8. Відкрийте панель Стиль наведення і задайте Падаючу тінь 5.
9. Натисніть Зберегти у діалозі, потім Зберегти на панелі інструментів.
10. Виберіть Попередній перегляд у меню перегляду (значок ока) і наведіть вказівник на картку. Її тінь глибшає.

Що ви бачите

Картка має тонку межу у вашому кольорі, круглі кути й м’яку тінь під нею. У режимі Попередній перегляд тінь глибшає, поки вказівник над карткою, і повертається, коли він іде.

Як створено межу

Межа потребує трьох налаштувань, і панель їх розносить. Задайте всі три:

1. Стиль межі вибирає лінію: Суцільна, Пунктирна або Штрихова. На Стандарти теми більшість елементів узагалі не має межі. Немає прибирає межу, яку малює ваша тема.
2. Кільце Межі блокової моделі задає ширину кожної сторони від 0 до 50 px. Якщо залишити його порожнім, браузер використовує власну ширину близько 3 px.
3. Колір межі задає колір. Якщо залишити його порожнім, межа бере колір тексту.

Радіус межі заокруглює всі чотири кути від 0 до 100 px. Він заокруглює також тло й тінь. На Зображенні він заокруглює сам малюнок.

Для кола зробіть елемент квадратним. Потім задайте для Радіуса межі половину його ширини в пікселях: 100 для елемента завширшки 200 px. Для будь-чого ширшого додайте клас Кругова (радіус 50%) під Класи HTML. На Зображенні цей клас заокруглює рамку навколо малюнка, а не малюнок, тож там скористайтеся Радіус межі.

Рівні падаючої тіні

Це стандартні рівні. Кожен рівень це спільний стиль, а не значення, збережене на вашій сторінці, тож тема може переналаштувати рівень для всього сайта. Для розробника вашої теми: рівні це змінні CSS від --dxb-box-shadow-1 до --dxb-box-shadow-5.

На панелі Стиль наведення Падаюча тінь задає рівень, поки вказівник над елементом. Нова тінь плавно з’являється за 0,15 секунди. Вищий рівень під час наведення робить картку піднятою.

Класи HTML пропонують більше форм: Піднята падаюча тінь, Підвищена падаюча тінь, 3D-тінь і Вигнута горизонтальна падаюча тінь. Вони також мають Малу тінь, Стандартну тінь і Велику тінь від Bootstrap. Використовуйте одну тінь на елемент. Класи тіней Bootstrap перемагають повзунок Падаюча тінь.

Якщо ви не бачите заданих межі, кутів чи тіні

• Межа не з’являється. Стиль межі: Стандарти теми або Немає. Виберіть Суцільна, Пунктирна або Штрихова.
• Межа товстіша, ніж хочете. Ширину не задано, тож браузер використовує близько 3 px. Задайте сторони Межі у блоковій моделі.
• Межа має неправильний колір. Порожній Колір межі бере колір тексту. Виберіть Колір межі.
• Кути залишаються квадратними. Такий клас, як Без заокруглених кутів (rounded-0) під Класи HTML, або правило теми з !important перемагає. Приберіть чип або запитайте свого вебмайстра про правило теми.
• Кути заокруглюються, але коло не з’являється. Повзунок зупиняється на 100 px. Скористайтеся класом Кругова (радіус 50%).
• Падаюча тінь нічого не змінює. Клас тіні Bootstrap, наприклад Велика тінь під Класи HTML, перемагає. Приберіть його чип. Рівень 1 також блідий, тож спробуйте рівень 3 для перевірки.
• Тінь не росте під час наведення. Задайте Падаючу тінь на панелі Стиль наведення, а не на панелі Стиль, і виберіть вищий рівень, ніж у спокої.
• Змінився лише один бік. Замок біля Внутрішнього відступу або Межі був відкритий. Закрийте його й введіть значення знову.
• Тінь наведення ніколи не показується на телефоні. Сенсорні екрани не мають вказівника, тож вигляд наведення показується лише після дотику.

Що далі?

• Відступи: дайте вмісту місце всередині межі.