Några länkar om CSS-gradienter

Då och då tycks bloggtiden gå samman kring ett visst ämne och det är som att de sparade artiklarna i min bokmärkesmapp för en konversation. Konversationen som sitter där nu handlar om CSS-gradienter och jag tänkte länka några av de mer intressanta bitarna.

• Dag 22: koniska gradienter — Manuel Matuzovic tittade på koniska gradienter på dag 21 av sin 100-dagarsserie om modern CSS, vilket ger en snygg titt på hög nivå på färger, vinklar, placering och färgstopp. Sen på Dag 22, han använder det på ::backdrop pseudo-element. (Förresten, Twitter oväntat stängt av sitt konto – låt oss hjälpa till att rätta till det där skeppet om vi kan.)
• Förstår du verkligen CSS radiella gradienter? - Patrick Brosset har gjort ett guidevärdigt arbete här och jag jobbar ärligt talat fortfarande mig igenom det. Men jag uppskattar redan hans tydliga förklaringar och demonstrationer av saker som jag fortfarande dämpar, som nyckelord för storleken och formen på en radiell gradient. Jag kopplar redan upp det här i vårt eget CSS-gradientguide!
• Mycket anpassningsbara bakgrundsgradienter — Hej, på tal om radiell gradient, Scott Vandeheys recept på en med flera färgstopp gick runt förra veckan. Hans utmaning var att skapa ett gradientmönster som kunde stödja olika färgvariationer, vilket normalt skulle vara en het röra av CSS-klasser och färgvärden för varje variant om inte för att använda anpassade egenskaper. På så sätt kan han tilldela en anpassad egenskap för de olika färgerna och placeringsvärdena för varje färgstopp och sedan helt enkelt uppdatera värdena beroende på sammanhanget. Och vad mer är att sättet anpassade egenskaper kan uppdateras med JavaScript tillät Scott bygga ett verktyg för att anpassa hans gradientmönster, som delas generöst i slutet av inlägget.
• CSS Halvtonsmönster - Michelle Barker med en detaljerad uppdelning av Ana Tudors "halvtonsmönster". Effekten är ungefär som det prickade bläcktrycket på gamla skoltidningar. Medan Ana använder Houdini under huven för animering och svävningseffekter tittar Michelle specifikt på själva halvtonseffekten och hur den är konstruerad med en radiell gradient. Jag älskar särskilt sättet som Michelle visar hur man tar sig från ett enkelt rutnät av prickar till ett där mönstret är förskjutet lite. Och håll dig kvar till slutet för att se hur hon punkterar effekten med en mask-image som använder en linjär gradient för att skapa en blekningseffekt. Jag riffade lite med det här mönstretockså, och avslutade med något snyggt som ser ut som ett rinnande bläckfläcksfilter.
• En klockren Navbar-lösning — Eric Meyer fick en intressant designutmaning för en meny där en prickad linje kommer ut från länken "aktuell sida" och blir en del av en större prickad kant längs innehållsbehållarens vänstra kant. Eric är alltid ett bra exempel på hur man tänker som en frontend-utvecklare, och han gör det här när han beskriver den alternativa vägen han tog med en linjär gradient när han träffade en hake med standardmetoden för inställning border-style: dotted på elementet.
• Maskerade övertoning streckade linjer — Eric med en uppföljning till den sista länken som inte bara visar hur han kopplade strecken på en vänsterkant till strecken på en rasterbild, utan hur hans snålheta designöga övertygade honom att ändra sin lösning för att efterlikna den lägre upplösningen på bildens streck med två repeterande linjära bakgrundsgradienter som en mask-image på bakgrundsgradienten. Så nördigt och bra!