مەن يېقىندا تور بېتىمدىكى كارتون گرافىكنى يېڭى تېما ۋە بىر تۈركۈم باشلامچى پېرسوناژلار بىلەن يېڭىلاپ ، بۇ يۈرۈشلۈكتە ئورتاقلاشقان نۇرغۇن تېخنىكىلارنى ئەمەلىيەتتە كۆرسەتتىم. مېنىڭ بىر نەچچە كارتون فىلىمىم ئۇلار بىلەن ياكى كۈننىڭ ئوخشىمىغان ۋاقىتلىرىدا ئۇلار بىلەن ئالاقە قىلغاندا تاشقى قىياپىتىنى ئۆزگەرتىدۇ.
بىلوگ بەتلىرىمنىڭ گرافىك ئۈستىدىكى رەڭلىرى ھەر كۈنى ئەتىگەندىن كەچكىچە ئۆزگىرىدۇ. ئاندىن ، بۇ يەردە قار ھالىتى بار بولۇپ ، ئۇ سالقىن رەڭ ۋە قىش پەسلى تېمىسىنى قوشىدۇ ، ئۈستۈنكى قەۋەت ۋە ئارىلاشتۇرۇش شەكلى بىلەن.
بۇ توغرىلىق ئىشلەۋاتقاندا ، CSS نىڭ نىسپىي رەڭ قىممىتى ماڭا تېخىمۇ كۆپ كونترول قىلالامدۇ يوق دەپ ئويلاشقا باشلىدىم. ئەسكەرتىش: بۇ دەرسلىكتە مەن نىسپىي رەڭ قىممىتى ۋە گرافىك ۋە كارتون باش تېما قىلىنغان OKLCH رەڭ بوشلۇقى ئۈستىدە توختىلىمەن. ئەگەر نىسپىي رەڭگە چوڭقۇر چۆكمەكچى بولسىڭىز ، ئەھمەد شادىد قالتىس ئۆز-ئارا يېتەكچى يېتەكچى قۇردى. رەڭ بوشلۇقى ، ئويۇن ۋە OKLCH غا كەلسەك ، ئۆزىمىزنىڭ گېف گراخام ئۇلار ھەققىدە يازغان.
ئېلېمېنتلارنى قايتا-قايتا ئىشلىتىش ئاچقۇچ ئىدى. تەگلىك ئىمكانقەدەر قايتا ئىشلىتىلدى ، چوڭايتىش ۋە قاپلاش ئوخشاش بىر سەنئەت ئەسىرىدىن يېڭى كۆرۈنۈشلەرنى ياساشقا ياردەم بەردى. ئۇ ئېھتىياجدىن تۇغۇلغان ، ئەمما ئۇ يەككە كۆرۈنۈشلەرنى ئەمەس ، بەلكى يۈرۈشلۈك جەھەتتىن تەپەككۇر قىلىشقا ئىلھام بەرگەن. رەڭلىك پالتىنى قولدا يېڭىلاش مەسىلىسى مېنىڭ رىقابەتكە بىۋاسىتە كېلەيلى. مۇشۇنىڭغا ئوخشاش Toon ماۋزۇلىرىدا - 1959-يىلدىكى يوگى ئېيىق كۆرگەزمىسى بۆلۈمى «Lullabye-Bye ئېيىق» نى ئاساس قىلغان بولۇپ ، مېنىڭ خىزمىتىم ئادەتتە ، پالتا پەقەت بىر نەچچە خىل رەڭ بىلەنلا چەكلىنىدۇ.
مەن تېخىمۇ كۆپ رەڭ قوشمايلا پالتىنى كېڭەيتىش ئۈچۈن «ئاساس» رەڭگىم دەپ ئاتىغانلىرىمدىن سايە ۋە رەڭ ھاسىل قىلىمەن.
سىزمىچىلىقتا ، مەن HSL رەڭ بوشلۇقىدا ئىشلەيمەن ، شۇڭا بۇ جەريان مېنىڭ ئاساسى رەڭگىمنىڭ يېنىكلىك دەرىجىسىنى ئاشۇرۇش ياكى تۆۋەنلىتىشنى ئۆز ئىچىگە ئالىدۇ. راستىنى ئېيتقاندا ، بۇ بىر مۈشكۈل ۋەزىپە ئەمەس ، ئەمما باشقىچە ئاساس رەڭگىنى تاللاش پۈتۈنلەي يېڭى بىر يۈرۈش سايە ۋە رەڭ ھاسىل قىلىشنى تەلەپ قىلىدۇ. بۇنى قولدا قايتا-قايتا قىلىش ناھايىتى تېزلا جاپالىق بولىدۇ.
مەن HSL - H (hue) ، S (تويۇنۇش) ۋە L (يېنىكلىك) - رەڭ بوشلۇقىنى تىلغا ئالدىم ، ئەمما بۇ پەقەت رەڭنى تەسۋىرلەشنىڭ بىر قانچە ئۇسۇلىنىڭ بىرى. RGB - R (قىزىل) ، G (يېشىل) ، B (كۆك) - بەلكىم ئەڭ تونۇش بولۇشى مۇمكىن ، ھېچ بولمىغاندا ئۇنىڭ Hex شەكلىدە. بۇ يەردە يەنە LAB - L (يەڭگىللىك) ، A (يېشىل - قىزىل) ، B (كۆك - سېرىق) - ۋە ئەڭ يېڭى ، ئەمما ھازىر كەڭ كۆلەمدە قوللانغان LCH - L (يېنىكلىك) ، C (خروم) ، H (hue) - OKLCH شەكلىدە. LCH ئارقىلىق - CSS دىكى ئالاھىدە OKLCH - مەن ئاساسى رەڭنىڭ يېنىكلىك دەرىجىسىنى تەڭشىيەلەيمەن.
ياكى ئۇنىڭ خرومىنى ئۆزگەرتەلەيمەن. LCH خروم ۋە HSL تويۇنۇش ھەر ئىككىسى رەڭنىڭ كۈچلۈكلۈك ياكى موللىقىنى تەسۋىرلەيدۇ ، ئەمما ئۇلار ئوخشىمىغان ئۇسۇللار بىلەن شۇنداق قىلىدۇ. LCH ماڭا تېخىمۇ كەڭ دائىرىنى ۋە رەڭلەرنى ئالدىن پەرەز قىلغىلى بولىدىغان ئارىلاشتۇرۇشنى بېرىدۇ.
مەن يەنە رەڭنى ئۆزگەرتىپ ، ئوخشاش يېنىكلىك ۋە خروم قىممىتىگە ئىگە رەڭدار پلاستىنكا ھاسىل قىلالايمەن. HSL ۋە LCH نىڭ ھەر ئىككىسىدە ، رەڭ سپېكترى قىزىل رەڭدىن باشلىنىپ ، يېشىل ۋە كۆكتىن يۆتكىلىپ قىزىلغا قايتىدۇ.
نېمە ئۈچۈن OKLCH مېنىڭ رەڭگە بولغان قارىشىمنى ئۆزگەرتتى لايىھىلەش قوراللىرى - سىزمىچىلىقنى ئۆز ئىچىگە ئالغان بولسىمۇ ، توركۆرگۈنىڭ OKLCH رەڭ بوشلۇقىنى قوللىشى ھازىر كەڭ تارقالدى. تەلىيىمىزگە ، بۇ سىزنىڭ OKLCH نى ئىشلىتىشىڭىزنى توسۇپ قالماسلىقى كېرەك. توركۆرگۈچ خۇشاللىق بىلەن سىز ئۈچۈن Hex ، HSL ، LAB ۋە RGB قىممىتىنى OKLCH غا ئايلاندۇرىدۇ. سىز Hex نى ئۆز ئىچىگە ئالغان ھەر قانداق بوشلۇقتا ئاساسى رەڭ بىلەن CSS خاس مۈلۈككە ئېنىقلىما بېرەلەيسىز: / * فوندىنىڭ رەڭگى * / - ئاساسى: # 5accd6;
ئۇنىڭدىن ھاسىل بولغان ھەر قانداق رەڭ ئاپتوماتىك ھالدا OKLCH غا ئايلىنىدۇ: --foundation-light: oklch (var (- ئاساسى) دىن [...];} --foundation-mid: oklch (var (- ئاساسى) دىن [...];} --foundation-dark: oklch (var (- ئاساسى) دىن [...];}
لايىھىلەش سىستېمىسى سۈپىتىدە نىسپىي رەڭ نىسپىي رەڭنى ئويلاپ بېقىڭ: «بۇ رەڭنى ئېلىڭ ، ئۇنى تەڭشەڭ ، ئاندىن ماڭا نەتىجىنى بېرىڭ». رەڭنى تەڭشەشنىڭ ئىككى خىل ئۇسۇلى بار: مۇتلەق ئۆزگىرىش ۋە نىسبەت ئۆزگىرىشى. ئۇلار كودقا ئوخشايدۇ ، ئەمما ئاساس رەڭلىرىنى ئالماشتۇرۇشنى باشلىغاندىن كېيىن ناھايىتى باشقىچە ھەرىكەت قىلىدۇ. بۇ پەرقنى چۈشىنىش نىسپىي رەڭنى ئىشلىتىپ سىستېمىغا ئايلاندۇرالايدۇ. / * فوندىنىڭ رەڭگى * / - ئاساسى: # 5accd6;
مەسىلەن ، مېنىڭ ئاساسى رەڭگىمنىڭ يەڭگىل قىممىتى 0.7837 ، قېنىقراق نۇسخىسىنىڭ قىممىتى 0.5837. پەرقنى ھېسابلاش ئۈچۈن ، تۆۋەن قىممەتنى يۇقىرى قىممەتتىن چىقىرىپ ، ھېسابلاش () فۇنكسىيەسى ئارقىلىق نەتىجىنى ئىشلىتىمەن: --foundation-dark: oklch (var دىن (- ئاساس) دىن) calc (l - 0.20) c h);
سۇس رەڭگە ئېرىشىش ئۈچۈن ئۇنىڭ ئورنىغا پەرقنى قوشىمەن: --foundation-light: oklch (var دىن (- ئاساس) دىن) calc (l + 0.10) c h);
خىرومتەڭشەش ئوخشاش جەريانغا ئەگىشىدۇ. ئاساسى رەڭگىمنىڭ كۈچلۈكلۈك دەرىجىسىنى 0.1035 دىن 0.0035 كە چۈشۈرۈش ئۈچۈن ، مەن بىر قىممەتنى يەنە بىرىدىن چىقىرىمەن: oklch (var دىن (- ئاساس) دىن) l calc (c - 0.10) h);
رەڭدار پلاستىنكا ھاسىل قىلىش ئۈچۈن ، مەن ئاساس رەڭگىمنىڭ (200) ۋە يېڭى رەڭگىمنىڭ (260) رەڭگىنىڭ پەرقىنى ھېسابلايمەن: oklch (var دىن (- ئاساس) دىن) l c calc (h + 60));
بۇ ھېسابلاشلار مۇتلەق. مۇقىم مىقدارنى ئالغاندا ، ئۈنۈملۈك ھالدا «ھەمىشە بۇنى كۆپ ئېلىڭ» دەيمەن. مۇقىم قىممەت قوشقاندا ئوخشاش بولىدۇ: calc (c - 0.10) calc (c + 0.10)
مەن بۇ ئۇسۇلنىڭ چەكلىمىسىنى قاتتىق ئۆگەندىم. مەن مۇقىم خروم قىممىتىنى ئېلىشقا تايانغاندا ، ئاساسنى ئۆزگەرتسەملا رەڭلەر كۈلرەڭگە قاراپ يىمىرىلدى. بىر رەڭ ئۈچۈن ئىشلەيدىغان پالتا يەنە بىر رەڭ ئۈچۈن پارچىلىنىپ كەتتى. كۆپەيتىش باشقىچە ھەرىكەت قىلىدۇ. خرومنى كۆپەيتسەم ، تور كۆرگۈچكە: «بۇ رەڭنىڭ كۈچلۈكلۈك نىسبىتىنى نىسبەتتە ئازايتىڭ» دەيمەن. ئاساس ئۆزگەرگەن تەقدىردىمۇ رەڭلەر ئوتتۇرىسىدىكى مۇناسىۋەت مۇكەممەل ھالەتتە تۇرىدۇ: calc (c * 0.10)
ئۇنى يۆتكەڭ ، كىچىكلىتىڭ ، ئايلاندۇرىمەن
يېنىكلىكنى يۆتكەش (قوشۇش ياكى ئېلىش) ، تارازىسى خروم (كۆپەيتىش) ، رەڭنى ئايلاندۇرۇش (ئۇنۋان قوشۇش ياكى ئېلىش).
مەن خرومنى چوڭايتىمەن ، چۈنكى كۈچلۈكلۈك ئۆزگىرىشىنىڭ ئاساسىي رەڭگە ماس كېلىشىنى ئۈمىد قىلىمەن. Hue مۇناسىۋىتى ئايلانما بولىدۇ ، شۇڭا رەڭنى كۆپەيتىشنىڭ ھېچقانداق ئەھمىيىتى يوق. يەڭگىللىك ئىدراك ۋە مۇتلەق - ئۇنى كۆپەيتىش ھەمىشە غەلىتە ئۈنۈم بېرىدۇ.
بىر رەڭدىن پۈتۈن تېمىغا نىسپىي رەڭ ماڭا ئاساس رەڭنى ئېنىقلاپ ، مەن ئېھتىياجلىق بولغان باشقا ھەر خىل رەڭلەرنى - تولۇقلاش ، سەكتە ، ئاستا-ئاستا توختاپ قېلىش ، سايە ھاسىل قىلىشقا شارائىت ھازىرلاپ بېرىدۇ. ئۇ ۋاقىتتا ، رەڭ پالتا بولۇشنى توختىتىدۇ ۋە سىستېما بولۇشقا باشلايدۇ. SVG تەسۋىرلىرى تولدۇرۇش ، سەكتە ۋە رېشاتكىلاردا ئوخشاش بىر نەچچە رەڭنى قايتا ئىشلىتىشكە مايىل. نىسپىي رەڭ سىزنى بۇ مۇناسىۋەتلەرنى بىر قېتىم ئېنىقلاپ ، ھەممە يەردە قايتا ئىشلىتەلەيسىز - خۇددى كارتونلار ئارقا كۆرۈنۈشنى قايتا ئىشلىتىپ يېڭى كۆرۈنۈشلەرنى ھاسىل قىلغانغا ئوخشاش.
ئاساس رەڭنى بىر قېتىم ئۆزگەرتىڭ ، ھاسىل بولغان ھەر بىر رەڭ ئاپتوماتىك يېڭىلىنىدۇ ، ھېچقانداق نەرسىنى قول بىلەن ھېسابلىمايدۇ. كارتون گرافىكنىڭ سىرتىدا ، مەن بۇ خىل ئۇسۇلنى ئىشلىتىپ ، كۇنۇپكا ۋە ئۇلىنىش قاتارلىق ئۆز-ئارا تەسىر كۆرسىتىدىغان ئېلېمېنتلارنىڭ رەڭگىنى ئېنىقلىيالايمەن. مەن «Lullabye-Bye ئېيىق» Toon ماۋزۇسىدا ئىشلەتكەن ئاساس رەڭ سىيرىلما كۆك. تەگلىك مېنىڭ ئاساسىم بىلەن قېنىق نەشرى ئوتتۇرىسىدىكى رادىئاتسىيە تەدرىجىي.
پۈتۈنلەي ئوخشىمايدىغان كەيپىيات بىلەن باشقا نەشىرلەرنى قۇرۇش ئۈچۈن ، مەن پەقەت ئاساس رەڭگىنى ئۆزگەرتىشىم كېرەك: - ئاساسى: # 5accd6; --grad-end: var (- ئاساس); --grad-start: oklch (var (- foundation) دىن calc (l - 0.2357) calc (c * 0.833) h);
بۇ خاسلىق خۇسۇسىيەتلىرىمنى رەڭ قىممىتىنى كۆپەيتمەيلا SVG دەرىجىسىگە باغلاش ئۈچۈن ، قاتتىق كودلانغان توختاش رەڭ قىممىتىنى ئىچكى ئۇسلۇب بىلەن ئالماشتۇردۇم:
كېيىنكى قەدەمدە ، مەن Toon Text نىڭ ھەر قانداق ئاساسى رەڭنى تاللىشىم بىلەن سېلىشتۇرما بولۇشىغا كاپالەتلىك قىلىشىم كېرەك. 180deg رەڭ ئايلىنىش بىر خىل تولۇقلايدىغان رەڭ ھاسىل قىلىدۇ ، ئەمما ئۇ بىئارام بولىدۇ. .text-light { تولدۇرۇڭ: oklch (var دىن (- ئاساسى) l c calc (h + 180)); }
90 ° لىك ئۆزگىرىش تولۇق تولۇقلىماي جانلىق ئىككىنچى رەڭ ھاسىل قىلىدۇ: .text-light { تولدۇرۇڭ: oklch (var (- ئاساسى) دىن l c calc (h - 90)); }
مېنىڭ تېز سىزىش مەكگاۋنىڭ 1959-يىلدىكى Toon ماۋزۇسى «El Kabong» غا كۆڭۈل ئېچىشىم ئوخشاش تېخنىكىنى قوللانغان ، ئەمما كۆپ خىل پالتا بىلەن. مەسىلەن ، ئۇل رەڭ بىلەن قېنىق سايە ئوتتۇرىسىدا يەنە بىر رادىئاتسىيە تەدرىجىي بار.
ئارقا سۇپىدىكى بىنا ۋە دەرەخ ئوخشاش بىر رەڭنىڭ ئوخشىمىغان سايىسى. بۇ يوللار ئۈچۈن ماڭا قوشۇمچە ئىككى خىل رەڭ لازىم ئىدى: .bg-mid { تولدۇرۇڭ: oklch (var دىن (- ئاساسى) calc (l - 0.04) calc (c * 0.91) h); }
.bg-dark { تولدۇرۇڭ: oklch (var دىن (- ئاساسى) calc (l - 0.12) calc (c * 0.64) h); }
ئاساسلار يۆتكىلىشكە باشلىغاندا
ھازىرغىچە ، مەن كۆرسەتكەن نەرسىلەرنىڭ ھەممىسى تۇراقلىق بولدى. بەزىلەر رەڭ تاللىغۇچ ئىشلىتىپ ئۇل رەڭنى ئۆزگەرتسىمۇ ، بۇ ئۆزگىرىش شۇ ھامان يۈز بېرىدۇ. ئەمما ھەرىكەتچان گرافىك ناھايىتى ئاز توختاپ قالىدۇ - بۇ يىپ ئۇچى ئىسىمدا. شۇڭا ، ئەگەر رەڭ سىستېمىنىڭ بىر قىسمى بولسا ، ئۇنىڭمۇ جانلاندۇرالمايدىغان ھېچقانداق سەۋەبى يوق.
ئاساسى رەڭنى جانلاندۇرۇش ئۈچۈن ، ئالدى بىلەن ئۇنى OKLCH قانىلىغا بۆلۈشىم كېرەك- يەڭگىل ، خىروم ۋە رەڭ. ئەمما بىر مۇھىم قوشۇمچە قەدەم بار: مەن بۇ قىممەتلەرنى تىپىك خاسلىق سۈپىتىدە تىزىملىتىشىم كېرەك. ئەمما بۇ نېمىدىن دېرەك بېرىدۇ؟
سۈكۈتتىكى ھالەتتە ، توركۆرگۈچ CSS خاس مۈلۈك قىممىتىنىڭ رەڭ ، ئۇزۇنلۇق ، سان ياكى باشقا نەرسىگە پۈتۈنلەي ۋەكىللىك قىلىدىغانلىقىنى بىلمەيدۇ. بۇ ھەمىشە كارتون جەريانىدا ئوڭۇشلۇق ئۆز-ئارا باغلىنالمايدىغانلىقىدىن دېرەك بېرىدۇ ، ھەمدە بىر قىممەتتىن يەنە بىر قىممەتكە سەكرەيدۇ.
خاس مۈلۈكنى تىزىملاش توركۆرگۈچكە ۋەكىللىك قىلىدىغان قىممەتنىڭ تۈرى ۋە ۋاقىتنىڭ ئۆتۈشىگە ئەگىشىپ قانداق ھەرىكەت قىلىدىغانلىقىنى كۆرسىتىپ بېرىدۇ. بۇ خىل ئەھۋالدا مەن توركۆرگۈچنىڭ مېنىڭ رەڭلىك قاناللىرىمنى سان سۈپىتىدە بىر تەرەپ قىلىشىنى ئۈمىد قىلىمەن.
@property --f-l {
گرامماتىكىسى: "
@property --f-c {
گرامماتىكىسى: "
@property --f-h {
گرامماتىكىسى: "
تىزىملاتقاندىن كېيىن ، بۇ خاس مۈلۈكلەر يەرلىك CSS غا ئوخشاش ھەرىكەت قىلىدۇ. توركۆرگۈچ ئۇلارنى رامكا بويىچە ئۆز-ئارا باغلىيالايدۇ. ئاندىن مەن ئۇ قاناللاردىن ئۇل رەڭنى قايتا قۇرىمەن: --foundation: oklch (var (- f-l) var (- f-c) var (- f-h));
بۇ باشقا رەڭ قىممىتىگە ئوخشاش ئاساسى رەڭنى جانلاندۇرىدۇ. مانا بۇ ئاددىي «نەپەسلىنىش» كارتون فىلىمى ۋاقىتنىڭ ئۆتۈشىگە ئەگىشىپ يېنىكلىكنى ئاستا-ئاستا يۆتكەيدۇ: @keyframes نەپەس ئالىدۇ { 0%, 100% {--f-l: 0.36; } 50% {--f-l: 0.46; } }
.toon-title { كارتون: 10s ئاسان نەپەسلىنىش چەكسىز. }
تولدۇرۇش ، رېشاتكا ۋە سەكتە قاتارلىق باشقا رەڭلەرنىڭ ھەممىسى - ئاساستىن ھاسىل بولغانلىقتىن ، ئۇلارنىڭ ھەممىسى بىللە جانلىنىدۇ ، قولدا يېڭىلاشنىڭ ھاجىتى يوق. بىر كارتون رەڭ ، نۇرغۇن ئۈنۈملەر بۇ جەرياننىڭ بېشىدا ، مەن CSS نىڭ نىسپىي رەڭ قىممىتى تېخىمۇ كۆپ ئىمكانىيەتلەرنى تەمىنلىيەلەمدۇ-يوق ، بۇلارنى ئاددىيلاشتۇرغىلى بولىدۇ دەپ ئويلىدىم. مەن يېقىندا تور بېتىمنىڭ ئالاقىلىشىش بېتىگە يېڭى ئالتۇن كان ئارقا كۆرۈنۈشىنى قوشتۇم ، بىرىنچى قېتىملىق تەكرارلاشتا پارقىراپ تۇرىدىغان ۋە چاقنايدىغان ماي چىرىغى بار.
مەن CSS نىسپىي رەڭلەرنى قانداق قىلىپ جانلىقلارنىڭ چىراغنىڭ رەڭلىرى بىلەن سىرلاپ كاننىڭ ئىچىنى تېخىمۇ رېئاللىققا ئايلاندۇرالايدىغانلىقى ئۈستىدە ئىزدىنىشنى ئويلىدىم. مەن ئۇلارنىڭ ئەتراپىدىكى دۇنياغا ، ھەقىقىي نۇرغا تەسىر قىلىشىنى ئۈمىد قىلدىم. شۇڭا ، كۆپ خىل رەڭنى جانلاندۇرۇشتىن كۆرە ، پەقەت بىرلا رەڭنى جانلاندۇرىدىغان كىچىككىنە يورۇتۇش سىستېمىسى قۇردىم.
مېنىڭ بىرىنچى ۋەزىپەم تەگلىك بىلەن چىرىغىمنىڭ ئوتتۇرىسىغا بىر قەۋەت قاتلاش:
مەن ئارىلاشما ئارىلاشما ھالەتنى قوللاندىم: رەڭ ، چۈنكى ئۇ ئاستىدىكى يورۇقلۇقنى ساقلاش بىلەن بىللە ئۇنىڭ ئاستىدىكى نەرسىلەرنى كۆرسىتىپ بېرىدۇ. مەن پەقەت كارتونلار ئېچىلغاندا قاپلاشنىڭ كۆرۈنۈشىنى ئۈمىد قىلغىنىم ئۈچۈن ، قاپلاشنى تاللىدىم: .svg-mine #overlay { display: none; }
@media (قىسقارتىلغان ھەرىكەتنى ياخشى كۆرىدۇ: ياقتۇرمايدۇ) { .svg-mine [data-animations = on] #overlay { display: block; ئېنىقلىق دەرىجىسى: 0.5; } }
قاپلاش جايىدا ئىدى ، ئەمما تېخى چىراغقا ئۇلانمىدى. ماڭا نۇر مەنبەسى لازىم ئىدى. چىراغلىرىم ئاددىي ، ھەر بىرىدە مەن سۈزگۈچ بىلەن ئارىلاشتۇرغان چەمبەر ئېلېمېنتى بار. سۈزگۈچ پۈتكۈل چەمبىرەكتە ناھايىتى يۇمشاق تۇتۇق پەيدا قىلىدۇ.
قاپلاش ۋە چىراغنى ئايرىم جانلاندۇرۇشنىڭ ئورنىغا ، مەن بىر «يالقۇن» رەڭ بەلگىسىنى جانلاندۇرىمەن ۋە ئۇنىڭدىن باشقا نەرسىلەرنىڭ ھەممىسىنى ھاسىل قىلىمەن. ئالدى بىلەن ، OKLCH قانىلى ئۈچۈن ئۈچ خىل خاسلاشتۇرۇلغان خاسلىقنى تىزىملىتىمەن:
@property --fl-l {
گرامماتىكىسى: "
مەن ئۇ قاناللارنى جانلاندۇردۇم ، قەستەن بىر نەچچە رامكىنى ئاپېلسىنغا ئىتتىرىمەن ، شۇڭا چاقماق لامپا ئېنىق ئوقۇلدى:
@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 [data-animations = on] { كارتون: يالقۇن 3.6s چەكسىز سىزىقلىق ئايرىۋېتىش: ئايرىۋېتىش
/ * كارتون قاناللاردىن يالقۇن رەڭ ھاسىل قىلىڭ * / - يالقۇن: oklch (var (- fl-l) var (- fl-c) var (- fl-h));
/ * لامپۇچكا يالقۇندىن ھاسىل بولغان * / - لامپ يادرولۇق: oklch (var (- يالقۇن) ھېسابلاش (l + 0.05) ھېسابلاش (c * 0.70) h);
/ * ئوخشاش يالقۇندىن ھاسىل بولغان قاپلاش رەڭگى * / --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] # mine-lamp-2> Circle { تولدۇرۇش: var (- چىراغ يادروسى); }
.svg-mine [data-animations = on] #overlay { display: block; تولدۇرۇش: var (- overlay-tint); ئېنىقلىق دەرىجىسى: 0.5; } }
يالقۇن ئاپېلسىنغا يۆتكەلگەندە ، چىراغلار قىزىپ ، مەنزىرە ئۇلار بىلەن ئىسسىپ كېتىدۇ. يالقۇن سوۋۇغاندا ھەممە نەرسە بىللە ماڭىدۇ. ئەڭ ياخشى يېرى شۇكى ، ھېچقانداق نەرسە قولدا يېزىلمىغان. ئەگەر ئۇل رەڭنى ئۆزگەرتسەم ياكى يالقۇن كارتون دائىرىسىنى تەڭشىسەم ، پۈتكۈل يورۇتۇش سىستېمىسى بىرلا ۋاقىتتا يېڭىلىنىدۇ. ئاخىرقى نەتىجىنى تور بېتىمدىن كۆرەلەيسىز. قايتا ئىشلىتىش ، قايتا ئىشلىتىش ، قايتا كۆزدىن كەچۈرۈش ئاشۇ خەننا-باربېرا كارتونلىرى ئېھتىياجدىن ئېلېمېنتلارنى قايتا-قايتا ئىشلىتىشكە مەجبۇر بولدى ، ئەمما مەن رەڭلەرنى قايتا ئىشلىتىمەن ، چۈنكى ئۇ مېنىڭ خىزمىتىمنى تېخىمۇ ئىزچىل ۋە ئاسراشقا قولايلىق يارىتىدۇ. CSS نىسپىي رەڭ قىممىتى ماڭا يول قويىدۇ:
يەككە ئاساس رەڭگە ئېنىقلىما بېرىڭ ، باشقا رەڭلەرنىڭ ئۇنىڭغا قانداق باغلىنىدىغانلىقىنى تەسۋىرلەڭ ، بۇ مۇناسىۋەتلەرنى ھەممە يەردە قايتا ئىشلىتىڭ ، ۋە بىر قىممەتنى ئۆزگەرتىش ئارقىلىق سىستېمىنى جانلاندۇرۇڭ.
نىسپىي رەڭ ئۇلارنى ئاددىيلاشتۇرمايدۇ. ئۇ ھەرىكەتكە ئوخشاش رەڭنىڭ قەستەن ۋە قەيەردە بىر قىممەتنى ئۆزگەرتىش ئۇنىڭ ئاستىدىكى ئەسەرنى قايتا يازماي تۇرۇپ پۈتكۈل كۆرۈنۈشنى ئۆزگەرتەلەيدىغان تەپەككۇر ئۇسۇلىنى ئىلھاملاندۇرىدۇ.
