Kilka linków o gradientach CSS

Od czasu do czasu najbardziej aktualne blogowanie wydaje się skupiać wokół określonego tematu i to tak, jakby zapisane artykuły w moim folderze zakładek prowadziły rozmowę. Rozmowa tam teraz dotyczy gradientów CSS i pomyślałem, że połączę niektóre z bardziej interesujących fragmentów.

• Dzień 22: stożkowe gradienty — Manuel Matuzovic przyjrzał się gradientom stożkowym w 21. dniu swojej 100-dniowej serii o nowoczesnym CSS, zapewniając ładne spojrzenie na wysoki poziom kolorów, kątów, rozmieszczenia i zatrzymania kolorów. Następnie, dalej Dzień 22, używa go na ::backdrop pseudoelement. (Nawiasem mówiąc, Twitter niespodziewanie zawiesił swoje konto — pomóżmy naprawić ten statek, jeśli możemy.)
• Czy naprawdę rozumiesz radialne gradienty CSS? - Patricka Brosseta wykonałem tutaj pracę godną przewodnika i szczerze nadal przechodzę przez to. Ale wcześniej doceniam jego jasne wyjaśnienia i prezentacje rzeczy, które wciąż tłumię, takie jak słowa kluczowe określające rozmiar i kształt gradientu promieniowego. Już łączę to w naszym własnym Przewodnik po gradientach CSS!
• Wysoce konfigurowalne gradienty tła — Hej, mówiąc o nachyleniu promieniowym, Scotta VandeheyaW zeszłym tygodniu pojawił się w obiegu przepis na jeden z wieloma przystankami koloru. Jego wyzwaniem było stworzenie wzoru gradientu, który mógłby obsługiwać różne wariacje kolorów, co normalnie byłoby gorącym bałaganem klas CSS i wartości kolorów dla każdej odmiany, gdyby nie użycie właściwości niestandardowe. W ten sposób może przypisać niestandardową właściwość dla różnych kolorów i wartości położenia dla każdego przejścia koloru, a następnie po prostu zaktualizować wartości w zależności od kontekstu. Co więcej, sposób, w jaki można aktualizować właściwości niestandardowe za pomocą JavaScript, umożliwił Scottowi zbudować narzędzie do dostosowywania jego wzoru gradientu, który jest hojnie udostępniany na końcu wpisu.
• Wzory półtonów CSS - Michelle Barker ze szczegółowym podziałem wzorów „półtonów” Any Tudor. Efekt przypomina kropkowany druk atramentowy starych szkolnych gazet. Podczas gdy Ana używa Houdini pod maską animacji i efektów najechania, Michelle przygląda się w szczególności samemu efektowi półtonów i temu, jak jest skonstruowany z gradientem promieniowym. Szczególnie podoba mi się sposób, w jaki Michelle pokazuje, jak przejść z prostej siatki kropek do takiej, w której wzór jest nieco rozłożony. I trzymaj się do końca, aby zobaczyć, jak podkreśla efekt mask-image który używa gradientu liniowego, aby stworzyć efekt blaknięcia. Trochę riffowałem z tym wzorem, i na koniec z czymś schludnym, co wygląda jak cieknący filtr atramentowy.
• Efektowne rozwiązanie paska nawigacyjnego — Eric Meyer otrzymał ciekawe wyzwanie projektowe dotyczące menu, w którym przerywana linia wychodzi z linku „bieżąca strona” i staje się częścią większej kropkowanej ramki wzdłuż lewej krawędzi pojemnika z treścią. Eric jest zawsze świetnym przykładem jak myśleć jak front-end developer, i robi to tutaj, opisując alternatywną trasę, którą wybrał, używając liniowego nachylenia, gdy natrafił na szkopuł przy standardowym podejściu do ustawienia border-style: dotted na elemencie.
• Zamaskowane linie przerywane gradientu — Eric z kontynuacją tego ostatniego łącza, pokazującą nie tylko, w jaki sposób połączył kreski lewej krawędzi z kreskami obrazu rastrowego, ale także jak jego przenikliwe oko projektowe przekonało go do zmiany rozwiązania, aby naśladować niższą rozdzielczość obrazu rastrowego. kreski obrazu przy użyciu dwóch powtarzających się liniowych gradientów tła jako a mask-image na gradiencie tła. Tak nerdy i świetnie!