ኣብ’ዚ ቀረባ እዋን ኣብ መርበብ ሓበሬታይ ዘሎ ተንቀሳቓሲ ስእልታት ብሓድሽ ቴማን ብጉጅለ ፈለምቲ ገጸ ባህርያትን ኣሐዲሰዮ ኣለኹ፣ ኣብ’ዚ ተኸታታሊ ፊልም ዘካፈልክዎ ብዙሕ ሜላታት ኣብ ግብሪ ኣውዒለዮ ኣለኹ። ገለ ውሑዳት ካብተን ኣኒሜሽነተይ ሓደ ሰብ ምስኦም ወይ ኣብ ዝተፈላለየ እዋን መዓልቲ ክራኸብ ከሎ መልክዕ ይቕይራ።
ኣብ ልዕሊ ገጻት ብሎገይ ዘሎ ግራፊክ ዘሎ ሕብርታት መዓልታዊ ካብ ንግሆ ክሳብ ለይቲ ይቕየር። ብድሕሪ’ዚ፡ እቲ በረድ ሞድ ኣሎ፡ እዚ ድማ ብዝሑል ሕብርታትን ክረምታዊ ቴማን ይውስኽ፡ ብኣኽብሮት ናይ ምድብላቕ ንጣብን ምትሕውዋስ ሞድን’ዩ።
ኣብዚ እናሰርሐ ከለኹ፡ CSS ተዛማዲ ሕብራዊ ክብርታት ዝያዳ ቁጽጽር ክህቡኒ ይኽእሉ ድዮም፡ ኣብ ርእሲኡ ድማ ነቲ መስርሕ ከቃልል ይኽእል ድዩ ዝብል ሕቶ ክመጸኒ ጀሚረ። መተሓሳሰቢ፡ ኣብ’ዚ ትምህርቲ’ዚ፡ ኣብ ተዛማዲ ሕብራዊ ክብርታትን ንቴሚንግ ግራፊክስን ኣኒሜሽንን ዝኸውን ናይ OKLCH ሕብራዊ ቦታን ከድህብ’የ። ኣብ ኣንጻራዊ ሕብሪ ኣዕሚቕካ ክትጥሕል እንተደሊኻ፡ ኣሕመድ ሻዲድ ብሉጽ መስተጋብራዊ መምርሒ ፈጢሩ። እንተ ናይ ሕብራዊ ቦታታት፡ ጋሙትን OKLCHን እንተኾይኑ፡ ናይ ገዛእ ርእስና ጀፍ ግራሃም ብዛዕባኦም ጽሒፉ።
ተደጋጋሚ ኣጠቓቕማ ባእታታት ቁልፊ እዩ ነይሩ። ድሕረ ባይታታት ብዝተኻእለ መጠን ዳግማይ ይጥቀሙ ነበሩ፣ ዙምን ምድብላቕን ድማ ካብ ተመሳሳሊ ስነ-ጥበባዊ ስርሓት ሓደስቲ ትርኢታት ንምህናጽ ይሕግዙ ነበሩ። ካብ ኣድላይነት ዝተወልደት ኮይና፡ ብውልቃዊ ትርኢታት ዘይኮነስ ብመንጽር ተኸታታሊ ትርኢታት ምሕሳብ እውን ኣተባቢዓ። እቲ ጸገም ብኢድካ ምዕባይ ሕብሪ ፓለታት ትኽ ኢልና ናብ ብድሆይ ንእቶ። ኣብ ቱን ታይትልስ ከምዚ ናይዚ — ኣብ 1959 ዮጊ ቢር ሾው ክፋል “ሉላባይ-ባይ ቢር” ዝተመርኮሰ — ከምኡ’ውን ብሓፈሻ ስርሐይ፡ ፓለታት ኣብ ዝተመርጹ ውሑዳት ሕብርታት ዝተሓጽሩ እዮም።
ካብቲ “መሰረት” ዝብሎ ሕብሩ ጽላሎትን ቅብኣን እፈጥር እሞ ነቲ ፓለቲ ተወሳኺ ሕብሪ ከይወሰኽኩ ከስፍሖ።
ኣብ ስኬች ኣብቲ ናይ HSL ሕብሪ ቦታ እየ ዝሰርሕ፣ ስለዚ እዚ መስርሕ እዚ ናይ መሰረታዊ ሕብርይ ናይ ቀሊልነት ዋጋ ምውሳኽ ወይ ምንካይ ዘጠቓልል እዩ። ብቕንዕና ክዛረብ እንተኾይነ፡ ከቢድ ዕማም ኣይኮነን — ዝተፈላለየ ሕብሪ መሰረት ምምራጽ ግን ምሉእ ብምሉእ ሓድሽ ስብስብ ጽላሎትን ቅብኣን ምፍጣር የድሊ። ከምኡ ምግባር ብኢድካ፡ ደጋጊምካ፡ ቀልጢፉ ኣድካሚ ይኸውን።
HSL — H (hue)፣ S (saturation)፣ ከምኡ’ውን L (lightness) — ናይ ሕብሪ ቦታ ጠቒሰ ነይረ፣ እዚ ግን ሓደ ካብ ሓያሎ ሕብሪ ንምግላጽ ዝጥቀሙሉ መገድታት ጥራይ’ዩ። RGB — R (ቀይሕ)፡ G (ቀጠልያ)፡ B (ሰማያዊ) — ምናልባት እቲ ዝያዳ ፍሉጥ ክኸውን ይኽእል እዩ፡ እንተወሓደ ብመልክዑ Hex። LAB — L (ቀሊልነት)፡ A (ቀጠልያ–ቀይሕ)፡ B (ሰማያዊ–ብጫ) — ከምኡ’ውን እቲ ሓድሽ፡ ሕጂ ግን ብሰፊሑ ዝድገፍ LCH — L (ቀሊልነት)፡ C (ክሮማ)፡ H (ሕብሪ) — ሞዴል ብመልክዑ OKLCH ኣሎ። ብ LCH — ብፍላይ OKLCH ኣብ CSS — ዋጋ ቀሊልነት ናይ መሰረታ ሕብርይ ከስተኻኽል እኽእል እየ።
ወይ ድማ ክሮማኡ ክቕይሮ ይኽእል እየ። LCH chromaን HSL saturationን ክልቲኦም ንጽዓት ወይ ሃብቲ ናይ ሓደ ሕብሪ ዝገልጹ ኮይኖም ግን ብዝተፈላለየ መንገዲ እዮም ዝገብርዎ። LCH ኣብ መንጎ ሕብርታት ዝሰፍሐ ደረጃን ዝያዳ ክትግምቶ ዝከኣልን ምትሕውዋስ ይህበኒ።
ብተወሳኺ ነቲ ሕብሪ ብምቕያር ተመሳሳሊ ቀሊልነትን ክሮማን ክብርታት ዝካፈሉ ፓለቲ ሕብርታት ክፈጥር እኽእል እየ። ኣብ ክልቲኡ HSLን LCHን እቲ ስፔክትረም ሕብሪ ካብ ቀይሕ ጀሚሩ ብቀጠልያን ሰማያውን ይኸይድ እሞ ናብ ቀይሕ ይምለስ።
ስለምንታይ OKLCH ብዛዕባ ሕብሪ ከመይ ከም ዝሓስብ ቀይሩ ዋላ’ውን መሳርሒታት ዲዛይን — ስኬች ሓዊሱ — እንተዘይተሓዙ፡ ንOKLCH ሕብራዊ ቦታ ዝኸውን ደገፍ መርበብ ሓበሬታ ሕጂ ሰፊሕ’ዩ። ጽቡቕ ኣጋጣሚ ኮይኑ፡ እዚ OKLCH ካብ ምጥቃም ክዓግተካ የብሉን። ዳህሰስቲ ብሓጎስ ንናይ Hex, HSL, LAB, ከምኡውን RGB ክብርታት ናብ OKLCH ክቕይሩልካ እዮም። ኣብ ዝኾነ ቦታ ብሕብሪ መሰረት ዘለዎ ናይ CSS ብሕታዊ ንብረት ክትገልጽ ትኽእል ኢኻ፣ Hex ሓዊስካ፤ /* ሕብሪ መሰረት */ --መሰረት: #5acccd6፤
ካብኡ ዝመጽእ ዝኾነ ሕብሪ ብኣውቶማቲክ ናብ OKLCH ክቕየር እዩ፤ --መሰረት-ብርሃን: oklch(ካብ var(--መሰረት) [...]; } --መሰረት-mid: oklch(ካብ var(--መሰረት) [...]; } --መሰረት-ጸልማት: oklch(ካብ var(--መሰረት) [...]; }
ተዛማዲ ሕብሪ ከም ዲዛይን ስርዓት ብዛዕባ ተዛማዲ ሕብሪ ከምዚ ዝስዕብ ጌርካ ሕሰቦ: “ነዚ ሕብሪ ውሰዶ: ትዊክ ግበሮ: ድሕሪኡ ውጽኢቱ ሃበኒ።” ንሓደ ሕብሪ ንምትዕርራይ ክልተ መንገድታት ኣለዉ፡ ፍጹም ለውጥን ተመጣጣኒ ለውጥን። ብኮድ ተመሳሳሊ ይመስሉ፡ ሕብሪ መሰረት ክትቅይር ምስ ጀመርካ ግን ኣዝዩ ዝተፈላለየ ባህሪ ኣለዎም። ነቲ ፍልልይ ምርዳእ ተዛማዲ ሕብሪ ምጥቃም ናብ ስርዓት ክቕይሮ ዝኽእል እዩ። /* ሕብሪ መሰረት */ --መሰረት: #5acccd6፤
ንኣብነት ናይ ፋውንዴሽን ሕብርይ ናይ ብርሃን ዋጋ 0.7837 ክኸውን ከሎ፡ ዝጸልመተ ስሪት ድማ 0.5837 ዋጋ ኣለዎ። ነቲ ፍልልይ ንምሕሳብ፡ ነቲ ታሕተዋይ ዋጋ ካብቲ ዝለዓለ ኣጉዲለ ነቲ ውጽኢት calc() ፋንክሽን ተጠቒመ ኣብ ግብሪ እጥቀመሉ፤ --መሰረት-ጸልማት: oklch(ካብ var(--መሰረት) calc(l - 0.20) c h);
ፍኹስ ዝበለ ሕብሪ ንምርካብ፡ ኣብ ክንድኡ ነቲ ፍልልይ እውስኸሉ፤ --መሰረት-ብርሃን፤ oklch(ካብ var(--መሰረት) calc(l + 0.10) c h);
ክሮማምትዕርራይ እውን ተመሳሳሊ መስርሕ ይኽተል። ጽዓት ሕብር መሰረተይ ካብ 0.1035 ናብ 0.0035 ንምንካይ፡ ሓደ ዋጋ ካብቲ ካልእ እጉድሎ፤ oklch(ካብ var(--መሰረት) l calc(c - 0.10) ሰዓት)፤
ፓለቲካዊ ሕብሪ ንምፍጣር፡ ኣብ መንጎ ዋጋ ሕብሪ ናይቲ መሰረታዊ ሕብርይ (200)ን ሓድሽ ሕብሪ (260)ን ዘሎ ፍልልይ እሕሰብ፤ oklch(ካብ var(--መሰረት) l c ካልክ (h + 60))፤
እቶም ስሌታት ፍጹማት እዮም። ውሱን መጠን ገንዘብ ክጎድሎ ከለኹ፡ ብውጽኢታዊ መገዲ “ኩሉ ግዜ ክንድ’ዚ ኣጉድል” እየ ዝብል ዘለኹ። ጽኑዓት ክብርታት ኣብ ዝውስኸሉ እዋን እውን ከምኡ፤ ካልክ(c - 0.10) ካልክ(c + 0.10)
ደረት ናይዚ ኣገባብ ብኸቢድ መንገዲ እየ ተማሂረዮ። ኣብ ምጉዳል ጽኑዓት ክብርታት ክሮማ ምስ ተጸግዕኩ፡ መሰረት ምስ ቀየርኩ ሕብርታት ናብ ግራጭ ገጾም ይፈርሱ ነበሩ። ንሓደ ሕብሪ ዝሰርሕ ዝነበረ ፓለቲ ንኻልእ ሕብሪ ተበታቲኑ። ምብዛሕ ዝተፈላለየ ባህሪ ኣለዎ። ክሮማ ከባዝሕ ከለኹ፡ ነቲ መርበብ ሓበሬታ፡ “ጽዓት ናይዚ ሕብሪ’ዚ ብመጠኑ ኣጉድሎ።” ኣብ መንጎ ሕብርታት ዘሎ ርክብ ዋላ እቲ መሰረት ክቕየር ከሎ ከም ቀደሙ ይቕጽል፤ calc(c * 0.10) ዝብል ጽሑፍ ኣሎ።
ናተይ ሞቭ ኢት፡ ስኬል ኢት፡ ሮታተ ኢት ሩልስ
ቅልል ዝበለ ምንቅስቓስ (ምውሳኽ ወይ ምጉዳል)፣ . ስኬል ክሮማ (ምብዛሕ)፣ . ሕብሪ ምዝዋር (ዲግሪ ምውሳኽ ወይ ምጉዳል)።
ለውጢ ጽዓት ምስቲ መሰረታዊ ሕብሪ ተመጣጣኒ ክኸውን ስለ ዝደሊ እየ ንክሮማ ስኬል ዝገብሮ። ዝምድናታት ሕብሪ ዙረት ስለዝኾነ፡ ሕብሪ ምብዛሕ ትርጉም የብሉን። ቀሊልነት ኣረዳድኣውን ፍጹምን እዩ — ምብዛሕ መብዛሕትኡ ግዜ ዕጹው ውጽኢት የስዕብ።
ካብ ሓደ ሕብሪ ናብ ምሉእ ቴማ ኣንጻራዊ ሕብሪ ንሓደ ናይ መሰረት ሕብሪ ክገልጽን ካልእ ኩሉ ዘድልየኒ ሕብሪ - ምምላእ፡ ምውቃዕ፡ ምዕጻው ምዝንባል፡ ጽላሎት — ካብኡ ከመንጩን የኽእለኒ። ኣብቲ እዋን እቲ ሕብሪ ፓለቲካ ምዃን ኣቋሪጹ ስርዓት ክኸውን ይጅምር። ስእልታት SVG ኣብ ልዕሊ ምምላእ፣ ምውቃዕን ምዕባለን ተመሳሳሊ ውሑዳት ሕብርታት ዳግማይ ክጥቀሙ ይኽእሉ። ተዛማዲ ሕብሪ ነቶም ዝምድናታት ሓንሳብ ክትገልጾምን ኣብ ኩሉ ቦታ ዳግማይ ክትጥቀመሎምን የኽእለካ - ልክዕ ከምቲ ኣኒሜተራት ሓደስቲ ትርኢታት ንምፍጣር ድሕረ ባይታ ዳግማይ ዝጥቀሙሉ።
ሕብሪ መሰረት ሓንሳብ ቀይሮ፣ ነፍሲ ወከፍ ዝተረኽበ ሕብሪ ድማ ብኣውቶማቲክ ይመሓየሽ፣ ብኢድ ዝኾነ ነገር ዳግማይ ከይሓሰበ። ካብ ተንቀሳቓሲ ስእሊ ወጻኢ፡ ነዚ ተመሳሳሊ ኣገባብ ተጠቒመ ንኹነታት ናይ ከም መጠወቒታትን መላግቦታትን ዝኣመሰሉ መስተጋብራዊ ባእታታት ሕብርታት ንምግላጽ እኽእል ነይረ። ኣብ “Lullabye-Bye Bear” Toon Title ዝጥቀመሉ ዝነበርኩ ናይ መሰረት ሕብሪ ሳይን ዝመስል ሰማያዊ እዩ። እቲ ድሕረ ባይታ ኣብ መንጎ መሰረተይን ዝጸልመተ ስሪትን ዘሎ ራድያል ግራድየንት እዩ።
ምሉእ ብምሉእ ዝተፈላለየ ስሚዒት ዘለዎም ኣማራጺ ስሪት ንምፍጣር፡ ሕብሪ መሰረት ጥራይ እየ ክቕይር ዘለኒ፤ --መሰረት: #5acccd6፤ --grad-end: var(--መሰረት)፤ --grad-start: oklch(ካብ var(--መሰረት) calc (l - 0.2357) calc (c * 0.833) ሰዓት)፤
ነቶም ብሕታዊ ባህርያት ናብ SVG ግራድየንተይ ከይተደጋገመ ናይ ሕብሪ ክብርታት ንምእሳር፡ ብተሪር ኮድ ዝተገብረሎም ስቶፕ-ሕብሪ ክብርታት ብናይ ውሽጢ መስመር ቅዲታት ተኪአዮም፤
<መንገዲ ምምላእ="url(#bg-grad)" ምምላእ="#5DCDD8" d="[...]"/>
ቀጺለ፡ ናተይ ቱን ቴክስት ኩሉ ግዜ ምስቲ ዝመረጽክዎ ሕብሪ መሰረት ከም ዝጻረር ከረጋግጽ ነይሩኒ። 180deg hue rotation ብርግጽ ዝወጽእ መመላእታ ሕብሪ የፍሪ — ግን ብዘይምቹእ መንገዲ ክናወጽ ይኽእል: .ጽሑፍ-ብርሃን { . ምምላእ: oklch(ካብ var(--መሰረት) l c ካልክ (h + 180))፤ }
90° ምዝንባል ምሉእ ብምሉእ መመላእታ ከይኮነ ንጹር ካልኣዊ ሕብሪ የፍሪ፤ .ጽሑፍ-ብርሃን { . ምምላእ: oklch(ካብ var(--መሰረት) l c ካልክ (h - 90))፤ }
ናተይ መዘናግዒ ናይ Quick Draw McGraw’s 1959 Toon Title “El Kabong“ ተመሳሳሊ ሜላታት ዝጥቀም ኮይኑ ግን ዝያዳ ዝተፈላለየ ፓለቲ ዘለዎ እዩ። ንኣብነት ኣብ መንጎ ሕብሪ መሰረትን ዝጸልመተ ጽላሎትን ካልእ ራድያል ግራድየንት ኣሎ።
እቲ ኣብ ድሕሪት ዘሎ ህንጻን ገረብን በቃ ዝተፈላለየ ጽላሎት ናይ ሓደ ዓይነት ሕብሪ መሰረት እዩ። ነቶም መንገድታት ክልተ ተወሳኺ ናይ ምምላእ ሕብሪ የድልየኒ ነይሩ፤ .bg-mid { . ምምላእ: oklch(ካብ var(--መሰረት) calc (l - 0.04) calc (c * 0.91) ሰዓት)፤ }
.bg-ጸሊም { . ምምላእ: oklch(ካብ var(--መሰረት) calc (l - 0.12) calc (c * 0.64) ሰዓት)፤ }
መሰረታት ምንቅስቓስ ምስ ጀመሩ ክሳብ ሕጂ፡ ኩሉ ዘርኣኹዎ ስቴቲክ’ዩ ነይሩ። ሓደ ሰብ ሕብሪ መሰረት ንምቕያር ሕብሪ መምረጺ ክጥቀም ከሎ እውን እንተኾነ፡ እቲ ለውጢ ብቕጽበት እዩ ዝፍጸም። ተንቀሳቓሲ ስእልታት ግን ሳሕቲ ኣብ ሓደ ቦታ ደው ይብል — እቲ ፍንጪ ኣብቲ ስም እዩ። ስለዚ፡ ሕብሪ ኣካል ናይ’ቲ ስርዓት እንተኾይኑ፡ ንሱ’ውን ህያው ክኸውን ዘይክእለሉ ምኽንያት የለን። ነቲ ናይ መሰረት ሕብሪ ህያው ንምግባር መጀመርታ ኣብ OKLCH ቻነላቱ ክመቕሎ ኣለኒ።— ምቕላል፡ ክሮማን ሕብሪን እዩ። ግን ሓደ ኣገዳሲ ተወሳኺ ስጉምቲ ኣሎ፡ ነቶም ክብርታት ከም ዝተጻሕፉ ብሕታዊ ባህርያት ክምዝግቦም ኣለኒ። እዚ ግን እንታይ ማለት እዩ፧ ብነባሪ መልክዑ፡ ሓደ መርበብ ሓበሬታ፡ ሓደ ናይ CSS ብሕታዊ ንብረት ዋጋ ንሓደ ሕብሪ፡ ንውሓት፡ ቁጽሪ ወይ ካልእ ምሉእ ብምሉእ ይውክል ድዩ ኣይውክልን ኣይፈልጥን’ዩ። እዚ ማለት መብዛሕትኡ ግዜ ኣብ እዋን ኣኒሜሽን ብዘይ ገለ ጸገም ክኣትዉ ኣይክእሉን’ዮም፣ ካብ ሓደ ዋጋ ናብቲ ዝቕጽል ድማ ክዘሉ ኣይክእሉን’ዮም ማለት’ዩ። ብሕታዊ ንብረት ምምዝጋብ ነቲ መርበብ ሓበሬታ ዝውክሎ ዓይነት ዋጋን ምስ ግዜ ከመይ ክመላለስ ከም ዘለዎን ይነግሮ። ኣብ ከምዚ ኩነታት፡ እቲ መርበብ ሓበሬታ ንናይ ሕብሪ ቻነላተይ ከም ቁጽሪ ክሕዞም እየ ዝደሊ፡ ምእንቲ ብዘይ ገለ ጸገም ኣኒሜሽን ክኾኑ። @ንብረት --f-l { ስነ-ቓል: "<ቁጽሪ>"; ይወርስ: ሓቂ፤ መጀመርታ-ዋጋ: 0.40፤ }
@ንብረት --f-c { ስነ-ቓል: "<ቁጽሪ>"; ይወርስ: ሓቂ፤ መጀመርታ-ዋጋ: 0.11፤ }
@ንብረት --f-h { ስነ-ቓል: "<ቁጽሪ>"; ይወርስ: ሓቂ፤ መጀመርታ-ዋጋ: 305፤ }
ሓንሳብ ምስ ተመዝገቡ፡ እዞም ብሕታዊ ንብረታት ከም ተወላዲ CSS ይመላለሱ። እቲ መርበብ ሓበሬታ ፍሬም ብፍሬም ከእትዎም ይኽእል። ብድሕሪኡ ካብተን ቻነላት ነቲ ናይ መሰረት ሕብሪ ዳግማይ እሃንጾ፤ --መሰረት: oklch(var(--f-l) var(--f-c) var(--f-h));
እዚ ድማ ነቲ ናይ መሰረት ሕብሪ ልክዕ ከም ዝኾነ ካልእ ቁጽራዊ ዋጋ ህያው ክኸውን ይገብሮ። ንቐሊልነት ምስ ግዜ ቀስ ኢሉ ዝቕይር ቀሊል “ምትንፋስ” ኣኒሜሽን እንሆ፤ @keyframes ትንፋስ { 0%፣ 100% { --f-l: 0.36፤ } 50% { --f-l: 0.46፤ } }
.toon-ኣርእስቲ { . ኣኒሜሽን: ምትንፋስ 10ታት ምቕሉል-ኣብ-ምውጻእ ደረት ኣልቦ፤ }
ምኽንያቱ ኩሉ ካልእ ሕብሪ ኣብ ምምላእ፣ ምዕባለን ምውቃዕን ካብ --መሰረት ዝመጽእ እዩ፣ ኩሎም ብሓባር ህያው ይገብሩ፣ ብኢድ ዝመሓየሽ ነገር ድማ ኣየድልዮን። ሓደ ተንቀሳቓሲ ሕብሪ፣ ብዙሕ ሳዕቤናት ኣብ መጀመርታ ናይዚ መስርሕ፡ CSS ተዛማዲ ሕብራዊ ክብርታት ዝያዳ ተኽእሎታት ከቕርቡ ይኽእሉ ድዮም፡ ኣብ ርእሲኡ ድማ ንምትግባሮም ዝቐለለ ክገብሮም ይኽእል ድዩ ኢለ ሓሲበ። ኣብዚ ቀረባ እዋን ኣብ ናይ መርበብ ሓበሬታይ ናይ ርክብ ገጽ ሓድሽ ናይ ወርቂ ዕደና ድሕረ ባይታ ወሲኸሉ ኣለኹ፣ እቲ ቀዳማይ ምድግጋም ድማ ዝበርሁን ዝወዛወዙን ናይ ዘይቲ ላምባታት ዘጠቓለለ’ዩ ነይሩ።
ንውሽጣዊ ክፍሊ ዕደና ብኸመይ ካብ ላምባታት ብዝወጽእ ሕብርታት ብምቕባእ ዝያዳ ክውንነታዊ ክገብሮ ከም ዝኽእል ክድህስስ ደልየ ነይረ። ከምቲ ሓቀኛ ብርሃን ዝገብሮ፡ ነቲ ኣብ ከባቢኦም ዘሎ ዓለም ክጸልዉ እየ ዝደሊ ነይረ። ስለዚ፡ ኣብ ክንዲ ንብዙሓት ሕብርታት ህያው ምግባር፡ ሓደ ሕብሪ ጥራይ ህያው ዝገብር ንእሽቶ ስርዓተ መብራህቲ ሰሪሐ።
ቀዳማይ ዕማመይ ኣብ መንጎ ድሕረ ባይታን ላምባታተይን ናይ ምድብላቕ ንጣብ ምቕማጥ እዩ ነይሩ፤ <መንገዲ id="ምድብላቕ"። fill="var(--ድርብ-ቀለም)" [...] style="ምትሕውዋስ-ምትሕውዋስ-ኣገባብ: ሕብሪ" />
mix-blend-mode: color’የ ተጠቒመሉ ምኽንያቱ እዚ ነቲ ኣብ ትሕቲኡ ዘሎ ብርሃን እናዓቀበ ነቲ ኣብ ትሕቲኡ ዘሎ ብርሃን ስለ ዝሕብሮ። እቲ ምድብላቕ ኣኒሜሽን ምስ ዝውላዕ ጥራይ ክርአ ስለ ዝደሊ፡ ነቲ ምድብላቕ opt-in ገይረዮ፤ .svg-mine #ድርብ { . ምርኢት: ዝኾነ የለን፤ }
@media (ዝመርጽ-ዝነከየ-ምንቅስቓስ: ዝኾነ-ምርጫ) { .svg-mine[ዳታ-ኣኒሜሽንስ=ኣብ] #overlay { ምርኢት: ብሎክ፤ ዘይንጹርነት: 0.5፤ } }
እቲ ሽፋን ኣብ ቦታኡ እኳ እንተነበረ፡ ገና ምስቶም ላምባታት ግን ኣይተተሓሓዘን። ምንጪ ብርሃን የድልየኒ ነይሩ። ላምባታተይ ቀለልቲ እየን፣ ነፍሲ ወከፈን ድማ ብፍልተር ኣደብዘዝክዎ ዓንኬል ባእታ ዝሓዛ እየን። እቲ ፍልተር ኣብ ልዕሊ ምሉእ ዓንኬል ኣዝዩ ልስሉስ ድብዝዝ የፍሪ።
ነቲ ምድብላቕን ላምባታትን በበይኑ ኣብ ክንዲ ህያው ምግባር፡ ንሓደ “ሃልሃልታ” ሕብራዊ ምልክት ህያው ገይረ ካልእ ኩሉ ካብኡ እረኽቦ። መጀመርታ ንOKLCH ቻነላት ሰለስተ ዝተጻሕፉ ብሕታዊ ባህርያት እምዝግብ፤ @ንብረት --fl-l { ስነ-ቓል: "<ቁጽሪ>"; ይወርስ: ሓቂ፤ መጀመርታ-ዋጋ: 0.86፤ } @ንብረት --fl-c { ስነ-ቓል: "<ቁጽሪ>"; ይወርስ: ሓቂ፤ መጀመርታ-ዋጋ: 0.12፤ } @ንብረት --fl-h { ስነ-ቓል: "<ቁጽሪ>"; ይወርስ: ሓቂ፤ መጀመርታ-ዋጋ: 95፤ }
ነተን ቻነላት ኣኒሜሽን ገይረየን፣ ኮነ ኢለ ውሑዳት ፍሬማት ናብ ኣራንሺ ገጸይ ደፊአ፣ እቲ ፍሊከር ከም ብርሃን ሓዊ ብንጹር ንኽንበብ፤
@keyframes ሃልሃልታ { 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፤ } }
ብድሕሪኡ ነቲ ኣኒሜሽን ናብ SVG ስኮፕ ገይረዮ፣ ስለዚ እቶም ዝተኻፈሉ ተለዋዋጢ ረቛሒታት ንኽልቲኦም ላምባታትን ናተይ ምድብላቕን ይርከቡ፤
@media (ዝመርጽ-ዝነከየ-ምንቅስቓስ: ዝኾነ-ምርጫ) { .svg-mine[ዳታ-ኣኒሜሽን=ኣብ] { ኣኒሜሽን: ሃልሃልታ 3.6s ደረት ኣልቦ መስመራዊ፤ ተነጽሎ: ተነጽሎ፤
/* ካብ ተንቀሳቓሲ ቻነላት ናይ ሃልሃልታ ሕብሪ ምህናጽ */ --ሃልሃልታ: oklch (var (--fl-l) var (--fl-c) var (--fl-h));
/* ካብ ሃልሃልታ ዝመጽእ ሕብሪ ላምባ */ --ላምባ-ኮር: oklch (ካብ var (--ሃልሃልታ) calc (l + 0.05) calc (c * 0.70) ሰዓት);
/* ካብ ሓደ ሃልሃልታ ዝመጽእ ናይ ምድብላቕ ቲንት */ --overlay-tint: oklch(ካብ var(--ሃልሃልታ) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
ኣብ መወዳእታ፡ ነቶም ዝረኸብክዎም ሕብርታት ኣብቲ ዝበርሁ ላምባታትን ኣብቲ ዝጸልውዎ ምድብላቕን ተለኺየዮም፤ @media (ዝመርጽ-ዝነከየ-ምንቅስቓስ: ዝኾነ-ምርጫ) { .svg-mine[data-animations=on] #mine-lamp-1 > ዓንኬል፣ .svg-mine[data-animations=on] #ማይን-ላምባ-2 > ዓንኬል { ምምላእ: var(--ላምባ-ኮር); }
.svg-mine[ዳታ-ኣኒሜሽንስ=ኣብ] #overlay { ምርኢት: ብሎክ፤ ምምላእ: var(--ድርብ-ቅብኣት); ዘይንጹርነት: 0.5፤ } }
እቲ ሃልሃልታ ናብ ኣራንሺ ምስ ዝንቀሳቐስ፡ እተን መብራህቲ ይውዕያ፡ እቲ ትርኢት ድማ ምስአን ይውዕይ። እቲ ሃልሃልታ ምስ ዝዘሓለ ኩሉ ብሓባር ይሰፍር። እቲ ዝበለጸ ክፋል ብኢድ ዝተጻሕፈ ነገር ዘይምህላዉ እዩ። ሕብሪ መሰረት እንተቐይረ ወይ ድማ ናይ ሃልሃልታ ኣኒሜሽን ሬንጅታት እንተተቐይረ፡ ምሉእ ስርዓተ መብራህቲ ብሓንሳብ ይመሓየሽ። ናይ መወዳእታ ውጽኢት ኣብ መርበብ ሓበሬታይ ክትሪእዎ ትኽእሉ ኢኹም። ዳግማይ ምጥቃም፣ ዳግማይ ዕላማ ምግባር፣ ዳግማይ ምብጻሕ እቶም ሃና-ባርቤራ ኣኒሜተራት ካብ ኣድላይነቶም ተበጊሶም ንባእታታት ዳግማይ ዕላማ ክገብሩ ተገዲዶም እኳ እንተነበሩ፡ ንስራሐይ ዝያዳ ቅኑዕን ንምዕቃብ ዝቐለለን ስለ ዝገብሮ ግን ሕብርታት ዳግማይ እጥቀመሉ። ናይ CSS ኣንጻራዊ ሕብራዊ ክብርታት ከምዚ ክገብር የኽእሉኒ፤
ሓደ ናይ መሰረት ሕብሪ ምግላጽ፣ . ካልኦት ሕብርታት ምስኡ ብኸመይ ከም ዝዛመዱ ግለጽ፣ ነቶም ዝምድናታት ኣብ ኩሉ ቦታታት ዳግማይ ተጠቐመሎም፣ ከምኡ’ውን... ሓደ ዋጋ ብምቕያር ነቲ ስርዓት ህያው ግበሮ።
ተዛማዲ ሕብሪ ንቴማ ምግባር ጥራይ ኣይኮነን ዝገብሮ። ሕብሪ ከም ምንቅስቓስ ኮነ ኢልካ ዝግበር — ከምኡ’ውን ሓደ ዋጋ ምቕያር ንሓደ ኣብ ትሕቲኡ ዘሎ ስራሕ ዳግማይ ከይጸሓፍካ ንሓደ ምሉእ ትርኢት ክቕይሮ ዝኽእል ኣተሓሳስባ የተባብዕ።
