Enkele links over CSS-gradiënten

Af en toe lijkt de bloggentijd zich samen te voegen rond een bepaald onderwerp en het is alsof de opgeslagen artikelen in mijn bladwijzermap een gesprek voeren. Het gesprek dat daar nu plaatsvindt, gaat helemaal over CSS-gradiënten en ik dacht dat ik enkele van de interessantere stukken zou koppelen.

• Dag 22: kegelvormige hellingen — Manuel Matuzovic bekeek kegelvormige gradiënten op dag 21 van zijn 100-daagse serie over moderne CSS, wat een mooie kijk op hoog niveau gaf van kleuren, hoeken, plaatsing en kleurstops. Dan, op dag 22, hij gebruikt het op de ::backdrop pseudo-element. (Twitter trouwens onverwachts zijn account geschorst - laten we dat schip helpen als we kunnen.)
• Begrijp je CSS radiale-gradiënten echt? - Patrick Broset heeft hier gidswaardig werk gedaan en ik ben er eerlijk gezegd nog steeds mee bezig. Maar ik waardeer alvast zijn duidelijke uitleg en demo's van dingen die ik nog steeds verdoof, zoals trefwoorden voor de grootte en vorm van een radiale gradiënt. Ik koppel dit al in onze eigen Handleiding voor CSS-verlopen!
• Zeer aanpasbare achtergrondgradiënten — Hé, over radiale gradiënt gesproken, Scott Vandehey's recept voor een met meerdere kleurstops deed vorige week de ronde. Zijn uitdaging was om een ​​verlooppatroon te creëren dat verschillende kleurvariaties zou kunnen ondersteunen, wat normaal gesproken een hete warboel zou zijn van CSS-klassen en kleurwaarden voor elke variatie, zo niet om te gebruiken aangepaste eigenschappen. Op deze manier kan hij een aangepaste eigenschap toewijzen voor de verschillende kleuren en plaatsingswaarden voor elke kleurstop, en vervolgens de waarden eenvoudig bijwerken, afhankelijk van de context. En wat meer is, is dat de manier waarop aangepaste eigenschappen kunnen worden bijgewerkt met JavaScript, Scott in staat stelde om een tool bouwen om zijn verlooppatroon aan te passen, die genereus wordt gedeeld aan het einde van de post.
• CSS-halftoonpatronen - Michelle Barker met een gedetailleerde uitsplitsing van Ana Tudor's "halftoon" -patronen. Het effect is een beetje zoals de gestippelde inktafdruk van oude schoolkranten. Terwijl Ana gebruikt Houdini onder de motorkap voor animatie en zweefeffecten, kijkt Michelle specifiek naar het halftooneffect zelf en hoe het is opgebouwd met een radiaal verloop. Ik ben vooral dol op de manier waarop Michelle laat zien hoe je van een eenvoudig raster van stippen naar een patroon kunt gaan waar het patroon een beetje verspringt. En blijf tot het einde hangen om te zien hoe ze het effect accentueert met een mask-image die een lineair verloop gebruikt om een ​​vervagend effect te creëren. Ik heb een beetje gerifft met dit patroon, en eindigde met iets netjes dat eruitziet als een vloeibaar inktvlekfilter.
• Een onstuimige navigatie-oplossing — Eric Meyer kreeg een interessante ontwerpuitdaging voor een menu waarbij een stippellijn uit de link "huidige pagina" komt en onderdeel wordt van een grotere stippellijn langs de linkerrand van de inhoudcontainer. Eric is altijd een goed voorbeeld van hoe te denken als een front-end ontwikkelaar, en hij doet het hier terwijl hij de alternatieve route beschrijft die hij nam met behulp van een lineaire gradiënt toen hij een addertje onder het gras raakte met de standaardbenadering van instelling border-style: dotted op het element.
• Gemaskeerde gradiënt onderbroken lijnen — Eric met een vervolg op die laatste link die niet alleen laat zien hoe hij de streepjes van een linkerrand verbond met de streepjes van een rasterafbeelding, maar ook hoe zijn scherpzinnige ontwerpoog hem ervan overtuigde zijn oplossing te veranderen om de lagere resolutie van de de streepjes van de afbeelding met twee herhalende lineaire achtergrondgradiënten als a mask-image op het achtergrondverloop. Zo nerdy en geweldig!