Nogle links om CSS-gradienter

En gang i mellem ser det ud til, at blogging-tidspunktet samler sig omkring et bestemt emne, og det er som om, at de gemte artikler i min bogmærkemappe fører en samtale. Samtalen, der sidder derinde nu, handler om CSS-gradienter, og jeg tænkte, at jeg ville linke nogle af de mere interessante stykker.

• Dag 22: koniske gradienter — Manuel Matuzovic kiggede på koniske gradienter på dag 21 i sin 100-dages serie om moderne CSS, hvilket gav et flot kig på højt niveau på farver, vinkler, placering og farvestop. Så videre Day 22, han bruger det på ::backdrop pseudo-element. (Forresten, Twitter uventet suspenderet sin konto — lad os hjælpe med at rette det skib, hvis vi kan.)
• Forstår du virkelig CSS radial-gradienter? — Patrick Brosset har udført guide-værdigt arbejde her, og jeg er ærlig talt stadig ved at arbejde mig igennem det. Men jeg sætter pris på hans klare forklaringer og demoer af ting, som jeg stadig dæmper op, som nøgleord for størrelsen og formen af ​​en radial gradient. Jeg forbinder allerede dette i vores eget Vejledning til CSS-gradienter!
• Meget tilpasselige baggrundsgradienter – Hej, apropos radial gradient, Scott Vandehey's opskrift på en med flere farvestop gik rundt i sidste uge. Hans udfordring var at skabe et gradientmønster, der kunne understøtte forskellige farvevariationer, hvilket normalt ville være et varmt rod af CSS-klasser og farveværdier for hver variation, hvis ikke for at bruge brugerdefinerede egenskaber. På denne måde kan han tildele en brugerdefineret egenskab for de forskellige farver og placeringsværdier for hvert farvestop og derefter blot opdatere værdierne afhængigt af konteksten. Og hvad mere er, er, at måden, tilpassede egenskaber kan opdateres med JavaScript, tillod Scott det bygge et værktøj til at tilpasse sit gradientmønster, som deles generøst sidst i opslaget.
• CSS Halvtone mønstre — Michelle Barker med en detaljeret opdeling af Ana Tudors "halvtone"-mønstre. Effekten er ligesom det prikkede blæktryk på gamle skoleaviser. Mens Ana bruger Houdini under hætten for animation og svæveeffekter ser Michelle specifikt på selve halvtoneeffekten, og hvordan den er konstrueret med en radial gradient. Jeg elsker især den måde, Michelle viser, hvordan man kommer fra et ligetil gitter af prikker til et, hvor mønsteret er forskudt en smule. Og hold dig til enden for at se, hvordan hun sætter ind i effekten med en mask-image der bruger en lineær gradient til at skabe en fading-effekt. Jeg riffede lidt med dette mønsterogså, og afviklet med noget pænt, der ligner et flydende blækklatfilter.
• En flot Navbar-løsning — Eric Meyer fik en interessant designudfordring til en menu, hvor en stiplet linje kommer ud af linket "aktuel side" og bliver en del af en større stiplet kant langs venstre kant af indholdsbeholderen. Erik er altid et godt eksempel på hvordan man tænker som en frontend-udvikler, og han gør det her, mens han beskriver den alternative rute, han tog ved hjælp af en lineær gradient, da han ramte en snag med standardmetoden for indstilling border-style: dotted på elementet.
• Maskerede gradient stiplede linjer - Eric med en opfølgning på det sidste link, der ikke kun viser, hvordan han forbandt stregerne på en venstre kant til stregerne på et rasterbillede, men hvordan hans skarpsindige designøje overbeviste ham om at ændre sin løsning for at efterligne den lavere opløsning af billedets streger ved hjælp af to gentagne lineære baggrundsgradienter som en mask-image på baggrundsgradienten. Så nørdet og fantastisk!