Nekaj ​​povezav o prelivih CSS

Vsake toliko časa se zdi, da se blogerski zeitgiest združi okoli določene teme in kot da se shranjeni članki v moji mapi z zaznamki pogovarjajo. Pogovor, ki zdaj poteka tam, je namenjen Gradientom CSS in mislil sem, da bi povezal nekaj bolj zanimivih delov.

• 22. dan: stožčasti prelivi — Manuel Matuzovic si je 21. dan svoje 100-dnevne serije o sodobnem CSS ogledal stožčaste prelive, kar je zagotovilo lep pogled na visoki ravni barv, kotov, postavitve in barvnih postankov. Potem naprej Dan 22, ga uporablja na ::backdrop psevdoelement. (Mimogrede, Twitter nepričakovano blokiral svoj račun — pomagajmo popraviti to ladjo, če lahko.)
• Ali res razumete radialne gradiente CSS? - Patrick Brosset je tukaj opravil delo, vredno vodnika, in iskreno se še vedno prebijam skozi to. Vendar že cenim njegove jasne razlage in predstavitve stvari, ki jih še vedno zamolčam, na primer ključne besede za velikost in obliko radialnega gradienta. To že povezujem v naše Vodnik po gradientih CSS!
• Visoko prilagodljivi prelivi ozadja — Hej, ko že govorimo o radialnem gradientu, Scott VandeheyPrejšnji teden je zakrožil njegov recept za eno z več barvnimi postanki. Njegov izziv je bil ustvariti vzorec preliva, ki bi lahko podpiral različne barvne različice, kar bi običajno pomenilo vročo zmešnjavo razredov CSS in barvnih vrednosti za vsako različico, če ne bi uporabljal lastnosti po meri. Na ta način lahko dodeli lastnost po meri za različne barve in vrednosti umestitve za vsako barvno postajo, nato pa preprosto posodobi vrednosti glede na kontekst. In še več, način, na katerega je mogoče lastnosti po meri posodobiti z JavaScriptom, je Scottu omogočil zgraditi orodje za prilagajanje njegovega vzorca preliva, ki jo velikodušno delimo na koncu objave.
• Poltonski vzorci CSS - Michelle Barker s podrobno razčlenitvijo »poltonskih« vzorcev Ane Tudor. Učinek je nekako podoben pikčastemu tisku starih šolskih časopisov. Medtem ko Ana uporablja Houdini pod pokrovom za učinke animacije in lebdenja Michelle posebej obravnava sam učinek poltonov in kako je sestavljen z radialnim prelivom. Še posebej mi je všeč, kako Michelle pokaže, kako preiti iz preproste mreže pik v tisto, kjer je vzorec nekoliko zamaknjen. In držite se do konca, da vidite, kako poudarja učinek z a mask-image ki uporablja linearni gradient za ustvarjanje učinka bledenja. Malo sem se poigrala s tem vzorcem, in končal z nečim čednim, kar je videti kot filter za madeže črnila.
• Izjemna rešitev Navbar — Eric Meyer je dobil zanimiv oblikovalski izziv za meni, kjer pikčasta črta izhaja iz povezave »trenutna stran« in postane del večje pikčaste obrobe vzdolž levega roba vsebnika vsebine. Eric je vedno odličen primer kako razmišljati kot front-end razvijalec, in to naredi tukaj, ko opisuje alternativno pot, ki jo je ubral z uporabo linearnega gradienta, ko je naletel na oviro s standardnim pristopom nastavitve border-style: dotted na elementu.
• Zamaskirane gradientne črtkane črte — Eric z nadaljevanjem te zadnje povezave, ki prikazuje ne le, kako je povezal pomišljaje leve obrobe s pomišljaji rastrske slike, ampak tudi, kako ga je njegovo premišljeno oblikovalsko oko prepričalo, da je spremenil svojo rešitev, da posnema nižjo ločljivost slike. črtice slike z uporabo dveh ponavljajočih se linearnih prelivov ozadja kot a mask-image na prelivu ozadja. Tako piflarsko in super!