በዚህ ተከታታይ ውስጥ ያካፈልኳቸውን ብዙ ቴክኒኮችን በተግባር ላይ በማዋል፣ በቅርቡ በድር ጣቢያዬ ላይ ያሉትን አኒሜሽን ግራፊክስ በአዲስ ጭብጥ እና በአቅኚ ገፀ-ባህሪያት ቡድን አሳድሻለሁ። አንዳንድ የእኔ እነማዎች አንድ ሰው ከእነሱ ጋር ሲገናኝ ወይም በተለያዩ የቀን ጊዜያት መልክ ይለውጣሉ።
በብሎግ ገጾቼ ላይ ባለው ግራፊክ ላይ ያሉት ቀለሞች በየቀኑ ከጠዋት እስከ ማታ ይለወጣሉ። ከዚያም የበረዶ ሁነታ አለ, ቀዝቃዛ ቀለሞችን እና የክረምት ገጽታን ይጨምራል, በተደራራቢ ንብርብር እና በመደባለቅ ሁነታ.
በዚህ ላይ እየሠራሁ ሳለ፣ የ CSS አንጻራዊ የቀለም እሴቶች ሂደቱን በማቃለል ተጨማሪ ቁጥጥር ይሰጡኝ እንደሆነ ማሰብ ጀመርኩ። ማሳሰቢያ፡ በዚህ ማጠናከሪያ ትምህርት አንጻራዊ የቀለም እሴቶች እና የ OKLCH የቀለም ቦታ ግራፊክስ እና እነማዎች ላይ አተኩራለሁ። ወደ አንጻራዊ ቀለም ዘልቀው ለመግባት ከፈለጉ፣ አህመድ ሻዲድ እጅግ በጣም ጥሩ መስተጋብራዊ መመሪያን ፈጠረ። ስለ ቀለም ቦታዎች፣ ጋሞች እና ኦኬኤልኤች፣ የራሳችን ጂኦፍ ግራሃም ስለነሱ ጽፏል።
ኤለመንቶችን ደጋግሞ መጠቀም ቁልፍ ነበር። ዳራዎች በተቻለ መጠን እንደገና ጥቅም ላይ ውለዋል፣ ማጉላት እና ተደራቢዎች ከተመሳሳይ የስነ ጥበብ ስራ አዳዲስ ትዕይንቶችን ለመስራት ይረዳሉ። በግድ የተወለደ ነው, ነገር ግን ከግለሰብ ትዕይንቶች ይልቅ በተከታታይ ማሰብን አበረታቷል. የቀለም ቤተ-ስዕልን በእጅ በማዘመን ላይ ያለው ችግር በቀጥታ ወደ ፈተናዬ እንግባ። በእንደዚህ ዓይነት የቶን አርእስቶች ውስጥ - በ1959 ዮጊ ድብ ትርኢት ክፍል “ሉላባይ-ቢይ ድብ” ላይ በመመስረት - እና በአጠቃላይ የእኔ ስራ ፣ ቤተ-ስዕሎች ለተመረጡ ጥቂት ቀለሞች የተገደቡ ናቸው።
ተጨማሪ ቀለሞችን ሳልጨምር ቤተ-ስዕልን ለማስፋት "መሠረት" ከሚለው ቀለም ውስጥ ጥላዎችን እና ቀለሞችን እፈጥራለሁ.
በ Sketch ውስጥ፣ እኔ በHSL የቀለም ቦታ ውስጥ እሰራለሁ፣ ስለዚህ ይህ ሂደት የመሠረቴን ቀለም የብርሃን ዋጋ መጨመር ወይም መቀነስን ያካትታል። እንደ እውነቱ ከሆነ, ይህ አስቸጋሪ ስራ አይደለም - ነገር ግን የተለየ የመሠረት ቀለም መምረጥ ሙሉ ለሙሉ አዲስ ጥላዎችን እና ቀለሞችን መፍጠርን ይጠይቃል. ያንን በእጅ ፣ ደጋግሞ ፣ በፍጥነት አድካሚ ይሆናል።
HSL - H (hue), S (saturation) እና L (lightness) - የቀለም ቦታን ጠቅሻለሁ፣ ነገር ግን ይህ ቀለምን ከሚገልጹባቸው በርካታ መንገዶች ውስጥ አንዱ ነው። RGB - R (ቀይ) ፣ G (አረንጓዴ) ፣ ቢ (ሰማያዊ) - ምናልባት በጣም የታወቀው ፣ ቢያንስ በሄክስ ቅርፅ። እንዲሁም LAB — L (ብርሃን)፣ A (አረንጓዴ–ቀይ)፣ ቢ (ሰማያዊ–ቢጫ) — እና አዲሱ፣ አሁን ግን በሰፊው የሚደገፍ LCH — L (ብርሃን)፣ C (chroma)፣ H (hue) - ሞዴል በOKLCH መልኩ አለ። በ LCH — በተለይ OKLCH በ CSS — የመሠረቴን ቀለም የብርሃን ዋጋ ማስተካከል እችላለሁ።
ወይም ክሮማውን መለወጥ እችላለሁ። LCH chroma እና HSL ሙሌት ሁለቱም የአንድን ቀለም ጥንካሬ ወይም ብልጽግና ይገልፃሉ ነገርግን በተለያየ መንገድ ያደርጉታል። LCH ሰፋ ያለ ክልል ይሰጠኛል እና በቀለም መካከል የበለጠ ሊገመት የሚችል ድብልቅ።
ተመሳሳይ የብርሃን እና የክሮማ እሴቶችን የሚጋሩ የቀለማት ቤተ-ስዕል ለመፍጠር ቀለሙን መቀየር እችላለሁ። በሁለቱም HSL እና LCH፣ የ hue spectrum በቀይ ይጀምራል፣ በአረንጓዴ እና በሰማያዊ ይንቀሳቀሳል፣ እና ወደ ቀይ ይመለሳል።
ለምን OKLCH ተለወጠ ስለ ቀለም እንዴት እንዳስብ ለ OKLCH የቀለም ቦታ የአሳሽ ድጋፍ አሁን ተስፋፍቷል፣ ምንም እንኳን የንድፍ መሳሪያዎች - Sketchን ጨምሮ - ባይያዙም እንኳ። እንደ እድል ሆኖ፣ ያ OKLCHን ከመጠቀም ሊያግድዎት አይገባም። አሳሾች ሄክስን፣ ኤችኤስኤልን፣ LAB እና RGB እሴቶችን ወደ OKLCH በደስታ ይለውጣሉ። ሄክስን ጨምሮ በማንኛውም ቦታ ላይ የመሠረት ቀለም ያለው የሲኤስኤስ ብጁ ንብረት መግለፅ ይችላሉ፡ /* የመሠረት ቀለም */ --መሠረት: # 5acd6;
ከእሱ የተገኙ ማናቸውም ቀለሞች በራስ-ሰር ወደ OKLCH ይቀየራሉ፡- --መሠረት-ብርሃን፡ oklch (ከቫር (--መሠረት) [...]; } --ፋውንዴሽን-መካከል፡ oklch (ከቫር (-መሰረት) [...]; } --ፋውንዴሽን-ጨለማ፡ oklch (ከቫር (--ፋውንዴሽን) [...]; }
አንጻራዊ ቀለም እንደ ንድፍ ስርዓት አንጻራዊ ቀለም “ይህን ቀለም ውሰዱ፣ አሻሽሉት፣ ከዚያም ውጤቱን ስጠኝ” በማለት አስቡ። ቀለምን ለማስተካከል ሁለት መንገዶች አሉ-ፍፁም ለውጦች እና ተመጣጣኝ ለውጦች። በኮድ ተመሳሳይ ይመስላሉ፣ ነገር ግን የመሠረት ቀለሞችን መቀየር ከጀመሩ በኋላ በጣም የተለየ ባህሪ አላቸው። ያንን ልዩነት መረዳቱ አንጻራዊ ቀለም በመጠቀም ወደ ሥርዓት ሊለወጥ የሚችለው ነው። /* የመሠረት ቀለም */ --መሠረት: # 5acd6;
ለምሳሌ, የመሠረቴ ቀለም የብርሃን ዋጋ 0.7837 ነው, ጥቁር ስሪት ደግሞ 0.5837 ነው. ልዩነቱን ለማስላት ዝቅተኛውን እሴት ከከፍተኛው ቀንስ እና ውጤቱን የካልኩን () ተግባርን በመጠቀም ተግባራዊ አደርጋለሁ፡- --መሠረት-ጨለማ፡- oklch (ከቫር (--ፋውንዴሽን) ካልክ (l - 0.20) c h);
ቀለል ያለ ቀለም ለማግኘት በምትኩ ልዩነቱን እጨምራለሁ፡- --መሰረት-ብርሃን; oklch (ከቫር (--ፋውንዴሽን) ካልክ (l + 0.10) c h);
ክሮማማስተካከያዎች ተመሳሳይ ሂደት ይከተላሉ. የመሠረቴን ቀለም ከ 0.1035 ወደ 0.0035 ለመቀነስ, አንዱን እሴት ከሌላው እቀንሳለሁ. oklch (ከቫር (--ፋውንዴሽን) l calc (c - 0.10) h);
የቀለም ቤተ-ስዕል ለመፍጠር በመሠረቴ ቀለም (200) እና በአዲሱ ቀለም (260) መካከል ያለውን ልዩነት አስላለሁ። oklch (ከቫር (--ፋውንዴሽን) l c calc (h + 60));
እነዚያ ስሌቶች ፍጹም ናቸው። የተወሰነ መጠን ስቀንስ፣ “ሁልጊዜ ይህን ያህል ቀንስ” እያልኩ ነው። ቋሚ እሴቶችን ሲጨምሩም ተመሳሳይ ነው፡- ካልክ (ሲ - 0.10) ካልክ (c + 0.10)
የዚህን አቀራረብ ወሰን በከባድ መንገድ ተማርኩ. ቋሚ የ chroma እሴቶችን በመቀነስ ላይ ተመርኩጬ፣ መሰረቱን እንደቀየርኩ ቀለሞች ወደ ግራጫ ወድቀዋል። ለአንድ ቀለም የሚሰራ ቤተ-ስዕል ለሌላው ተለያይቷል። ማባዛት የተለየ ባህሪ አለው። ክሮማን ሳባዛው ለአሳሹ፡ “የዚህን ቀለም መጠን በመጠኑ ቀንስ” እያልኩ ነው። መሰረቱ በሚቀየርበት ጊዜም እንኳ በቀለም መካከል ያለው ግንኙነት ሳይበላሽ ይቆያል። ካልክ (ሲ * 0.10)
የእኔ አንቀሳቅስ፣ ስኬል፣ አሽከርክርው ይገዛል።
ብርሃንን አንቀሳቅስ (መደመር ወይም መቀነስ) ልኬት ክሮማ (ማባዛ) ቀለም ያሽከርክሩ (ዲግሪዎችን ይጨምሩ ወይም ይቀንሱ)።
የክብደት ለውጦች ከመሠረቱ ቀለም ጋር ተመጣጣኝ ሆነው እንዲቆዩ ስለምፈልግ ክሮማን እለካለሁ። የ Hue ግንኙነቶች ሽክርክሪቶች ናቸው, ስለዚህ ቀለም ማባዛት ምንም ትርጉም የለውም. ቀላልነት የማስተዋል እና ፍፁም ነው - ማባዛት ብዙ ጊዜ ያልተለመደ ውጤት ያስገኛል.
ከአንድ ቀለም ወደ አጠቃላይ ጭብጥ አንጻራዊ ቀለም የመሠረት ቀለምን እንድገልጽ እና የሚያስፈልገኝን እያንዳንዱን ቀለም እንድፈጥር ይረዳኛል - ሙላዎች፣ ስትሮክ፣ የግራዲየንት ማቆሚያዎች፣ ጥላዎች - ከእሱ። በዛን ጊዜ, ቀለም ቤተ-ስዕል መሆን ያቆማል እና ስርዓት መሆን ይጀምራል. የSVG ምሳሌዎች በመሙላት፣ ስትሮክ እና ቀስ በቀስ ተመሳሳይ ጥቂት ቀለሞችን እንደገና የመጠቀም አዝማሚያ አላቸው። አንጻራዊ ቀለም እነዚያን ግንኙነቶች አንድ ጊዜ እንዲገልጹ እና በሁሉም ቦታ እንደገና እንዲጠቀሙባቸው ያስችልዎታል - ልክ እነማዎች አዲስ ትዕይንቶችን ለመፍጠር ዳራዎችን እንደገና እንደተጠቀሙ።
በእጅ ምንም ሳያስሉ የመሠረት ቀለሙን አንድ ጊዜ ይለውጡ እና እያንዳንዱ የተገኘ ቀለም በራስ-ሰር ይዘምናል። ከአኒሜሽን ግራፊክስ ውጪ፣ እንደ አዝራሮች እና አገናኞች ላሉ በይነተገናኝ አካላት ግዛቶች ቀለሞችን ለመወሰን ይህንኑ አካሄድ ልጠቀም እችላለሁ። በ«ሉላባይ - ባይ ድብ» ቶን ርዕስ የተጠቀምኩት የመሠረት ቀለም ሲያን የሚመስል ሰማያዊ ነው። ጀርባው በመሠረቴ እና በጨለማ ስሪት መካከል ያለው ራዲያል ቅልመት ነው።
ሙሉ ለሙሉ የተለያየ ስሜት ያላቸው ተለዋጭ ስሪቶችን ለመፍጠር የመሠረቱን ቀለም ብቻ መቀየር አለብኝ፡- --መሠረት: # 5acd6; --ግራድ-መጨረሻ፡ var (--መሠረት); --ግራድ-ጅምር፡ oklch (ከቫር (--ፋውንዴሽን) ካልክ (l - 0.2357) ካልሲ (ሲ * 0.833) h);
የቀለም እሴቶችን ሳላባዛ እነዚያን ብጁ ንብረቶች ከSVG ቅልመት ጋር ለማያያዝ፣ በጠንካራ ኮድ የተቀመጡ የማቆሚያ-ቀለም እሴቶችን በውስጥ መስመር ቅጦች ተክቻለሁ፡
በመቀጠል፣ የእኔ የቶን ፅሁፌ ሁልጊዜ ከመረጥኩት የመሠረት ቀለም ጋር የሚቃረን መሆኑን ማረጋገጥ ነበረብኝ። የ180ዲግ ቀለም ሽክርክር በእርግጠኝነት ብቅ የሚል ተጨማሪ ቀለም ያስገኛል - ግን በማይመች ሁኔታ መንቀጥቀጥ ይችላል፡- የጽሑፍ ብርሃን { ሙላ: oklch (ከ var (- ፋውንዴሽን) l c calc (h + 180)); }
የ90° ፈረቃ ሙሉ ለሙሉ ማሟያ ሳይኖረው ደማቅ ሁለተኛ ደረጃ ቀለም ይፈጥራል፡- የጽሑፍ ብርሃን { ሙላ: oklch (ከ var (- ፋውንዴሽን) l c calc (h - 90)); }
የእኔ መዝናኛ የፈጣን ስዕል የማክግራው 1959 ቶን ርዕስ “ኤል ካቦንግ” ተመሳሳይ ቴክኒኮችን ይጠቀማል ነገር ግን የበለጠ የተለያየ ቤተ-ስዕል አለው። ለምሳሌ, በመሠረት ቀለም እና በጥቁር ጥላ መካከል ሌላ ራዲያል ቅልመት አለ.
ከበስተጀርባ ያለው ሕንፃ እና ዛፉ በቀላሉ ተመሳሳይ የመሠረት ቀለም ያላቸው የተለያዩ ጥላዎች ናቸው. ለእነዚያ መንገዶች፣ ሁለት ተጨማሪ የተሞሉ ቀለሞች ያስፈልገኝ ነበር፡ .bg-መካከለኛ { ሙላ: oklch (ከ var (- ፋውንዴሽን) ካልክ (l - 0.04) ካልሲ (ሲ * 0.91) ሰ); }
.ቢግ-ጨለማ { ሙላ: oklch (ከ var (- ፋውንዴሽን) ካልሲ (l - 0.12) ካልሲ (c * 0.64) ሰ); }
መሠረቶቹ መንቀሳቀስ ሲጀምሩ እስካሁን ድረስ፣ ያሳየኋቸው ነገሮች በሙሉ ቋሚ ናቸው። የመሠረቱን ቀለም ለመቀየር አንድ ሰው ቀለም መራጭን ሲጠቀም እንኳን ያ ለውጥ ወዲያውኑ ይከሰታል። ግን የታነሙ ግራፊክስ እምብዛም አይቆሙም - ፍንጩ በስሙ ውስጥ ነው። ስለዚህ, ቀለም የስርዓቱ አካል ከሆነ, የማይነቃነቅበት ምንም ምክንያት የለም. የመሠረቱን ቀለም ለማንቃት በመጀመሪያ ወደ OKLCH ቻናሎቹ መከፋፈል አለብኝ- ብርሃን ፣ ክሮማ እና ቀለም። ግን አንድ አስፈላጊ ተጨማሪ እርምጃ አለ፡ እነዚያን እሴቶች እንደ ብጁ ባህሪያት መመዝገብ አለብኝ። ግን ምን ማለት ነው? በነባሪነት፣ አሳሽ የCSS ብጁ ንብረት ዋጋ ቀለምን፣ ርዝመትን፣ ቁጥርን ወይም ሌላ ነገርን ሙሉ በሙሉ እንደሚወክል አያውቅም። ያ ማለት ብዙውን ጊዜ በአኒሜሽን ጊዜ በተቀላጠፈ ሁኔታ ሊጣመሩ አይችሉም እና ከአንድ እሴት ወደ ሌላው ይዝለሉ። ብጁ ንብረት መመዝገብ ለአሳሹ የሚወክለውን የእሴት አይነት እና በጊዜ ሂደት እንዴት መሆን እንዳለበት ይነግረዋል። በዚህ አጋጣሚ አሳሹ የኔን የቀለም ቻናሎች እንደ ቁጥሮች እንዲይዛቸው እፈልጋለው ስለዚህ በተረጋጋ ሁኔታ እንዲነሙ። @ንብረት --f-l { አገባብ፡ "<ቁጥር>"; ይወርሳል፡ እውነት; የመነሻ-እሴት: 0.40; }
@property --f-c { አገባብ፡ "<ቁጥር>"; ይወርሳል፡ እውነት; የመነሻ-እሴት: 0.11; }
@ንብረት --f-h { አገባብ፡ "<ቁጥር>"; ይወርሳል፡ እውነት; የመነሻ-እሴት: 305; }
አንዴ ከተመዘገቡ፣ እነዚህ ብጁ ንብረቶች እንደ ቤተኛ CSS ባህሪ አላቸው። አሳሹ በፍሬም-በ-ፍሬም ውስጥ ጣልቃ ሊገባባቸው ይችላል። ከዚያ የመሠረቱን ቀለም ከእነዚያ ቻናሎች እንደገና እገነባለሁ፡- - መሠረት፡ oklch (var (-f-l) var (--f-c) var (--f-h));
ይህ የመሠረቱ ቀለም ልክ እንደሌላው የቁጥር እሴት ተንቀሳቃሽ እንዲሆን ያደርገዋል። በጊዜ ሂደት ብርሃንን ቀስ ብሎ የሚቀይር ቀላል "የመተንፈስ" አኒሜሽን ይኸውና፡ @ቁልፍ ክፈፎች ይተነፍሳሉ { 0%፣ 100% {-f-l፡ 0.36; } 50% {-f-l: 0.46; } }
.toon-ርዕስ { አኒሜሽን: 10 ዎች መተንፈስ ቀላል-በ-ውጭ ማለቂያ የሌለው; }
ሁሉም ሌሎች ቀለሞች በመሙላት፣ ግሬዲየንት እና ስትሮክ የሚመነጩት ከ --ፋውንዴሽን ነው፣ ሁሉም አንድ ላይ ይንቀሳቀሳሉ፣ እና ምንም ነገር በእጅ መዘመን አያስፈልገውም። አንድ የታነመ ቀለም፣ ብዙ ተፅዕኖዎች በዚህ ሂደት መጀመሪያ ላይ፣ የሲኤስኤስ አንጻራዊ የቀለም እሴቶች የበለጠ እድሎችን ሊሰጡ ይችሉ እንደሆነ እንዲሁም ለመተግበር ቀላል ያደርጋቸዋል ብዬ አስብ ነበር። በቅርቡ አዲስ የወርቅ ማዕድን ዳራ ወደ የድር ጣቢያዬ አድራሻ ጨምሬያለሁ፣ እና የመጀመሪያው ድግግሞሽ የሚያበሩ እና የሚወዛወዙ የዘይት መብራቶችን አካትቷል።
የሲኤስኤስ አንጻራዊ ቀለሞች እንዴት አኒሜሽን ማድረግ የማዕድን ውስጠ-ቁራጮችን ከመብራቶቹ ቀለሞች ጋር በማጣመር የበለጠ እውን እንደሚያደርገው ለመዳሰስ ፈለግሁ። በዙሪያቸው ያለውን ዓለም ማለትም እውነተኛ ብርሃን በሚያደርገው መንገድ እንዲነኩ ፈልጌ ነበር። ስለዚህ፣ ብዙ ቀለሞችን ከማንቀሳቀስ ይልቅ፣ አንድ ቀለም ብቻ የሚያንቀሳቅስ ትንሽ የመብራት ስርዓት ገነባሁ።
የመጀመሪያ ስራዬ ከበስተጀርባው እና ከመብራቶቼ መካከል ተደራቢ ንብርብር መዘርጋት ነበር፡- <መንገድ id="ተደራቢ" fill="var(--ተደራቢ-ቲን)" [...] style="ድብልቅ-ድብልቅ-ሁነታ: ቀለም" />
ድብልቅ-ድብልቅ-ሁነታን ተጠቀምኩ፡ ቀለም ምክንያቱም ያ ከሥሩ ያለውን ብርሃን እየጠበቀ ሳለ ከሥሩ ያለውን ቀለም ስለሚቀባ። ተደራቢው እነማዎች ሲበሩ ብቻ እንዲታይ ስለምፈልግ ተደራቢውን መርጬ ገባሁ፡ .svg-mine #ተደራቢ { ማሳያ፡ የለም; }
@ሚዲያ (የተቀነሰ እንቅስቃሴን ይመርጣል፡- ምርጫ የለም) { .svg-mine[data-animations=on] #ተደራቢ { ማሳያ፡ ማገድ; ግልጽነት: 0.5; } }
ተደራቢው በቦታው ነበር፣ ግን ገና ከመብራቶቹ ጋር አልተገናኘም። የብርሃን ምንጭ ያስፈልገኝ ነበር። የእኔ መብራቶች ቀላል ናቸው፣ እና እያንዳንዳቸው እኔ በማጣራት የደበዝኩትን የክበብ አካል ይዟል። ማጣሪያው በጠቅላላው ክብ ላይ በጣም ለስላሳ ብዥታ ይፈጥራል.
ተደራቢውን እና መብራቶችን ለየብቻ ከማንቀሳቀስ ይልቅ አንድ ነጠላ "ነበልባል" ቀለም ቶከን አኒሜያለሁ እና ሁሉንም ነገር ከዚያ አመጣለሁ። በመጀመሪያ፣ ለ OKLCH ቻናሎች ሶስት የተተየቡ ብጁ ንብረቶችን አስመዘግባለሁ፡ @property --fl-l { አገባብ፡ "<ቁጥር>"; ይወርሳል፡ እውነት; የመነሻ-እሴት: 0.86; } @property --fl-c { አገባብ፡ "<ቁጥር>"; ይወርሳል፡ እውነት; የመጀመሪያ-እሴት: 0.12; } @property --fl-h { አገባብ፡ "<ቁጥር>"; ይወርሳል፡ እውነት; የመነሻ-እሴት: 95; }
እነዚያን ቻናሎች አኒሜታለሁ፣ ሆን ብዬ ጥቂት ፍሬሞችን ወደ ብርቱካናማ እየገፋሁ፣ ብልጭ ድርግም የሚለው ብልጭታ እንደ እሳት ብርሃን በግልጽ ይነበባል፡
@የቁልፍ ክፈፎች ነበልባል { 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 ወሰንኩት፣ ስለዚህ የተጋሩ ተለዋዋጮች ለሁለቱም መብራቶች እና ተደራቢዎች ይገኛሉ፡
@ሚዲያ (የተቀነሰ እንቅስቃሴን ይመርጣል፡- ምርጫ የለም) { .svg-mine[data-animations=በርቷል] { አኒሜሽን: ነበልባል 3.6s ማለቂያ የሌለው መስመራዊ; ማግለል፡ ማግለል;
/* ከአኒሜሽን ቻናሎች የነበልባል ቀለም ይገንቡ */ --ነበልባል፡ oklch (var (--fl-l) var (--fl-c) var (--fl-h));
/* የመብራት ቀለም ከእሳት የተገኘ */ --lamp-core: oklch (ከቫር (--flame) calc (l + 0.05) calc (c * 0.70) h);
/* ከተመሳሳይ ነበልባል የተገኘ ተደራቢ ቀለም */ --ተደራቢ-ቀለም፡ oklch(ከቫር(--ነበልባል) ካልሲ (l + 0.06) ካልሲ (c * 0.65) ካልሲ (ሸ - 10)); } }
በመጨረሻ፣ እነዚያን የተገኙ ቀለሞች በሚያንጸባርቁ መብራቶች እና በሚነካቸው ተደራቢዎች ላይ ተጠቀምኳቸው፡- @ሚዲያ (የተቀነሰ እንቅስቃሴን ይመርጣል፡- ምርጫ የለም) { .svg-mine[data-animations=on] #የእኔ-መብራት-1 > ክበብ፣ .svg-mine[data-animations=on] #mine-lamp-2 > ክብ { ሙላ: var (--lamp-core); }
.svg-mine[data-animations=on] #ተደራቢ { ማሳያ፡ ማገድ; መሙላት: var (--ተደራቢ-ቲን); ግልጽነት: 0.5; } }
እሳቱ ወደ ብርቱካን ሲቀየር መብራቶቹ ይሞቃሉ፣ እና ትዕይንቱ ከእነሱ ጋር ይሞቃል። እሳቱ ሲቀዘቅዝ, ሁሉም ነገር አንድ ላይ ይቀመጣል. በጣም ጥሩው ነገር በእጅ የተጻፈ ነገር የለም. የመሠረት ቤቱን ቀለም ከቀየርኩ ወይም የነበልባል አኒሜሽን ክልሎችን ካስተካከልኩ፣ አጠቃላይ የመብራት ስርዓቱ በአንድ ጊዜ ይዘምናል። የመጨረሻውን ውጤት በድር ጣቢያዬ ላይ ማየት ይችላሉ. እንደገና ጥቅም ላይ መዋል ፣ እንደገና ጥቅም ላይ ማዋል ፣ እንደገና ጎብኝቷል። እነዛ የሃና-ባርቤራ አኒሜተሮች ከአስፈላጊነት የተነሳ ንጥረ ነገሮችን እንደገና ለመጠቀም ተገድደዋል፣ነገር ግን ስራዬን የበለጠ ወጥነት ያለው እና ለማቆየት ቀላል ስለሚያደርገው ቀለሞችን እንደገና እጠቀማለሁ። የሲኤስኤስ አንጻራዊ የቀለም እሴቶች የሚከተሉትን ለማድረግ ያስችሉኛል፦
ነጠላ የመሠረት ቀለም ይግለጹ, ሌሎች ቀለሞች ከእሱ ጋር እንዴት እንደሚዛመዱ ያብራሩ, እነዚያን ግንኙነቶች በሁሉም ቦታ እንደገና ተጠቀምባቸው፣ እና አንድ እሴት በመቀየር ስርዓቱን ያንሱ።
አንጻራዊ ቀለም ጭብጡን ቀላል አያደርገውም. ቀለም፣ ልክ እንደ እንቅስቃሴ፣ ሆን ተብሎ የታሰበበት የአስተሳሰብ መንገድን ያበረታታል - እና አንድ እሴት መለወጥ ከሱ ስር ያለውን ስራ እንደገና ሳይጽፍ መላውን ትእይንት ሊለውጥ ይችላል።
