Как да създадеш многослойни CSS сенки за реалистични ефекти на дълбочина
Професионалният уеб дизайн рядко използва една сенка. Вместо това се слагат множество сенки един върху друг, за да се симулира как светлината се държи в реалния живот. Когато гледаш карта, която плава над повърхност, виждаш както остра сенка директно под нея (контактна сенка), така и по-мек, разсеян ореол около нея. Генератор на сенки ти позволява да построиш първата сенка визуално, но разбирането как да комбинираш сенки ти дава много по-голям контрол върху дълбочината и визуалната йерархия.
Многослойните сенки отделят твоя дизайн от любителския вид на "една сенка на всичко". Те създават нюанси. Те ясно съобщават нивата на издигане. И правят дори простите компоненти да изглеждат полирани и замислени.
Защо единичната сенка е недостатъчна
Единичната сенка има присъщи ограничения. Ако я направиш достатъчно тъмна, за да се вижда дълбочина, изглежда груба. Ако я направиш достатъчно мека, за да изглежда естествена, може да не съобщава достатъчно издигане. Ако я разшириш, за да покажеш плаващо разстояние, може да замаже краищата на елемента.
Осветлението в реалния свят не работи с една сенка. Когато снимка лежи на маса, виждаш:
1. Остра, тъмна сенка директно под нея (контактна сенка) 2. По-мек, по-широк ореол около краищата (сенка на обкръжението) 3. Възможно е субтилно отражение или отскок на светлина от повърхността
Уеб дизайнът може да приближи това с CSS. Решението е многослойност — комбиниране на две, три или дори четири сенки, за да се създаде дълбочина, която единичните сенки не могат да постигнат.
Основата от две сенки
Най-често използваната многослойна сенка използва две сенки: една тясна, тъмна и близо до елемента, за да симулира контакт, и една разпръснена, мека и разсеяна, за да симулира въздух и разстояние.
Ето практичен пример:
box-shadow:
0px 1px 3px rgba(0, 0, 0, 0.15),
0px 8px 24px rgba(0, 0, 0, 0.12);Първата сенка (0px 1px 3px) се намира близо до елемента. Има минимално размазване и отместване. Това е контактната сенка — тъмната линия, която се появява където картата докосва повърхността. Она създава яснота на краищата.
Втората сенка (0px 8px 24px) се разпростира по-широко и се намира по-далеч. По-голямото Y отместване и силното размазване я правят мека и разсеяна. Това е сенката на обкръжението — нежния ореол, който обкръжава плаващите елементи.
Вместе те създават дълбочина, която изглежда естествена. Контактната сенка закрепва елемента. Сенката на обкръжението предполага разстояние.
Коригиране на сенките за различни нива на издигане
Многослойните сенки работят най-добре, когато изграждаш система на издигане. Карти на различни височини трябва да имат пропорционално различни сенки.
Ниво 1: Събтилна сенка на карта
Използвай за карти по подразбиране, блокове на съдържание и стандартни елементи на интерфейса:
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.08),
0px 4px 12px rgba(0, 0, 0, 0.10);Това е минимално. Контактната сенка е почти невидима. Сенката на обкръжението е лека. Използвай това, когато искаш йерархия без драма.
Ниво 2: Издигната сенка на карта
Използвай за състояния при наведение, избрани карти и интерактивни елементи, които имат нужда от повече присъствие:
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.12),
0px 12px 32px rgba(0, 0, 0, 0.15);Контактната сенка е малко по-тъмна и по-видима. Сенката на обкръжението е по-широка. Това сигнализира, че елементът е интерактивен или важен.
Ниво 3: Модално или наслойено прозорче
Използвай за падащи менюта, модали и елементи, които се намират ясно над останалия интерфейс:
box-shadow:
0px 4px 8px rgba(0, 0, 0, 0.16),
0px 24px 64px rgba(0, 0, 0, 0.20);И двете сенки са по-изразени. Контактната сенка е тъмна и видима. Сенката на обкръжението се разпростира далеч и широко. Това съобщава, че елементът е в топ на слоя.
Ниво 4: Драматична плаваща сенка
Използвай за главни елементи, премиум карти или намерено експресивни дизайни:
box-shadow:
0px 8px 16px rgba(0, 0, 0, 0.20),
0px 32px 80px rgba(0, 0, 0, 0.24);И двете сенки са силни. Това е противоположността на събтилното. Използвай спестимо и само когато дизайнът изисква висока драма.
Построяване на многослойни сенки стъпка по стъпка
Създаването на многослойни сенки е по-лесно, когато следваш процес.
Начни със сенката на обкръжението. Това е обикновено по-голямата, по-размазана сенка. Представи си, че светлинният източник е директно над твоя елемент. Сенката на обкръжението се разпростира нататък и надолу, създавайки ореол. Задай положително Y отместване (обикновено 8px до 32px), висок размер на размазване (16px до 64px), малък радиус на разширение (обикновено 0px или отрицателен) и ниска прозрачност (10% до 20%).
Добави контактната сенка. Тя се намира много по-близо до елемента. Задай малко Y отместване (1px до 4px), малко размазване (2px до 8px), нулев радиус на разширение и малко по-висока прозрачност (8% до 16%). Контактната сенка предотвратява сенката на обкръжението да изглежда плаваща.
Тествай комбинацията. Отвори твоя генератор на сенки, създай първо сенката на обкръжението, после отбележи стойностите. Създай втора сенка в същия инструмент, после копирай двете стойности и залепи ги заедно, разделени с запетая.
Коригирай пропорциите. Ако сенката изглежда твърде тежка, намали прозрачността на двете сенки еднакво. Ако изглежда твърде плоска, увеличи Y отместването на сенката на обкръжението. Ако краят е твърде размазан, увеличи малко размазването на контактната сенка.
Многослойни сенки за специфични компоненти
Различни компоненти се извличат от различни стратегии на слоеве.
Карти на продукти в електронната търговия
Картите на продукти трябва да се чувстват издигнати, но не неприемливо. Двуслойна сенка работи добре:
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.10),
0px 10px 28px rgba(0, 0, 0, 0.12);При наведение, укрепи двете сенки:
box-shadow:
0px 4px 8px rgba(0, 0, 0, 0.15),
0px 16px 40px rgba(0, 0, 0, 0.18);Това развитие кара сенката при наведение да изглежда като картата се издига по-близо до зрителя.
Таблици на дашборд
Таблиците често имат множество панели с различни нива на важност. Използвай три сенки за максимална дълбочина:
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.06),
0px 4px 8px rgba(0, 0, 0, 0.08),
0px 12px 24px rgba(0, 0, 0, 0.10);Подходът с три сенки създава гладка дълбочина без да изглежда хаотично.
Входни полета и контроли
Входните полета често използват вътрешни сенки. Комбинирай ги за по-добра визуална обратна връзка:
box-shadow:
inset 0px 1px 2px rgba(0, 0, 0, 0.06),
inset 0px 2px 6px rgba(0, 0, 0, 0.04);Или комбинирай вътрешни със външни за состояния на фокус:
box-shadow:
inset 0px 1px 2px rgba(0, 0, 0, 0.06),
0px 0px 0px 3px rgba(59, 130, 246, 0.20);Плаващи бутони за действия
Плаващите бутони се извличат от силни слои, тъй като се намират в топ на визуалната йерархия:
box-shadow:
0px 4px 8px rgba(0, 0, 0, 0.12),
0px 16px 32px rgba(0, 0, 0, 0.18);Това кара плаващия бутон да се чувства кликабилен и важен.
Използване на отрицателен радиус на разширение с множество сенки
Отрицателният радиус на разширение е подценен в многослойните сенки. Той затегна сенката, държейки я по-близо до краищата на елемента.
box-shadow:
0px 1px 3px -1px rgba(0, 0, 0, 0.12),
0px 8px 20px -4px rgba(0, 0, 0, 0.10);Отрицателните радиусите на разширение предотвратяват сенките да се разширяват твърде много, създавайки по-остър, по-контролиран вид. Това работи особено добре за компактни елементи на интерфейса като бутони или малки карти.
Цветни сенки в многослойни системи
Сенките не трябва да бъдат черни. Цветните сенки могат да добавят личност, докато слагаш слои.
За син интерфейс, опитай да слагаш синьо оцветена сенка с по-тъмна сенка:
box-shadow:
0px 2px 4px rgba(30, 60, 130, 0.12),
0px 12px 32px rgba(0, 0, 0, 0.10);За топли дизайни, слагай топло кафяво с неутрално тъмно:
box-shadow:
0px 2px 4px rgba(140, 90, 50, 0.10),
0px 12px 32px rgba(50, 40, 30, 0.12);Цветните сенки изглеждат модерни и могат да укрепят идентичността на марката. Держи прозрачността ниска — цветни сенки с висока прозрачност изглеждат карикатурни.
Производителност и поддръжка на браузър
Многослойните сенки се поддържат напълно във всички съвременни браузери. Няма наказание за производителност при използване на две или три сенки в сравнение с една. Двигателят на CSS ги рендира ефективно.
Обаче избягвай прекомерното слагане на слои — четири или повече сенки на множество елементи могат да влияят на производителността при рендериране на мобилни устройства или по-стари компютри. Две до три сенки на елемент е оптимално. Спести тежкото слагане на слои за главни елементи или интерактивни състояния.
Тестване на многослойни сенки
Многослойните сенки разкриват своя истински характер само на реалистични фонове и съдържание. Винаги тестватай срещу:
1. Действителния цвят на фона на твоята страница 2. Реално съдържание — не само оцветена кутия 3. Различни размери на екрана (сенките могат да се чувстват различно на мобилен телефон) 4. Тъмен режим, ако твоя интерфейс го поддържа 5. До други осенени елементи на различни нива на издигане
Сенка, която изглежда идеална в изолация, може да се чувства неместна в контекст.
Чести грешки с многослойни сенки
Използване на идентични стойности за двете сенки. Ако и двете сенки имат една и съща прозрачност, размазване и отместване, те се сливат в една тежка сенка. Варирай стойностите значително — тясна, тъмна контактна сенка и мека, по-лека сенка на обкръжението.
Твърде много слои. Три е практическият максимум. Четири сенки рядко изглеждат по-добре от три и струват производителност. Ако имаш нужда от повече дълбочина, корегирай съществуващите сенки вместо да добавяш още.
Игнориране на радиуса на разширение. Положителното разширение разширява двете сенки еднакво и изглежда тежко. Отрицателното разширение (особено на сенката на обкръжението) създава по-чист, по-остър вид дълбочина.
Неприлагане на сенките при наведение и активни състояния. Многослойните сенки трябва да се променят при взаимодействие. Увеличи двете сенки при наведение, за да сигнализираш, че елементът е активен. Намали ги или изравни елемента при активни/натиснати състояния.
Забравяне на прозрачността. Прозрачността е най-лесният контрол за регулиране. Ако многослойна сенка изглежда твърде тежка, първо намали прозрачността. Потъмняването на цвета или увеличаването на размазването рядко помагат, ако прозрачността е вече твърде висока.
Построяване на твоята система на сенки
След като разбереш многослойните сенки, създай последователна система за твоя проект. Документирай три до пет нива на издигане:
- Ниво 1: Две събтилни сенки за карти по подразбиране
- Ниво 2: Две средни сенки за интерактивни елементи
- Ниво 3: Две или три силни сенки за модали
- Ниво 4: Избираема драматична сенка за главни елементи
Копирай тези стойности в твоите CSS променливи или дизайнерски токени. Преизползвай ги по твоя интерфейс. Последователността кара дизайнът да се чувства намерен и полиран.
Когато се заседнеш да стилизираш нов компонент, вместо да твориш нови стойности на сенки, попитай: "На какво ниво на издигане принадлежи този компонент?" След това приложи подходящата сенка от твоята система.
Многослойните CSS сенки трансформират обикновенни интерфейси в дизайни, които се чувстват премислени, модерни и ясно структурирани. Те не струват нищо — без картинки, без допълнителни елементи на DOM, само CSS. Инвестицията в разбиране как да ги комбинираш се изплаща по всеки проект.