Néhány hivatkozás a CSS gradiensekről

Időnként úgy tűnik, hogy a blogírás egy bizonyos téma körül egyesül, és olyan, mintha a könyvjelzők mappájába mentett cikkek beszélgetnének. A most ott zajló beszélgetés a CSS Gradientekről szól, és gondoltam, linkelek néhány érdekesebb darabot.

• 22. nap: kúpos gradiensek - Manuel Matuzovic a modern CSS-ről szóló 21 napos sorozatának 100. napján a kúpos gradienseket vizsgálta meg, és magas szintű képet nyújtott a színekről, a szögekről, az elhelyezésről és a színmegállásokról. Aztán tovább Nap 22, használja a ::backdrop pszeudo-elem. (Egyébként a Twitter váratlanul felfüggesztette a fiókját – segítsünk rendbe tenni a hajót, ha tudunk.)
• Valóban érted a CSS radiális színátmeneteket? - Patrick Brosset kalauzhoz méltó munkát végzett itt, és őszintén szólva még mindig dolgozom rajta. De már nagyon értékelem világos magyarázatait és demóit olyan dolgokról, amelyeket még mindig elhallgatok, például kulcsszavakat a sugárirányú gradiens méretéhez és alakjához. Ezt már összekapcsolom a sajátunkban CSS Gradiens Guide!
• Nagymértékben testreszabható háttér színátmenetek - Hé, ha a sugárirányú gradiensről beszélünk, Scott VandeheyA múlt héten befutott a receptje egy több színstoppal. Kihívása az volt, hogy olyan színátmenetmintát hozzon létre, amely képes támogatni a különböző színváltozatokat, amelyek általában a CSS osztályok és színértékek forró káoszát jelentenék az egyes változatokhoz, ha nem használnák őket. egyedi tulajdonságok. Így minden színmegállóhoz egyéni tulajdonságot rendelhet a különböző színekhez és elhelyezési értékekhez, majd egyszerűen frissítheti az értékeket a kontextustól függően. Ráadásul az egyéni tulajdonságok JavaScript segítségével történő frissítése lehetővé tette Scott számára készítsen egy eszközt a színátmenet mintájának testreszabásához, amit a bejegyzés végén nagylelkűen megosztunk.
• CSS féltónusminták - Michelle Barker Ana Tudor „féltónusú” mintáinak részletes lebontásával. A hatás olyan, mint a régi iskolai újságok pontozott tintanyomata. Míg Ana használja Houdini Az animációs és lebegő effektusok motorháztetője alatt Michelle kifejezetten magát a féltónus-effektust vizsgálja, és azt, hogy az hogyan épül fel radiális színátmenettel. Különösen szeretem, ahogy Michelle megmutatja, hogyan lehet eljutni egy egyszerű pontrácstól egy olyanig, ahol a minta kissé eltolt. És maradjon a végére, hogy lássa, hogyan fejezi ki a hatást a mask-image amely lineáris gradienst használ a fading hatás létrehozásához. Kicsit riffeltem ezzel a mintával, és valami ügyes, ami úgy néz ki, mint egy folyós tintafoltszűrő.
• Lenyűgöző Navbar megoldás - Eric Meyer egy érdekes tervezési kihívást kapott egy olyan menühöz, ahol egy pontozott vonal jön ki az „aktuális oldal” hivatkozásból, és egy nagyobb pontozott keret részévé válik a tartalomtároló bal széle mentén. Eric mindig jó példa erre hogyan gondolkodjunk front-end fejlesztőként, és itt teszi meg, ahogy leírja az alternatív útvonalat, amelyet lineáris gradiens segítségével választott meg, amikor a beállítás szokásos megközelítésével elakadt. border-style: dotted az elemen.
• Maszkolt színátmenet szaggatott vonalak - Eric az utolsó link nyomon követésével, amely nemcsak azt mutatja be, hogyan kapcsolta össze a bal oldali szegély kötőjeleit egy raszteres kép kötőjeleivel, hanem azt is, hogyan győzte meg fürkésző tekintete, hogy változtassa meg a megoldást, hogy utánozza a kép alacsonyabb felbontását. a kép kötőjelei két ismétlődő lineáris háttér gradiens használatával, mint a mask-image a háttér gradiensén. Annyira hülye és nagyszerű!