Noen lenker om CSS-gradienter

En gang i blant ser det ut til at bloggtiden samler seg rundt et bestemt emne, og det er som om de lagrede artiklene i bokmerkemappen min har en samtale. Samtalen som sitter der inne nå handler om CSS-gradienter, og jeg tenkte jeg skulle linke til noen av de mer interessante delene.

• Dag 22: koniske gradienter — Manuel Matuzovic så på koniske gradienter på dag 21 av sin 100-dagers serie om moderne CSS, og ga en fin titt på høyt nivå på farger, vinkler, plassering og fargestopp. Så videre Dag 22, bruker han det på ::backdrop pseudo-element. (Forresten, Twitter uventet suspendert kontoen hans – la oss hjelpe til med å rette det skipet hvis vi kan.)
• Forstår du virkelig CSS radielle gradienter? - Patrick Brosset har gjort et guideverdig arbeid her og jeg jobber ærlig talt fortsatt meg gjennom det. Men jeg setter veldig pris på hans klare forklaringer og demoer av ting som jeg fortsatt demper opp, som nøkkelord for størrelsen og formen til en radiell gradient. Jeg kobler allerede dette opp i vårt eget CSS-gradientveiledning!
• Svært tilpassbare bakgrunnsgradienter – Hei, når vi snakker om radiell gradient, Scott Vandeheysin oppskrift på en med flere fargestopp gikk rundene forrige uke. Utfordringen hans var å lage et gradientmønster som kunne støtte forskjellige fargevariasjoner, som normalt ville være et varmt rot av CSS-klasser og fargeverdier for hver variant hvis ikke for bruk egendefinerte egenskaper. På denne måten kan han tilordne en egendefinert egenskap for de forskjellige fargene og plasseringsverdiene for hvert fargestopp, og deretter oppdatere verdiene avhengig av konteksten. Og hva mer er at måten egendefinerte egenskaper kan oppdateres med JavaScript tillot Scott bygge et verktøy for å tilpasse gradientmønsteret hans, som deles sjenerøst på slutten av innlegget.
• CSS Halvtonemønstre - Michelle Barker med en detaljert oversikt over Ana Tudors "halvtone"-mønstre. Effekten er omtrent som det stiplede blekktrykket i gamle skoleaviser. Mens Ana bruker Houdini under panseret for animasjon og sveveeffekter ser Michelle spesifikt på selve halvtoneeffekten og hvordan den er konstruert med en radiell gradient. Jeg elsker spesielt måten Michelle viser hvordan man kommer seg fra et enkelt rutenett med prikker til et der mønsteret er litt forskjøvet. Og hold deg til enden for å se hvordan hun setter inn effekten med en mask-image som bruker en lineær gradient for å skape en falmingseffekt. Jeg riffet litt med dette mønsteretogså, og avsluttet med noe pent som ser ut som et rennende blekkflekkfilter.
• En flott Navbar-løsning — Eric Meyer fikk en interessant designutfordring for en meny der en stiplet linje kommer ut av koblingen "gjeldende side" og blir en del av en større stiplet kantlinje langs venstre kant av innholdsbeholderen. Erik er alltid et godt eksempel på hvordan tenke som en front-end-utvikler, og han gjør det her mens han beskriver den alternative ruten han tok ved hjelp av en lineær gradient da han traff en hake med standardmetoden for innstilling border-style: dotted på elementet.
• Maskerte gradient stiplede linjer – Eric med en oppfølging av den siste lenken som ikke bare viser hvordan han koblet strekene på en venstre kantlinje til strekene på et rasterbilde, men hvordan hans skarpsindige designøye overbeviste ham om å endre løsningen for å etterligne den lavere oppløsningen til bildets streker ved å bruke to repeterende lineære bakgrunnsgradienter som en mask-image på bakgrunnsgradienten. Så nerdete og flott!