👋 Dema w tym artykule eksperymentują z niestandardowym błędem związanym z gradientami CSS i renderowaniem subpikseli. Ich zachowanie może się zmienić w dowolnym momencie w przyszłości. Są też ciężkie jak cholera. Obsługujemy je asynchronicznie w miejscu, w którym klikniesz, aby załadować, ale nadal chcemy Cię ostrzec na wypadek, gdyby wentylator Twojego laptopa zaczął się kręcić.
Czy pamiętasz ten szum statyczny na starych telewizorach bez sygnału? Lub gdy sygnał jest zły i obraz jest zniekształcony? Jeśli pojęcie sygnału telewizyjnego jest starsze niż ty, oto GIF, który pokazuje dokładnie, co mam na myśli.
Zobacz obraz (zawiera automatycznie odtwarzane multimedia)
Tak, zamierzamy zrobić coś takiego, używając tylko CSS. Oto, co robimy:
Zanim zaczniemy zagłębiać się w kod, chcę powiedzieć, że istnieją lepsze sposoby na stworzenie efektu szumu statycznego niż metoda, którą zamierzam wam pokazać. Możemy użyć SVG, The filter własności, itp. W rzeczywistości, Jimmy Chion napisał dobry artykuł pokazując, jak to zrobić za pomocą SVG.
To, co będę tutaj robił, to rodzaj eksperymentu CSS, aby zbadać kilka sztuczek wykorzystujących błąd z gradientami. Możesz go używać w projektach pobocznych dla zabawy, ale używanie SVG jest czystsze i bardziej odpowiednie dla prawdziwego projektu. Ponadto efekt zachowuje się inaczej w różnych przeglądarkach, więc jeśli je sprawdzasz, najlepiej przeglądać je w Chrome, Edge lub Firefox.
Zróbmy trochę hałasu!
Aby uzyskać ten efekt szumu, użyjemy… gradientów! Nie, nie ma żadnego tajnego składnika ani nowej właściwości, która to umożliwia. Zamierzamy użyć rzeczy, które już znajdują się w naszym zestawie narzędzi CSS!
„Sztuczka” polega na tym, że gradienty są złe w antyaliasingu. Znasz ten rodzaj postrzępionych krawędzi, które uzyskujemy, gdy używamy twardych kolorów stop? Tak, mówię o nich w większości moje artykuły ponieważ są trochę irytujące i zawsze musimy dodać lub usunąć kilka pikseli, aby wszystko wygładzić:
Jak widać, drugie koło renderuje się lepiej niż pierwsze, ponieważ istnieje niewielka różnica (0.5%) między dwoma kolorami w gradiencie, zamiast używać prostego, twardego przejścia koloru przy użyciu wartości liczb całkowitych, takich jak pierwsze kółko.
Oto inny wygląd, tym razem z użyciem a conic-gradient gdzie wynik jest bardziej oczywisty:
Podczas tworzenia tych dem przyszedł mi do głowy ciekawy pomysł. Zamiast naprawiać zniekształcenia przez cały czas, dlaczego nie spróbować zrobić czegoś przeciwnego? Nie miałem pojęcia, co się stanie, ale to była zabawna niespodzianka! Wziąłem wartości gradientu stożkowego i zacząłem je zmniejszać, aby słabe wyniki antyaliasingu wyglądały jeszcze gorzej.
Widzisz, jak zły jest ostatni? Jest to rodzaj pomieszania w środku i nic nie jest gładkie. Zróbmy to na pełnym ekranie z mniejszymi wartościami:
Przypuszczam, że widzisz, dokąd to zmierza. Otrzymujemy dziwny zniekształcony obraz, gdy używamy bardzo małych wartości dziesiętnych dla twardych kolorów w gradiencie. Rodzi się nasz hałas!
Nadal jesteśmy daleko od pożądanego ziarnistego szumu, ponieważ nadal możemy zobaczyć rzeczywisty gradient stożkowy. Ale możemy zmniejszyć wartości do bardzo, bardzo małych - np 0.0001% — i nagle nie ma już gradientu, ale czysta ziarnistość:
Tada! Mamy efekt szumu i wystarczy jeden gradient CSS. Założę się, że gdybym ci to pokazał przed wyjaśnieniem, nigdy byś nie zauważył, że patrzysz na gradient. Trzeba bardzo uważnie patrzeć na środek gradientu, żeby to zobaczyć.
Możemy zwiększyć losowość, zwiększając rozmiar gradientu, dostosowując jego położenie:
Gradient jest stosowany do stałego 3000px do kwadratu i umieszczony w 60% 60% współrzędne. W tym przypadku z trudem dostrzegamy jego środek. To samo można zrobić z gradientem promieniowym:
Aby uczynić rzeczy jeszcze bardziej losowymi (i bliższymi rzeczywistemu efektowi szumu), możemy połączyć zarówno gradienty, jak i użycie background-blend-mode załagodzić sytuację:
Nasz efekt szumu jest doskonały! Nawet jeśli przyjrzymy się uważnie każdemu przykładowi, nie ma tam śladu żadnego gradientu, ale raczej piękny ziarnisty szum statyczny. Właśnie zmieniliśmy ten błąd antyaliasingu w zgrabną funkcję!
Teraz, gdy to mamy, zobaczmy kilka interesujących przykładów, w których możemy go użyć.
Animowany brak sygnału telewizyjnego
Wracając do dema, od którego zaczęliśmy:
Jeśli sprawdzisz kod, zobaczysz, że używam animacji CSS na jednym z gradientów. To naprawdę takie proste! Wszystko, co robimy, to przesuwanie pozycji gradientu stożkowego w błyskawicznym tempie (.1s) i oto co dostajemy!
Użyłem tej samej techniki w jednodivowym wyzwaniu graficznym CSS:
Ziarnisty filtr obrazu
Innym pomysłem jest zastosowanie szumu do obrazu, aby uzyskać staroświecki wygląd. Najedź na każde zdjęcie, aby zobaczyć je bez hałasu.
Używam tylko jednego gradientu na pseudo elemencie i mieszam go z obrazem, dzięki mix-blend-mode: overlay.
Możemy uzyskać jeszcze zabawniejszy efekt, jeśli użyjemy CSS filter własność
A jeśli dodamy A mask do miksu, możemy uzyskać jeszcze więcej efektów!
Ziarnista obróbka tekstu
Ten sam efekt możemy zastosować również do tekstu. Ponownie, wszystko czego potrzebujemy to kilka połączonych gradientów na a background-image a następnie zmiksuj tła. Jedyna różnica polega na tym, że my też sięgamy background-clip więc efekt jest stosowany tylko do granic każdej postaci.
Sztuka generatywna
Jeśli nadal będziesz bawić się wartościami gradientu, możesz uzyskać bardziej zaskakujące wyniki niż zwykły efekt szumu. Możemy uzyskać losowe kształty, które wyglądają bardzo podobnie sztuka generatywna!
Oczywiście daleko nam do prawdziwej sztuki generatywnej, która wymaga dużo pracy. Ale nadal satysfakcjonujące jest zobaczenie, co można osiągnąć za pomocą czegoś, co jest technicznie uważane za błąd!
Twarz potwora
Ostatni przykład, dla którego zrobiłem CodePen's kolekcja divtober 2022:
Zamykając
Mam nadzieję, że podobał ci się ten mały eksperyment CSS. Nie do końca nauczyliśmy się czegoś „nowego”, ale podjęliśmy trochę dziwactwa z gradientami i zmieniliśmy to w coś zabawnego. powiem to jeszcze raz: to nie jest coś, co rozważyłbym przy użyciu prawdziwego projektu ponieważ kto wie, czy i kiedy antyaliasing zostanie w pewnym momencie rozwiązany. Zamiast tego była to bardzo przypadkowa i przyjemna niespodzianka, kiedy na nią wpadłem. Nie jest to również łatwe do kontrolowania i zachowuje się niespójnie w różnych przeglądarkach.
To powiedziawszy, jestem ciekaw, co możesz z tym zrobić! Możesz bawić się wartościami, łączyć różne warstwy, używać np filterlub mix-blend-mode, czy cokolwiek, a na pewno dostaniesz coś naprawdę fajnego. Podziel się swoimi dziełami w sekcji komentarzy — nie ma nagród, ale możemy stworzyć niezłą kolekcję!
