Генератор CSS-тіней для карток із попереднім переглядом | We.Inc
Створюйте багатошарові тіні CSS і переглядайте їх на картках послуг і цін на світлому й темному тлі, з видимим станом фокусу. Скопіюйте CSS і готовий компонент картки.
На сірому квадраті складно оцінити тінь. Тут ви налаштовуєте багатошарову box-shadow і бачите її на картці послуги й картці цін, на світлій або темній сторінці, а також перевіряєте рамку фокусу клавіатури клавішею Tab. Коли результат вас влаштує, скопіюйте CSS або всю картку як компонент. Усе працює у вашому браузері. Введені вами дані не надсилаються до We.Inc чи будь-кому іншому та зникають після закриття вкладки.
Виберіть готовий варіант або налаштуйте перший шар: горизонтальне й вертикальне зміщення, розмиття, розтягнення, колір, непрозорість і inset (внутрішню тінь).
Додайте до п’яти шарів. Багатошарові тіні (щільна й широка м’яка тінь) виглядають природніше за одну велику.
Перемикайте попередній перегляд між світлою й темною сторінкою. Натисніть Tab, щоб перейти до кнопок картки, і перевірте, чи рамка фокусу залишається видимою.
Перевірки попереджають, якщо тінь надто бліда на вибраному тлі або контраст тексту картки нижчий за WCAG AA.
Скопіюйте оголошення box-shadow або повний компонент картки з HTML і CSS.
На темному тлі тіні майже зникають. Натомість виберіть трохи світліший колір картки або відокремте її тонкою рамкою.
Для м’якшого вигляду зробіть колір тіні ближчим до кольору тла, а не чисто чорним.
Не покладайтеся лише на тінь, щоб показати фокус. Додайте також чіткий контур.
Великі значення розмиття потребують більше ресурсів для відображення. Не анімуйте їх у довгих списках.
Використовуйте на всьому сайті один або два рівні тіней, щоб глибина мала значення.
Поширені запитання
Як працює властивість CSS box-shadow?
box-shadow приймає горизонтальне зміщення, вертикальне зміщення, необов’язковий радіус розмиття, необов’язкове розтягнення та колір, а також ключове слово inset для внутрішньої тіні. Можна вказати кілька тіней, розділивши їх комами; перша відображатиметься поверх інших.
Чому багатошарові тіні виглядають краще?
Реальні об’єкти відкидають чітку тінь поруч із собою та широку м’яку тінь далі. Два або три шари з більшим розмиттям і меншою непрозорістю відтворюють цей ефект.
Чому тіні не видно на темному тлі?
Темна тінь на темній сторінці майже не має контрасту. Інструмент попередить вас про це. Підніміть картку світлішим кольором поверхні або непомітною рамкою.
Чи впливає box-shadow на доступність?
Тіні є декоративними, тож їм самим не потрібно відповідати правилам контрастності. Важливо, щоб текст картки залишався читабельним, а фокус позначався видимим контуром, а не лише зміною тіні.
Чи безплатний генератор CSS-тіней?
Так, реєстрація не потрібна. Скопіюйте код у будь-який проєкт.
Перевіряйте тіні на компонентах, які публікуватимете
Тінь, яка добре виглядає на окремому квадраті, може бути надто важкою на ряду карток цін або зникнути під фотографією. Перегляд на картках, які справді використовує сайт малого бізнесу, — картці послуги з піктограмою та виділеному плані цін — показує кінцевий результат.
Код компонента містить контур focus-visible, тож карткою можна користуватися за допомогою клавіатури з будь-якою вибраною тінню.