Na ou faʻafouina talu ai nei ata faʻafiafia i luga o laʻu upega tafaʻilagi ma se autu fou ma se vaega o tagata paionia, faʻaaogaina le tele o metotia na ou faʻasoa i lenei faasologa. O nisi o a'u fa'afiafiaga e suia foliga pe a fegalegaleai se tasi ma i latou po'o taimi eseese o le aso.
O lanu i luga o la'u itulau blog e suia mai le taeao seia oo i le po i aso uma. Ma, o loʻo i ai le kiona mode, lea e faʻaopoopoina ai lanu malulu ma se autu malulu, faʻaaloaloga a se faʻapipiʻi faʻapipiʻi ma se faiga faʻafefiloi.
A o ou galue i lenei mea, na amata ona ou mafaufau pe mafai e le CSS faʻatatau lanu lanu e mafai ona sili atu le pulea aʻo faʻafaigofieina foi le faagasologa. Faʻaaliga: I lenei aʻoaʻoga, o le a ou taulaʻi atu i tulaga taua o lanu ma le avanoa lanu OKLCH mo faʻataʻitaʻiga ata ma faʻafiafiaga. Afai e te mana'o e su'e loloto i lanu fa'atatau, na faia e Ahmad Shadeed se ta'iala sili ona lelei. Ae mo avanoa lanu, gamuts, ma OKLCH, na tusia e le matou lava Geoff Graham e uiga ia i latou.
O le fa'aaogaina faifaipea o elemene sa taua tele. Sa toe fa'aogaina tua'oi i so'o se taimi e mafai ai, fa'atasi ai ma fa'aloma ma fa'alava e fesoasoani i le fausiaina o ni vaaiga fou mai le ata lava e tasi. Na fanau mai i le tatau, ae na faʻamalosia ai foi le mafaufau i tulaga o faʻasologa nai lo vaaiga taʻitasi. Le fa'afitauli I le Fa'afouina Fa'afou ma le Manu'a Palettes Lanu Se'i o tatou sa'o i la'u lu'i. I Toon Titles e pei o lenei - faʻavae i luga o le 1959 Yogi Bear Show episode "Lullabye-Bye Bear" - ma o laʻu galuega masani, o paleti e faʻatapulaʻa i nai lanu filifilia.
Ou te faia ni paolo ma tints mai le mea ou te taʻua o laʻu lanu "faavae" e faʻalautele ai le paleti e aunoa ma le faʻaopoopoina o ni lanu.
I le Sketch, ou te galue i le avanoa lanu HSL, o lenei faiga e aofia ai le faʻateleina poʻo le faʻaitiitia o le tau mama o loʻu lanu faavae. O le mea moni, e le o se galuega faigata - ae o le filifilia o se lanu faʻavae ese e manaʻomia ai le fatuina o se seti fou o lanu ma tints. O le faia o lena mea ma le lima, faifai pea, e vave lava ona faigata.
Na ou taʻua le HSL - H (hue), S (saturation), ma le L (malamalama) - avanoa lanu, ae o se tasi lea o auala e faʻamatala ai lanu. RGB - R (mumu), G (lanumeamata), B (lanumoana) - atonu e sili ona masani ai, a itiiti mai i lona foliga Hex. O loʻo iai foʻi le LAB - L (malamalama), A (lanumeamata-mumu), B (lanumoana-samasama) - ma le fou, ae o lea ua lagolagoina lautele LCH - L (malamalama), C (chroma), H (lanu) - faʻataʻitaʻiga i lona OKLCH fomu. Faatasi ai ma le LCH - aemaise lava OKLCH i le CSS - E mafai ona ou fetuunai le tau mama o loʻu lanu faavae.
Pe mafai ona ou suia lona chroma. O le LCH chroma ma le HSL saturation e fa'amatala uma ai le malosi po'o le tamaoaiga o se lanu, ae latou te faia i auala eseese. O le LCH e tu'uina mai ia te a'u se va'aiga lautele ma sili atu ona va'ai fa'afefiloi i le va o lanu.
E mafai foi ona ou suia le lanu e fai ai se paleti lanu e tutusa le mama ma le chroma tau. I le HSL ma le LCH, o le fusi o alaleo e amata i le mumu, alu i le lanumeamata ma le lanumoana, ma toe foi i le mumu.
Aisea na Suia ai e OKLCH lo'u Mafaufau i Lanu Ole lagolago ole su'esu'e mo le avanoa lanu OKLCH ua salalau nei, e tusa lava pe le'i maua mea faigaluega mamanu - e aofia ai le Sketch. O le mea e lelei ai, e le tatau ona taofia oe mai le faʻaaogaina o le OKLCH. O tagata su'esu'e o le a fa'aliliu fiafia Hex, HSL, LAB, ma le RGB i le OKLCH mo oe. E mafai ona e faʻamatalaina se mea totino a le CSS ma se lanu faʻavae i soʻo se avanoa, e aofia ai le Hex: /* Lanu faavae */ --faavae: #5accd6;
So'o se lanu e maua mai ai o le a fa'aliliu otometi ile OKLCH: --faavae-malamalama: oklch(mai var(--faavae) [...]; } --faavae-ogatotonu: oklch(mai var(--faavae) [...]; } --faavae-pouliuli: oklch(mai var(--faavae) [...]; }
Lanu Relative As a Design System Mafaufau i le lanu e pei ona fai mai: "Ave le lanu lenei, sui, ona aumai lea ia te au le taunuuga." E lua auala e fetu'una'i ai se lanu: suiga atoatoa ma suiga fa'atatau. E foliga tutusa i le code, ae e matua ese lava amio pe a amata ona e fesuiai lanu faavae. O le malamalama i lena eseesega o le mea lea e mafai ona faʻaaogaina le lanu faʻatusatusa i se faiga. /* Lanu faavae */ --faavae: #5accd6;
Mo se faʻataʻitaʻiga, o le malamalama mama o loʻu lanu faʻavae o le 0.7837, ae o le pogisa e iai lona tau o le 0.5837. Ina ia faʻatusatusa le eseesega, ou te toesea le tau maualalo mai le maualuga ma faʻaoga le taunuuga e faʻaaoga ai le calc () galuega: --faavae-pouliuli: oklch(mai var(--faavae) Calc(l - 0.20) c h);
Ina ia maua se lanu mama, ou te faaopoopo le eseesega nai lo: --fa'avae-malamalama: oklch(mai var(--faavae) calc(l + 0.10) c h);
Chromao fetuutuunaiga e mulimuli i le faiga lava e tasi. Ina ia faʻaitiitia le malosi o laʻu lanu faavae mai le 0.1035 i le 0.0035, ou te toesea le tasi tau mai le isi: oklch(mai var(--faavae) l Calc(c - 0.10) h);
Ina ia fatuina se paleti o lanu, ou te fuafuaina le eseesega i le va o le tau o le lanu o laʻu lanu faavae (200) ma laʻu lanu fou (260): oklch(mai var(--faavae) l c calc(h + 60));
O na fa'atusatusaga e fa'amaoni. A ou toesea se aofaiga tumau, ou te fai atu lelei, "Ia toese i taimi uma lenei tele." E fa'apea fo'i pe a fa'aopoopoina tau fa'amautu: Calc(c - 0.10) Calc(c + 0.10)
Na ou aʻoaʻoina le tapulaa o lenei auala i le auala faigata. Ina ua ou faalagolago i le toesea o tulaga o le chroma tumau, na pa'u ifo lanu i le efuefu i le taimi lava na ou suia ai le faavae. O se paleti na aoga mo le tasi lanu na malepelepe mo le isi. E ese le amio fa'atele. A ou faʻateleina le chroma, ou te taʻu atu i le suʻega: "Faʻaitiʻitia le malosi o lenei lanu i se vaega." O le sootaga i le va o lanu e tumau pea, e tusa lava pe suia le faavae: Calc(c * 0.10)
O La'u Aveese, Fua, Taamilo i Tulafono
Fa'amama mama (fa'aopoopo pe toese), Fua chroma (faatele), Su'e le lanu (faaopoopo pe toese tikeri).
Ou te fuaina le chroma ona ou te mana'o i suiga malosi e fa'atatau i le lanu fa'avae. O sootaga lanu e fesuia'i, o lea e leai se uiga o le fa'ateleina o le lanu. O le malamalama e faʻaalia ma atoatoa - o le faʻateleina e masani ona maua ai iʻuga uiga ese.
Mai le tasi lanu i le autu atoa O le lanu tutusa e mafai ai ona ou faʻamalamalamaina se lanu faʻavae ma faʻatupu isi lanu uma ou te manaʻomia - faʻatumu, taʻavale, taofi faʻasolosolo, ata - mai ai. I lena taimi, o le lanu e taofi le avea o se paleti ma amata ona avea ma se faiga. SVG faʻataʻitaʻiga e masani ona toe faʻaaogaina nai lanu tutusa i luga o faʻatumu, paʻu, ma gradients. O lanu fa'atusa e mafai ai ona e fa'amatala fa'atasi na mafutaga ma toe fa'aoga i so'o se mea - e pei lava o tagata fai fa'afiafiaga na toe fa'aogaina tala'aga e fatu ai ni vaaiga fou.
Suia le lanu fa'avae tasi, ma fa'afouga otometi uma lanu e maua, e aunoa ma le toe fa'atatauina o se mea i le lima. I fafo atu o ata animated, e mafai ona ou faʻaogaina le auala lava lea e tasi e faʻamalamalama ai lanu mo setete o elemene fesoʻotaʻi e pei o faʻamau ma soʻotaga. O le lanu fa'avae na ou fa'aogaina i la'u "Lullabye-Bye Bear" Toon Title o se lanu moana e pei o le cyan. O le pito i tua o se gradient radial i le va o loʻu faavae ma se faʻaaliga pogisa.
Ina ia faia ni isi fa'aliliuga e matua'i 'ese'ese lagona, na'o lo'u mana'omia e sui le lanu fa'avae: --faavae: #5accd6; --grad-end: var(--faavae); --grad-amata: oklch(mai var(--faavae) Calc(l - 0.2357) Calc(c * 0.833) h);
Ina ia fusifusia na meatotino masani i laʻu SVG gradient e aunoa ma le faʻaluaina o lanu lanu, na ou suitulaga faʻamaʻa-faʻailoga taofi-lanu faʻailoga i sitaili laina:
O le isi, na ou manaʻomia e faʻamautinoa o laʻu Toon Text e faʻatusatusa i taimi uma ma soʻo se lanu faʻavae ou te filifilia. O le suiga o le hue 180deg e maua ai se lanu felagolagomai e mautinoa lava e oso mai - ae e mafai ona tetete ma le le fiafia: .text-light { fa'atumu: oklch(mai var(--faavae) l c calc(h + 180)); }
O le sifi 90° e maua ai se lanu lona lua manino e aunoa ma le atoatoa atoatoa: .text-light { fa'atumu: oklch(mai var(--faavae) l c calc(h - 90)); }
O laʻu faʻafiafiaga o le Quick Draw McGraw's 1959 Toon Title "El Kabong" e faʻaogaina ai auala tutusa ae faʻatasi ai ma se paʻu eseese. Mo se faʻataʻitaʻiga, o loʻo i ai se isi gradient radial i le va o le lanu faʻavae ma se paolo pogisa.
O le fale ma le la'au i tua e na'o ni paolo eseese o le lanu fa'avae tutusa. Mo na auala, ou te manaʻomia ni lanu faʻatumu faaopoopo se lua: .bg-mid { fa'atumu: oklch(mai var(--faavae) calc(l - 0.04) calc(c * 0.91) h); }
.bg-pouliuli { fa'atumu: oklch(mai var(--faavae) calc(l - 0.12) calc(c * 0.64) h); }
Pe a amata ona gaioi le Faavae
E oʻo mai i le taimi nei, o mea uma na ou faʻaalia e le tumau. E tusa lava pe fa'aaoga e se tasi se tagata piki lanu e sui ai le lanu fa'avae, e tupu vave lava lena suiga. Ae o ata fa'aaniani e seasea tu tumau - o le fa'ailoga o lo'o i le igoa. O lea la, afai o le lanu o se vaega o le faiga, e leai se mafuaaga e le mafai ai foi ona faʻaola.
Ina ia faʻaola le lanu faʻavae, e manaʻomia muamua ona ou vaevae i ana alalaupapa OKLCH— māmā, chroma, ma lanu. Ae o loʻo i ai se laʻasaga faʻaopoopo taua: Ou te manaʻomia le resitalaina o na tulaga taua e pei o mea faʻapitoa faʻapitoa. Ae o le a le uiga o lena mea?
Ona o le faaletonu, e le iloa e le masini su'esu'e pe o le CSS mea totino fa'apitoa e fa'atusalia se lanu, umi, numera, po'o se isi mea atoa. O lona uiga e masani ona le mafai ona faʻafesoʻotaʻi sologa lelei i le taimi o faʻafiafiaga, ma oso mai le tasi tau i le isi.
Le resitalaina o se meatotino fa'ale-aganu'u e ta'u atu ai i le su'esu'e le ituaiga o tau o lo'o fa'atusalia ma pe fa'afefea ona amio ile taimi. I lenei tulaga, ou te manaʻo i le suʻesuʻega e faʻaogaina aʻu lanu lanu e pei o numera ina ia mafai ona faʻaola malie.
@meatotonu --f-l {
syntax: "
@meatotonu --f-c {
syntax: "
@meatotonu --f-h {
syntax: "
A mae'a ona resitala, o nei meatotino fa'ale-aganu'u e amio pei o le CSS moni. E mafai e le su'esu'e ona fa'afeso'ota'i fa'ava'a i lea fa'avaa. Ona ou toe fausia lea o le lanu faavae mai na auala: --faavae: oklch(var(--f-l) var(--f-c) var(--f-h));
O le mea lea e mafai ai ona fa'aola le lanu fa'avae, e pei lava o so'o se isi tau numera. O se fa'afiafiaga faigofie "manava" lea e suia malie le mama i le taimi: @keyframes manava { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { fa'afiafiaga: manava 10s fa'afaigofie-i-i fafo e le gata; }
Ona o isi lanu uma e tumu, gradients, ma taʻi e maua mai --faʻavae, latou te ola faʻatasi uma, ma e leai se mea e manaʻomia ona faʻafouina ma le lima. Tasi Lanu Animated, Tele Aafiaga I le amataga o lenei faagasologa, sa ou mafaufau pe mafai ona ofoina atu e le CSS ni uiga lanu e sili atu avanoa ae faafaigofie ai foi ona faatino. Talu ai nei na ou faʻaopoopoina ai se talaʻaga fou o laʻu auro i le itulau faʻafesoʻotaʻi o laʻu upega tafaʻilagi, ma o le faʻataʻitaʻiga muamua na aofia ai moli suauʻu e susulu ma sasau.
Na ou mana'o e su'esu'e pe fa'afefea ona fa'aola le lanu e feso'ota'i CSS e mafai ai ona fa'amaonia le totonugalemu e ala i le valiina i lanu mai lamepa. Sa ou manao ia latou aafia le lalolagi o siomia ai i latou, e pei ona faia e le malamalama moni. O lea la, nai lo le fa'aolaina o lanu e tele, na ou fausia ai se tama'i moli e fa'aola ai na'o le tasi le lanu.
O laʻu galuega muamua o le tuʻuina lea o se faʻamaufaʻailoga i le va o le pito i tua ma aʻu lamepa:
Na ou faʻaogaina le mix-blend-mode: lanu aua e faʻaalia ai mea o loʻo i lalo aʻo faʻasaoina le malamalama o loʻo i lalo. Talu ai na'o lo'u mana'o ia fa'aalia le fa'alava pe a fa'aola fa'afiafiaga, na ou faia ai le fa'apipi'i opt-in: .svg-mine #overlay { fa'aaliga: leai; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { fa'aaliga: poloka; opacity: 0.5; } }
O lo'o fa'apipi'i, ae le'i feso'ota'i i lamepa. Sa ou manaomia se punavai malamalama. E faigofie a'u lamepa, ma o lo'o i ai i lamepa taitasi se elemene li'o na ou faanenefuina i se faamama. O le faamama e maua ai se faanene vaivai tele i luga o le li'o atoa.
Nai lo le fa'aola ese o le fa'aofuofu ma lamepa, ou te fa'aola se tasi fa'ailoga lanu "afi" ma maua mai mea uma mai lena mea. Muamua, ou te resitalaina ni mea totino masani e tolu mo auala OKLCH:
@property --fl-l {
syntax: "
Sa ou faagaioia na ala, ma tulei ma le loto i ai ni nai faavaa agai i le moli ina ia manino lelei le emoemo e pei o se moli:
@keyframes mumu { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; } 6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; } 12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; } 18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; } 24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; } 30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; } 36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; } 44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; } 52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; } 60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; } 68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; } 76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; } 84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; } 92% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
Ona ou faʻaogaina lea o le faʻafiafiaga i le SVG, o lea o loʻo avanoa ai le fefaʻasoaaʻi fesuiaiga i lamepa ma laʻu faʻapipiʻi:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { fa'afiafiaga: mumu 3.6s laina le i'u; faaesea: faaesea;
/* Fausia se lanu mumu mai ala fa'afiafia */ --mu: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lanu moli e maua mai le mumu */ --lamepa-autu: oklch(mai le var(--mu) calc(l + 0.05) calc(c * 0.70) h);
/* Ufiufi lanu e maua mai i le afi e tasi */ --overlay-tint: oklch(mai le var(--mu) Calc(l + 0.06) Calc(c * 0.65) Calc(h - 10)); } }
Mulimuli ane, na ou faʻaogaina na lanu na maua i moli susulu ma le faʻapipiʻiina latou te aʻafia ai: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > li'o, .svg-mine[data-animations=on] #mine-lamp-2 > li'o { fa'atumu: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { fa'aaliga: poloka; fa'atumu: var(--overlay-tint); opacity: 0.5; } }
Pe a sui le afi i le moli, e faamafanafana moli, ma mafanafana ai le vaaiga ia i latou. A maalili le afi, e faʻatasi mea uma. O le mea sili e leai se mea e tusia ma le lima. Afai ou te suia le lanu o le faavae poʻo le faʻapipiʻiina o le afi afi, o le faʻafouina atoa o le moli e faʻafouina i le taimi e tasi. E mafai ona e vaʻai i le faʻaiʻuga mulimuli i laʻu upega tafaʻilagi. Toe fa'aoga, Toe fa'aoga, Toe asia O na Hanna-Barbera animators na faʻamalosia e toe faʻaaogaina elemene ona o le manaʻomia, ae ou te toe faʻaaogaina lanu aua e faʻafaigofie ai laʻu galuega ma faigofie ona tausia. CSS fa'atatau lanu lanu e mafai ai ona ou:
Fa'amatala se lanu faavae e tasi, Faamatala pe faapefea ona fesootai isi lanu i ai, Toe fa'aaoga na mafutaga i soo se mea, ma Fa'aola le faiga e ala i le suia o le tau e tasi.
O lanu fa'atusa e le na'o le fa'afaigofieina o autu. E fa'amalosia ai se auala e mafaufau ai pe o fea lanu, pei o le gaioiga, e fa'amoemoeina - ma pe a suia se tasi tau e mafai ona suia ai se vaaiga atoa e aunoa ma le toe tusia o le galuega i lalo.
