👋 Демонстрації в цій статті експериментують із нестандартною помилкою, пов’язаною з градієнтами CSS і субпіксельним рендерингом. Їх поведінка може змінитися в будь-який час у майбутньому. Вони також важкі, як біс. Ми надаємо їх асинхронно, коли ви клацаєте, щоб завантажити, але все одно хочемо попередити вас, якщо вентилятор вашого ноутбука почне обертатися.
Ви пам’ятаєте той статичний шум на старих телевізорах без сигналу? Або коли сигнал поганий і картинка спотворена? Якщо концепція телевізійного сигналу виникла раніше, ось GIF, який показує, що саме я маю на увазі.
Перегляд зображення (містить медіафайли з автоматичним відтворенням)
Так, ми збираємося зробити щось подібне, використовуючи лише CSS. Ось що ми робимо:
Перш ніж ми почнемо копатися в коді, я хочу сказати, що є кращі способи створити ефект статичного шуму, ніж метод, який я вам покажу. Ми можемо використовувати SVG, , filter власність тощо. Насправді Джиммі Чіон написав a хороша стаття показує, як це зробити за допомогою SVG.
Те, що я буду робити тут, є свого роду експериментом CSS, щоб дослідити деякі прийоми використання помилки з градієнтами. Ви можете використовувати його у своїх побічних проектах для розваги, але використання SVG чистіше та більше підходить для реального проекту. Крім того, ефект поводиться по-різному в різних браузерах, тому, якщо ви перевіряєте їх, найкраще переглядати їх у Chrome, Edge або Firefox.
Давайте трохи пошумімо!
Щоб створити шумовий ефект, ми будемо використовувати... градієнти! Ні, немає жодного секретного інгредієнта чи нової властивості, завдяки якій це відбувається. Ми збираємося використовувати те, що вже є в нашому наборі інструментів CSS!
«Хитрість» полягає в тому, що градієнти погано справляються з згладжуванням. Ви знаєте ті зубчасті краї, які ми отримуємо, коли використовуємо жорсткі стоп-кольори? Так, я говорю про них у більшості випадків мої статті тому що вони трохи дратують, і нам завжди потрібно додати або видалити кілька пікселів, щоб згладити ситуацію:
Як бачите, друге коло відображається краще, ніж перше, оскільки є невелика різниця (0.5%) між двома кольорами в градієнті, а не використовувати прямий жорсткий колір, зупиніться на використанні цілих чисел, як у першому колі.
Ось ще один погляд, цього разу з використанням a conic-gradient де результат більш очевидний:
Цікава ідея спала на мене, коли я робив ці демонстрації. Замість того, щоб постійно виправляти спотворення, чому б не спробувати зробити навпаки? Я поняття не мав, що станеться, але це був веселий сюрприз! Я взяв значення конічного градієнта та почав зменшувати їх, щоб погані результати згладжування виглядали ще гірше.
Бачиш, який поганий останній? Це щось на кшталт перемішування посередині, і нічого не гладко. Давайте зробимо його повноекранним із меншими значеннями:
Я думаю, ви бачите, куди це веде. Ми отримуємо дивне спотворене зображення, коли використовуємо дуже малі десяткові значення для жорстких зупинок кольорів у градієнті. Народжується наш шум!
Ми все ще далекі від зернистого шуму, якого ми хочемо, тому що ми все ще можемо бачити фактичний конічний градієнт. Але ми можемо зменшити значення до дуже-дуже малих, наприклад 0.0001% — і раптом більше немає градієнта, а чиста зернистість:
Тада! У нас є шумовий ефект, і для цього потрібен лише один градієнт CSS. Б’юся об заклад, якби я показав вам це перед поясненням, ви б ніколи не помітили, що дивитеся на градієнт. Ви повинні дуже уважно подивитися на центр градієнта, щоб побачити його.
Ми можемо збільшити випадковість, зробивши розмір градієнта дуже великим, регулюючи його положення:
Градієнт застосовується до фіксованого 3000px квадрат і розміщений на 60% 60% координати. У цьому випадку ми навряд чи можемо помітити його центр. Те ж саме можна зробити і з радіальним градієнтом:
І щоб зробити речі ще більш випадковими (і ближчими до справжнього шумового ефекту), ми можемо комбінувати обидва градієнти та використовувати background-blend-mode щоб згладити речі:
Наш шумовий ефект ідеальний! Навіть якщо ми уважно подивимося на кожен приклад, там не буде жодного сліду будь-якого градієнта, а досить гарний зернистий статичний шум. Ми просто перетворили цю помилку згладжування на досконалу функцію!
Тепер, коли ми це маємо, давайте подивимося кілька цікавих прикладів, де ми можемо це використовувати.
Анімований немає телесигналу
Повертаючись до демонстрації, з якої ми почали:
Якщо ви перевірите код, то побачите, що я використовую CSS-анімацію для одного з градієнтів. Це справді так просто! Усе, що ми робимо, це блискавичне переміщення положення конічного градієнта (.1s) і ось що ми отримуємо!
Я використовував цю саму техніку під час завдання CSS art з одним розділом:
Фільтр зернистого зображення
Інша ідея полягає в застосуванні шуму до зображення, щоб отримати вигляд старого. Наведіть курсор миші на кожне зображення, щоб побачити його без шуму.
Я використовую лише один градієнт на псевдоелементі та змішую його із зображенням, завдяки mix-blend-mode: overlay.
Ми можемо отримати ще смішніший ефект, якщо використаємо CSS filter власність
І якщо ми додамо a mask ми можемо створити ще більше ефектів!
Обробка зернистого тексту
Ми також можемо застосувати той самий ефект до тексту. Знову ж таки, все, що нам потрібно, це пара ланцюжкових градієнтів на a background-image а потім змішайте фони. Єдина відмінність полягає в тому, що ми також тягнемося до background-clip тому ефект застосовується лише до меж кожного символу.
Генеративне мистецтво
Якщо ви продовжуєте грати зі значеннями градієнта, ви можете отримати більш дивовижні результати, ніж простий шумовий ефект. Ми можемо отримати випадкові форми, які дуже схожі генеративне мистецтво!
Звісно, до справжнього генеративного мистецтва, яке потребує великої праці, нам далеко. Але все одно приємно бачити, чого можна досягти за допомогою чогось, що технічно вважається помилкою!
Обличчя монстра
Останній приклад, для якого я створив CodePen Колекція див. жовтень 2022:
Підводячи підсумок
Сподіваюся, вам сподобався цей маленький CSS-експеримент. Ми не навчилися чогось «нового», але ми використали невелику примху з градієнтами та перетворили це на щось веселе. Я скажу це ще раз: це не те, що я хотів би використовувати в реальному проекті тому що хто знає, коли згладжування буде розглянуто в певний момент часу. Натомість це був дуже випадковий і приємний сюрприз, коли я на нього натрапив. Крім того, ним не так легко керувати, і він поводиться неоднаково в різних браузерах.
При цьому мені цікаво дізнатися, що ви можете з цим зробити! Ви можете грати зі значеннями, комбінувати різні шари, використовувати a filterабо mix-blend-mode, або що завгодно, і ви точно отримаєте щось справді круте. Поділіться своїми творіннями в розділі коментарів — призів немає, але ми можемо зібрати гарну колекцію!
