Mõned lingid CSS-i gradientide kohta

Aeg-ajalt tundub, et ajaveebi zeitgiest ühineb teatud teema ümber ja minu järjehoidjate kausta salvestatud artiklid vestlevad. Praegune vestlus puudutab CSS-i gradiente ja mõtlesin, et lingin mõne huvitavama osa.

• 22. päev: koonilised kalded — Manuel Matuzovic vaatas oma 21-päevase kaasaegse CSS-i seeria 100. päeval koonuse gradiente, pakkudes kena kõrgetasemelist ülevaadet värvidest, nurkadest, paigutusest ja värvipeatustest. Siis edasi päev 22, kasutab ta seda ::backdrop pseudoelement. (Muide, Twitter ootamatult peatas ta konto - aitame selle laeva parandada, kui saame.)
• Kas sa tõesti mõistad CSS-i radiaalseid gradiente? - Patrick Brosset on siin giidi väärilist tööd teinud ja ausalt öeldes töötan ma siiani selle läbi. Kuid ma hindan juba tema selgeid selgitusi ja demosid asjadest, mida ma ikka veel summutan, näiteks radiaalse gradiendi suuruse ja kuju märksõnad. Seon selle juba meie omaga CSS-i gradientide juhend!
• Väga kohandatavad taustagradiendid - Hei, rääkides radiaalsest gradiendist, Scott Vandehey's retsept ühele, millel on mitu värvipeatust, jõudis eelmisel nädalal läbi. Tema väljakutseks oli luua gradientmuster, mis toetaks erinevaid värvivariatsioone, mis tavaliselt oleks CSS-i klasside ja iga variatsiooni värviväärtuste kuum segadus, kui mitte kasutada. kohandatud omadused. Nii saab ta määrata iga värvipeatuse jaoks kohandatud atribuudi erinevatele värvidele ja paigutusväärtustele ning seejärel lihtsalt värskendada väärtusi sõltuvalt kontekstist. Veelgi enam, viis, kuidas kohandatud atribuute saab JavaScriptiga värskendada, võimaldas Scottil seda teha luua tööriist tema gradiendi mustri kohandamiseks, mida postituse lõpus heldelt jagatakse.
• CSS-i pooltoonimustrid - Michelle Barker Ana Tudori “pooltooni” mustrite üksikasjaliku jaotusega. Mõju sarnaneb vanade koolilehtede täpilise tinditrükiga. Samal ajal kui Ana kasutab Houdini Animatsiooni- ja hõljukefektide katte all vaatab Michelle konkreetselt pooltooniefekti ennast ja seda, kuidas see on radiaalse gradiendiga konstrueeritud. Mulle meeldib eriti see, kuidas Michelle näitab, kuidas jõuda sirgjoonelisest punktide ruudustikust selliseni, kus muster on pisut nihutatud. Ja jääge lõpuni, et näha, kuidas ta märgib efekti tähega a mask-image mis kasutab tuhmumisefekti loomiseks lineaarset gradienti. Riffisin selle mustriga natuke, ja lõpuks sai midagi korralikku, mis näeb välja nagu vedel tindiplekkfilter.
• Võrratu navigeerimisriba lahendus — Eric Meyer sai huvitava kujundusliku väljakutse menüü jaoks, kus punktiirjoon väljub lingilt "praegune leht" ja muutub osaks suuremast punktiirjoonest sisukonteineri vasakpoolses servas. Eric on alati suurepärane näide kuidas mõelda nagu esiotsa arendaja, ja ta teeb seda siin, kirjeldades alternatiivset marsruuti, mille ta valis lineaarse gradiendi abil, kui tabas standardse seadistusviisiga tõrku. border-style: dotted elemendi peal.
• Maskeeritud gradiendi katkendjooned — Eric koos selle viimase lingi järguga, mis ei näita mitte ainult seda, kuidas ta ühendas vasaku äärise kriipsud rasterkujutise kriipsudega, vaid ka seda, kuidas tema pilkupüüdlik disainisilm veenis teda muutma oma lahendust, et jäljendada pildi madalamat eraldusvõimet. pildi kriipsud, kasutades kahte korduvat lineaarset taustagradienti kui a mask-image tausta gradiendil. Nii nohik ja suurepärane!