Живі фони та градієнти: як оживити фон сайту

Що таке живий фон простими словами

Відкрий будь-яку нудну сторінку. Закладаємося, фон у неї один суцільний колір? Не потворно. Але й не чіпляє. Як кімната з білими стінами й лампою денного світла: жити можна, а хочеться скоріше піти.

Тепер постав у кут тієї самої кімнати теплий торшер. Світло мʼяко розтікається по стіні, дальні кути трохи темніші, фактура шпалер ледь читається. Нічого не кричить - а перебувати приємно. Ось це і є живий фон: він не малює картину, він створює атмосферу за спиною в контенту.

І гарна новина. Усе це робиться парою прийомів - без важких картинок та анімацій на весь екран.

Навіщо оживляти фон сторінки

Можна лишити фон пласким. Сторінка буде «нормальною». Тільки «нормальне» забувають за секунду, а живий фон працює на тебе весь час, поки людина читає.

• Глибина майже безкоштовно. Градієнт важить копійки й не гальмує сторінку - на відміну від фонової фотографії на пару мегабайтів.
• Настрій без слів. Тепле сяйво, холодна димка, неонова пляма - фон задає тон ще до того, як прочитано перший рядок.
• Менше «мертвих зон». Великі порожні шматки екрана перестають виглядати як недоробка.
• Зникає страх перебору. Потворний фон народжується не від браку ефектів, а від їхнього надлишку. Зрозумієш міру - і фон завжди в плюс.

Девʼять «кривих» фонів із десяти - це не брак прийомів, а їхній надлишок: три анімації, кислотний градієнт і зерно на максимум. Стриманість тут дорожча за фантазію.

З чого складається живий фон: чотири шари

Радіальне сяйво - як лампа в куті

Найдешевший спосіб оживити площину - кинути на неї радіальний градієнт Радіальний градієнт - перехід кольору по колу: яскравий центр плавно тане до країв. На відміну від лінійного (смуга зліва направо), він дає ефект плями світла або мʼякого джерела. . Одна мʼяка світла пляма, яка плавно розчиняється в основному кольорі фону.

Увесь секрет - у розмитті. Різка пляма бʼє як ліхтарик в обличчя. А ось дуже розмите, що йде в нуль біля країв - читається як сонце за хмарою. Саджай джерело за межі видимої області, у кут чи трохи назовні, щоб видно було лише «хвіст» сяйва.

Mesh-градієнт - шаруватий фон із кольорових плям

Наклади кілька радіальних плям різного кольору одна на одну - і вони змішаються в плавні переливи. Це і є mesh-градієнт Mesh-градієнт (mesh - сітка) - фон із кількох кольорових плям, накладених шарами. Їхні мʼякі краї перетікають один в одного, даючи відчуття живої, нерівної поверхні замість рівної смуги. , той самий «соковитий» фон із сучасних лендингів.

Тут уся хитрість - у кількості. Перевірена солодка зона - приблизно чотири-шість плям. Менше - бідно. Помітно більше - картинка пливе в бруд, а на слабких пристроях сторінка починає підгальмовувати. Бери два-три споріднені кольори плюс один акцент. Не веселку.

Легкий рух - щоб фон дихав, а не сіпався

Посунути фон - сильний прийом. І саме тут перебирають найчастіше. Правило коротке: повільно й непомітно. Сяйво, яке неквапливо пливе екраном за десятки секунд, додає життя. Та сама анімація за пару секунд - дратує й тягне увагу на себе.

Зерно й шум - дрібка фактури

Гладенький градієнт часом виглядає «пластиковим». А ще йде негарними смугами Смугастість (banding) - помітні сходинки-смуги на плавному градієнті. Виникають, коли відтінків не вистачає на гладенький перехід. Легке зерно розбиває смуги й ховає їх. там, де відтінків не вистачило на плавний перехід. Ліки - зерно: легкий шум поверх фону, як плівкове напилення. Воно вбиває цифрову стерильність і маскує смугастість.

Доза вирішує все. Зерно має вгадуватися, а не впадати в очі. Видно шум з першого погляду? Значить, його в рази більше, ніж треба. Кладеться воно зазвичай тонким напівпрозорим шаром поверх градієнта.

Як зібрати живий фон по шарах: приклад

Щоб не заплутатися, уяви фон як стос плівок: знизу щільна база, вище все прозоріше й тонше. Ось спокійний, але живий рецепт для темної сторінки.

База. Візьми не чистий чорний, а теплий темний відтінок - петрол, графіт, глибокий синій. Чистий чорний виглядає дешево й пласко.
Сяйво. Додай одну мʼяку радіальну пляму у верхній кут, кольором з акцентної палітри. Розмий так, щоб біля протилежного краю воно повністю розтануло в базі.
Друге джерело (за бажанням). Екран великий і порожній - кинь другу пляму в нижній кут, іншого відтінку й слабше за першу.
Зерно. Накинь зверху ледь помітний шар шуму. Мета - прибрати пластиковість, а не зробити наждачку. Видно зерно одразу - зменш.
Рух (опціонально). Змусь сяйво дуже повільно пливти, цикл у десятки секунд. І не забудь статичну версію для тих, хто вимкнув анімацію.

А ось той самий рецепт, але вже як бриф для нейронки - щоб не пояснювати «зроби красивіше» на пальцях, а одразу назвати шари словами.

Зроби живий фон для темної сторінки. База - не чистий чорний, а теплий темний відтінок (петрол, графіт або глибокий синій). Поверх - одне мʼяке радіальне сяйво з верхнього кута кольором з акцентної палітри, сильно розмите, до протилежного краю повністю розчиняється в базі. За бажанням друга пляма в нижньому куті, іншого відтінку й слабше. Зверху ледь помітний шар зерна, щоб прибрати пластиковість і сховати смугастість, без ефекту наждачки. Сяйво може дуже повільно пливти, цикл у десятки секунд, з обовʼязковою статичною версією за ввімкненого режиму «зменшити рух». Фон тримай тихше за текст: літери лишаються контрастними та читабельними.

Часті помилки у фонах і як їх уникнути

• Чистий чорний чи білий як база. Пласко й дешево. Візьми трохи теплий або трохи холодний відтінок - і одразу зʼявляється «дорогий вигляд».
• Сяйво як прожектор. Надто яскрава й різка пляма ріже око. Розмивай сильніше й саджай джерело в кут або за край екрана.
• Веселка замість палітри. Пʼять контрастних кольорів в одному градієнті - бруд на стиках. Бери споріднені відтінки плюс один акцент.
• Забагато плям. Перебір із шарами - гальма на слабких пристроях і візуальний шум. Тримайся в зоні чотири-шість.
• Швидка анімація. Рух за пару секунд дратує й відволікає від читання. Сповільнюй до десятків секунд на цикл.
• Ігнор режиму «зменшити рух». Для частини людей анімація - це фізично погано. Завжди лишай статичний запасний варіант.
• Зерно на максимум. Видно шум одразу - його кратно більше за потрібне. Воно має лише вгадуватися.
• Живий фон під довгим текстом. Переливи й рух під абзацами статті заважають читати. Під контентом фон роби тихше, ніж у герой-блоці.