ບໍ່ດົນມານີ້, ຂ້າພະເຈົ້າໄດ້ປັບປຸງຮູບພາບເຄື່ອນໄຫວຢູ່ໃນເວັບໄຊທ໌ຂອງຂ້ອຍດ້ວຍຫົວຂໍ້ໃຫມ່ແລະກຸ່ມຕົວລະຄອນບຸກເບີກ, ປະຕິບັດເຕັກນິກຫຼາຍຢ່າງທີ່ຂ້ອຍໄດ້ແບ່ງປັນໃນຊຸດນີ້. ອານິເມຊັນຂອງຂ້ອຍຈຳນວນໜຶ່ງປ່ຽນລັກສະນະເມື່ອມີຄົນພົວພັນກັບເຂົາເຈົ້າ ຫຼືໃນເວລາຕ່າງກັນຂອງມື້.
ສີໃນກາຟິກຢູ່ເທິງຫນ້າ blog ຂອງຂ້ອຍປ່ຽນຈາກຕອນເຊົ້າຈົນເຖິງກາງຄືນທຸກໆມື້. ຈາກນັ້ນ, ມີໂໝດຫິມະ, ເຊິ່ງເພີ່ມສີສັນທີ່ໜາວເຢັນ ແລະ ຮູບແບບລະດູໜາວ, ໂດຍມີຊັ້ນວາງຊ້ອນກັນ ແລະ ໂໝດປະສົມ.
ໃນຂະນະທີ່ເຮັດວຽກນີ້, ຂ້ອຍເລີ່ມສົງໄສວ່າຄ່າສີທີ່ກ່ຽວຂ້ອງຂອງ CSS ສາມາດໃຫ້ຂ້ອຍຄວບຄຸມໄດ້ຫຼາຍຂຶ້ນໃນຂະນະທີ່ຍັງເຮັດໃຫ້ຂະບວນການງ່າຍຂຶ້ນ. ໝາຍເຫດ: ໃນບົດສອນນີ້, ຂ້ອຍຈະເນັ້ນໃສ່ຄ່າສີທີ່ກ່ຽວຂ້ອງ ແລະພື້ນທີ່ສີ OKLCH ສຳລັບກາຟິກ ແລະພາບເຄື່ອນໄຫວ. ຖ້າທ່ານຕ້ອງການລົງເລິກເຂົ້າໄປໃນສີທີ່ກ່ຽວຂ້ອງ, Ahmad Shadeed ໄດ້ສ້າງຄູ່ມືການໂຕ້ຕອບທີ່ດີເລີດ. ສໍາລັບພື້ນທີ່ສີ, gamuts, ແລະ OKLCH, Geoff Graham ຂອງພວກເຮົາເອງໄດ້ຂຽນກ່ຽວກັບພວກມັນ.
ການນໍາໃຊ້ອົງປະກອບຊ້ໍາຊ້ອນແມ່ນສໍາຄັນ. ພື້ນຫຼັງຖືກນຳໃຊ້ຄືນໃໝ່ທຸກຄັ້ງທີ່ເປັນໄປໄດ້, ດ້ວຍການຊູມ ແລະ ການວາງຊ້ອນກັນຊ່ວຍສ້າງສາກໃໝ່ຈາກງານສິນລະປະອັນດຽວກັນ. ມັນເກີດມາຈາກຄວາມຈໍາເປັນ, ແຕ່ມັນຍັງຊຸກຍູ້ໃຫ້ຄິດໃນແງ່ຂອງຊຸດຫຼາຍກວ່າ scene ສ່ວນບຸກຄົນ. ບັນຫາກັບການປັບປຸງສີ Palettes ດ້ວຍຕົນເອງ ໃຫ້ໄປຫາສິ່ງທ້າທາຍຂອງຂ້ອຍໂດຍກົງ. ໃນ Toon Titles like this one — ອີງຕາມ 1959 Yogi Bear Show episode “Lullabye-Bye Bear” — ແລະວຽກງານຂອງຂ້າພະເຈົ້າໂດຍທົ່ວໄປ, palettes ແມ່ນຈໍາກັດພຽງແຕ່ບາງສີທີ່ເລືອກ.
ຂ້ອຍສ້າງຮົ່ມແລະສີຈາກສິ່ງທີ່ຂ້ອຍເອີ້ນວ່າ "ພື້ນຖານ" ສີຂອງຂ້ອຍເພື່ອຂະຫຍາຍສີ palette ໂດຍບໍ່ຕ້ອງເພີ່ມສີຫຼາຍ.
ໃນ Sketch, ຂ້ອຍເຮັດວຽກຢູ່ໃນພື້ນທີ່ສີ HSL, ດັ່ງນັ້ນຂະບວນການນີ້ກ່ຽວຂ້ອງກັບການເພີ່ມຫຼືຫຼຸດລົງມູນຄ່າຄວາມສະຫວ່າງຂອງສີພື້ນຖານຂອງຂ້ອຍ. ດ້ວຍຄວາມຊື່ສັດ, ມັນບໍ່ແມ່ນວຽກທີ່ຫຍຸ້ງຍາກ - ແຕ່ການເລືອກສີພື້ນຖານທີ່ແຕກຕ່າງກັນຮຽກຮ້ອງໃຫ້ມີການສ້າງຊຸດຂອງຮົ່ມແລະສີໃຫມ່ທັງຫມົດ. ການເຮັດແບບນັ້ນດ້ວຍຕົນເອງ, ອີກເທື່ອຫນຶ່ງແລະອີກຄັ້ງ, ກາຍເປັນວຽກຫນັກຢ່າງໄວວາ.
ຂ້າພະເຈົ້າໄດ້ກ່າວເຖິງ HSL — H (hue), S (ຄວາມອີ່ມຕົວ), ແລະ L (ຄວາມສະຫວ່າງ) — ຊ່ອງສີ, ແຕ່ນັ້ນແມ່ນພຽງແຕ່ຫນຶ່ງໃນຫຼາຍວິທີທີ່ຈະອະທິບາຍສີ. RGB — R (ສີແດງ), G (ສີຂຽວ), B (ສີຟ້າ) — ອາດຈະຄຸ້ນເຄີຍທີ່ສຸດ, ຢ່າງຫນ້ອຍໃນຮູບແບບ Hex ຂອງມັນ. ນອກຈາກນີ້ຍັງມີ LAB — L (ຄວາມສະຫວ່າງ), A (ສີຂຽວ – ສີແດງ), B (ສີຟ້າ – ສີເຫຼືອງ) — ແລະ ໃໝ່ກວ່າ, ແຕ່ໃນປັດຈຸບັນໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງກວ້າງຂວາງ LCH — L (ຄວາມສະຫວ່າງ), C (chroma), H (hue) — ຮູບແບບໃນຮູບແບບ OKLCH ຂອງມັນ. ດ້ວຍ LCH - ໂດຍສະເພາະ OKLCH ໃນ CSS - ຂ້ອຍສາມາດປັບຄ່າຄວາມສະຫວ່າງຂອງສີພື້ນຖານຂອງຂ້ອຍໄດ້.
ຫຼືຂ້ອຍສາມາດປ່ຽນແປງ chroma ຂອງມັນ. LCH chroma ແລະຄວາມອີ່ມຕົວຂອງ HSL ທັງສອງອະທິບາຍເຖິງຄວາມເຂັ້ມຫຼືຄວາມອຸດົມສົມບູນຂອງສີ, ແຕ່ພວກມັນເຮັດໃນວິທີທີ່ແຕກຕ່າງກັນ. LCH ໃຫ້ຂ້າພະເຈົ້າລະດັບຄວາມກວ້າງຂວາງແລະຄາດຄະເນຫຼາຍກວ່າການປະສົມລະຫວ່າງສີ.
ຂ້າພະເຈົ້າຍັງສາມາດປ່ຽນສີສີເພື່ອສ້າງ palette ຂອງສີທີ່ມີຄວາມສະຫວ່າງດຽວກັນແລະຄ່າ chroma. ໃນທັງ HSL ແລະ LCH, spectrum hue ເລີ່ມຈາກສີແດງ, ຍ້າຍຜ່ານສີຂຽວແລະສີຟ້າ, ແລະກັບຄືນໄປສີແດງ.
ເປັນຫຍັງ OKLCH ປ່ຽນວິທີທີ່ຂ້ອຍຄິດກ່ຽວກັບສີ ການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບສໍາລັບຊ່ອງສີ OKLCH ໃນປັດຈຸບັນແມ່ນແຜ່ຫຼາຍ, ເຖິງແມ່ນວ່າເຄື່ອງມືການອອກແບບ - ລວມທັງ Sketch - ຍັງບໍ່ໄດ້ຕິດ. ໂຊກດີ, ມັນບໍ່ຄວນຢຸດເຈົ້າຈາກການໃຊ້ OKLCH. ຕົວທ່ອງເວັບຈະປ່ຽນຄ່າ Hex, HSL, LAB, ແລະ RGB ຢ່າງມີຄວາມສຸກເປັນ OKLCH ສໍາລັບທ່ານ. ທ່ານສາມາດກໍານົດຊັບສິນທີ່ກໍານົດເອງ CSS ທີ່ມີສີພື້ນຖານໃນຊ່ອງໃດຫນຶ່ງ, ລວມທັງ Hex: /*ສີພື້ນຖານ*/ --ພື້ນຖານ: #5accd6;
ສີໃດໆທີ່ໄດ້ມາຈາກມັນຈະຖືກປ່ຽນເປັນ OKLCH ໂດຍອັດຕະໂນມັດ: --foundation-light: oklch(ຈາກ var(--foundation) [... ]; } --foundation-mid: oklch(ຈາກ var(--foundation) [... ]; } --foundation-dark: oklch(ຈາກ var(--foundation) [... ]; }
ສີທີ່ກ່ຽວຂ້ອງເປັນລະບົບການອອກແບບ ຄິດເຖິງສີທີ່ເປັນພີ່ນ້ອງກັນວ່າ: "ເອົາສີນີ້, ປັບມັນ, ແລ້ວໃຫ້ຜົນໄດ້ຮັບ." ມີສອງວິທີໃນການປັບສີ: ການປ່ຽນແປງຢ່າງແທ້ຈິງແລະການປ່ຽນແປງອັດຕາສ່ວນ. ພວກມັນມີລັກສະນະຄ້າຍຄືກັນໃນລະຫັດ, ແຕ່ປະຕິບັດຕົວແຕກຕ່າງກັນຫຼາຍເມື່ອທ່ານເລີ່ມປ່ຽນສີພື້ນຖານ. ຄວາມເຂົ້າໃຈຄວາມແຕກຕ່າງນັ້ນແມ່ນສິ່ງທີ່ສາມາດປ່ຽນການໃຊ້ສີທີ່ກ່ຽວຂ້ອງເປັນລະບົບ. /*ສີພື້ນຖານ*/ --ພື້ນຖານ: #5accd6;
ຕົວຢ່າງ, ຄ່າຄວາມສະຫວ່າງຂອງສີພື້ນຖານຂອງຂ້ອຍແມ່ນ 0.7837, ໃນຂະນະທີ່ຮຸ່ນທີ່ເຂັ້ມກວ່າມີມູນຄ່າ 0.5837. ເພື່ອຄິດໄລ່ຄວາມແຕກຕ່າງ, ຂ້ອຍຫັກຄ່າຕ່ໍາຈາກຄ່າທີ່ສູງກວ່າແລະນໍາໃຊ້ຜົນໄດ້ຮັບໂດຍໃຊ້ຟັງຊັນ calc(): --foundation-dark: 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) h);
ເພື່ອສ້າງ palette ຂອງ hues, ຂ້ອຍຄິດໄລ່ຄວາມແຕກຕ່າງລະຫວ່າງຄ່າສີຂອງສີພື້ນຖານຂອງຂ້ອຍ (200) ແລະສີໃຫມ່ຂອງຂ້ອຍ (260): oklch(ຈາກ var(--ພື້ນຖານ) l c calc(h + 60));
ການຄິດໄລ່ເຫຼົ່ານັ້ນແມ່ນຢ່າງແທ້ຈິງ. ເມື່ອຂ້ອຍລົບຈໍານວນຄົງທີ່, ຂ້ອຍເວົ້າຢ່າງມີປະສິດທິພາບວ່າ, "ລົບຫຼາຍສະເຫມີ." ຄືກັນເມື່ອເພີ່ມຄ່າຄົງທີ່: calc(c - 0.10) calc(c + 0.10)
ຂ້າພະເຈົ້າໄດ້ຮຽນຮູ້ຂໍ້ຈໍາກັດຂອງວິທີການນີ້ຍາກ. ເມື່ອຂ້ອຍອາໄສການລົບຄ່າ chroma ຄົງທີ່, ສີຈະຕົກລົງໄປເປັນສີຂີ້ເຖົ່າທັນທີທີ່ຂ້ອຍປ່ຽນພື້ນຖານ. palette ທີ່ເຮັດວຽກສໍາລັບສີຫນຶ່ງໄດ້ແຕກແຍກສໍາລັບສີອື່ນ. ການຄູນມີພຶດຕິກຳແຕກຕ່າງກັນ. ເມື່ອຂ້ອຍຄູນ chroma, ຂ້ອຍບອກຕົວທ່ອງເວັບວ່າ: "ຫຼຸດລົງຄວາມເຂັ້ມຂອງສີນີ້ໂດຍອັດຕາສ່ວນ." ຄວາມສໍາພັນລະຫວ່າງສີຍັງຄົງ intact, ເຖິງແມ່ນວ່າໃນເວລາທີ່ພື້ນຖານມີການປ່ຽນແປງ: calc(c * 0.10)
ຍ້າຍຂອງຂ້ອຍ, ປັບຂະຫນາດມັນ, ໝຸນມັນກົດ
ຍ້າຍຄວາມສະຫວ່າງ (ຕື່ມຫຼືລົບ), ຂະຫນາດ chroma (ຄູນ), ໝຸນສີສີ (ຕື່ມ ຫຼືລົບອົງສາ).
ຂ້າພະເຈົ້າປັບຂະຫນາດ chroma ເນື່ອງຈາກວ່າຂ້າພະເຈົ້າຕ້ອງການການປ່ຽນແປງຄວາມເຂັ້ມແຂງຢູ່ກັບສັດສ່ວນຂອງສີພື້ນຖານ. ຄວາມສຳພັນຂອງເຫຼັ້ມແມ່ນໝູນວຽນ, ສະນັ້ນ ການຄູນສີບໍ່ມີຄວາມຫມາຍຫຍັງເລີຍ. ຄວາມສະຫວ່າງແມ່ນຄວາມຮັບຮູ້ ແລະ ຢ່າງແທ້ຈິງ — ການຄູນມັນມັກຈະໃຫ້ຜົນໄດ້ຮັບທີ່ແປກປະຫຼາດ.
ຈາກສີຫນຶ່ງໄປຫາຫົວຂໍ້ທັງຫມົດ ສີທີ່ກ່ຽວຂ້ອງເຮັດໃຫ້ຂ້ອຍສາມາດກໍານົດສີພື້ນຖານແລະສ້າງທຸກສີອື່ນໆທີ່ຂ້ອຍຕ້ອງການ - ຕື່ມ, ເສັ້ນເລືອດຕັນໃນ, gradient stops, shadows - ຈາກມັນ. ໃນຈຸດນັ້ນ, ສີຢຸດເຊົາເປັນ palette ແລະເລີ່ມຕົ້ນເປັນລະບົບ. ຮູບແຕ້ມ SVG ມີແນວໂນ້ມທີ່ຈະໃຊ້ສີດຽວກັນກັບສອງສາມສີໃນທົ່ວການຕື່ມ, ຈັງຫວະ, ແລະສີ. ສີທີ່ກ່ຽວຂ້ອງສາມາດເຮັດໃຫ້ທ່ານກໍານົດຄວາມສຳພັນເຫຼົ່ານັ້ນຄັ້ງດຽວ ແລະນໍາມາໃຊ້ຄືນໄດ້ຢູ່ທົ່ວທຸກແຫ່ງ — ຄືກັບອະນິເມເຕີ້ໃຊ້ພື້ນຫຼັງຄືນໃໝ່ເພື່ອສ້າງສາກໃໝ່.
ປ່ຽນສີພື້ນຖານຄັ້ງດຽວ, ແລະທຸກສີທີ່ໄດ້ຮັບການປັບປຸງອັດຕະໂນມັດ, ໂດຍບໍ່ມີການຄິດໄລ່ໃຫມ່ດ້ວຍມື. ຢູ່ນອກຮູບພາບເຄື່ອນໄຫວ, ຂ້ອຍສາມາດໃຊ້ວິທີດຽວກັນນີ້ເພື່ອກໍານົດສີສໍາລັບສະຖານະຂອງອົງປະກອບການໂຕ້ຕອບເຊັ່ນປຸ່ມແລະການເຊື່ອມຕໍ່. ສີພື້ນຖານທີ່ຂ້ອຍໃຊ້ໃນ "Lullabye-Bye Bear" Toon Title ຂອງຂ້ອຍແມ່ນສີຟ້າສີຂຽວ. ພື້ນຫຼັງແມ່ນເປັນສີເປັນເສັ້ນສີລະຫວ່າງພື້ນຖານຂອງຂ້ອຍກັບລຸ້ນທີ່ມືດກວ່າ.
ເພື່ອສ້າງສະບັບທາງເລືອກທີ່ມີອາລົມທີ່ແຕກຕ່າງກັນທັງຫມົດ, ຂ້າພະເຈົ້າພຽງແຕ່ຕ້ອງການປ່ຽນສີພື້ນຖານ: --ພື້ນຖານ: #5accd6; --grad-end: var(--ພື້ນຖານ); --grad-start: oklch(ຈາກ var(--ພື້ນຖານ) calc(l - 0.2357) calc(c* 0.833) h);
ເພື່ອຜູກມັດຄຸນສົມບັດແບບກຳນົດເອງເຫຼົ່ານັ້ນກັບ SVG gradient ຂອງຂ້ອຍໂດຍບໍ່ຊໍ້າກັນຄ່າສີ, ຂ້ອຍໄດ້ປ່ຽນຄ່າສີ stop-code ຍາກດ້ວຍຮູບແບບ inline:
ຕໍ່ໄປ, ຂ້ອຍຈໍາເປັນຕ້ອງຮັບປະກັນວ່າ Toon Text ຂອງຂ້ອຍກົງກັນຂ້າມກັບສີພື້ນຖານໃດກໍ່ຕາມທີ່ຂ້ອຍເລືອກ. ການຫມຸນສີ 180deg ເຮັດໃຫ້ມີສີເສີມທີ່ແນ່ນອນວ່າຈະປາກົດ - ແຕ່ສາມາດສັ່ນສະເທືອນໄດ້ບໍ່ສະບາຍ: .text-light { ຕື່ມຂໍ້ມູນໃສ່: oklch(ຈາກ var(--ພື້ນຖານ) l c calc(h + 180)); }
A 90° shift ຜະລິດສີຮອງ vivid ໂດຍບໍ່ມີການເພີ່ມເຕີມຢ່າງເຕັມສ່ວນ: .text-light { ຕື່ມຂໍ້ມູນໃສ່: oklch(ຈາກ var(--ພື້ນຖານ) l c calc(h - 90)); }
ການພັກຜ່ອນຂອງຂ້ອຍຂອງ Quick Draw McGraw's 1959 Toon Title “El Kabong” ໃຊ້ເຕັກນິກດຽວກັນແຕ່ມີສີທີ່ຫຼາກຫຼາຍກວ່າ. ຕົວຢ່າງ, ມີການ gradient radial ອື່ນລະຫວ່າງສີພື້ນຖານແລະຮົ່ມທີ່ຊ້ໍາກວ່າ.
ອາຄານແລະຕົ້ນໄມ້ຢູ່ໃນພື້ນຫລັງແມ່ນຮົ່ມທີ່ແຕກຕ່າງກັນຂອງສີພື້ນຖານດຽວກັນ. ສໍາລັບເສັ້ນທາງເຫຼົ່ານັ້ນ, ຂ້ອຍຕ້ອງການຕື່ມສອງສີຕື່ມ: .bg-ກາງ { ຕື່ມຂໍ້ມູນໃສ່: oklch(ຈາກ var(--ພື້ນຖານ) calc(l - 0.04) calc(c* 0.91) h); }
.bg-ມືດ { ຕື່ມຂໍ້ມູນໃສ່: oklch(ຈາກ var(--ພື້ນຖານ) calc(l - 0.12) calc(c* 0.64) h); }
ເມື່ອຮາກຖານເລີ່ມເຄື່ອນໄຫວ
ມາຮອດປະຈຸ, ທຸກສິ່ງທຸກຢ່າງທີ່ຂ້າພະເຈົ້າສະແດງໃຫ້ເຫັນແມ່ນຄົງທີ່. ເຖິງແມ່ນວ່າໃນເວລາທີ່ຜູ້ໃດຜູ້ນຶ່ງໃຊ້ຕົວເລືອກສີເພື່ອປ່ຽນສີພື້ນຖານ, ການປ່ຽນແປງນັ້ນຈະເກີດຂື້ນທັນທີ. ແຕ່ຮູບພາບເຄື່ອນໄຫວບໍ່ຄ່ອຍຢືນຢູ່ - ຂໍ້ຄຶດແມ່ນຢູ່ໃນຊື່. ດັ່ງນັ້ນ, ຖ້າສີເປັນສ່ວນຫນຶ່ງຂອງລະບົບ, ມັນບໍ່ມີເຫດຜົນທີ່ມັນບໍ່ສາມາດມີການເຄື່ອນໄຫວໄດ້.
ເພື່ອເຄື່ອນໄຫວສີພື້ນຖານ, ກ່ອນອື່ນ ໝົດ ຂ້ອຍຈໍາເປັນຕ້ອງແຍກມັນອອກເປັນຊ່ອງທາງ OKLCH ຂອງມັນ— ຄວາມສະຫວ່າງ, chroma, ແລະສີສີ. ແຕ່ມີຂັ້ນຕອນພິເສດທີ່ສໍາຄັນ: ຂ້ອຍຈໍາເປັນຕ້ອງລົງທະບຽນຄ່າເຫຼົ່ານັ້ນເປັນຄຸນສົມບັດທີ່ກໍາຫນົດເອງທີ່ພິມ. ແຕ່ມັນຫມາຍຄວາມວ່າແນວໃດ?
ໂດຍຄ່າເລີ່ມຕົ້ນ, ຕົວທ່ອງເວັບບໍ່ຮູ້ວ່າມູນຄ່າຊັບສິນທີ່ກໍາຫນົດເອງ CSS ເປັນຕົວແທນຂອງສີ, ຄວາມຍາວ, ຕົວເລກ, ຫຼືສິ່ງອື່ນທັງຫມົດ. ນັ້ນມັກຈະຫມາຍຄວາມວ່າພວກມັນບໍ່ສາມາດໄດ້ຮັບການ interpolated ໄດ້ຢ່າງລຽບງ່າຍໃນລະຫວ່າງພາບເຄື່ອນໄຫວ, ແລະເຕັ້ນໄປຫາຈາກຄ່າຫນຶ່ງໄປຫາຕໍ່ໄປ.
ການລົງທະບຽນຊັບສິນທີ່ກໍາຫນົດເອງບອກຕົວທ່ອງເວັບຂອງປະເພດຂອງມູນຄ່າທີ່ມັນເປັນຕົວແທນແລະວິທີທີ່ມັນຄວນຈະປະຕິບັດໃນໄລຍະເວລາ. ໃນກໍລະນີນີ້, ຂ້ອຍຕ້ອງການໃຫ້ຕົວທ່ອງເວັບປະຕິບັດຊ່ອງທາງສີຂອງຂ້ອຍເປັນຕົວເລກເພື່ອໃຫ້ພວກເຂົາສາມາດເຄື່ອນໄຫວໄດ້ຢ່າງລຽບງ່າຍ.
@property --f-l {
syntax: "
@property --f-c {
syntax: "
@property --f-h {
syntax: "
ເມື່ອລົງທະບຽນ, ຄຸນສົມບັດທີ່ກໍາຫນົດເອງເຫຼົ່ານີ້ປະຕິບັດຄືກັບ CSS ພື້ນເມືອງ. ຕົວທ່ອງເວັບສາມາດ interpolate ໃຫ້ເຂົາເຈົ້າ frame-by-frame. ຫຼັງຈາກນັ້ນ, ຂ້າພະເຈົ້າກໍ່ສ້າງສີພື້ນຖານຈາກຊ່ອງທາງເຫຼົ່ານັ້ນ: --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 ສະດວກໃນອອກ infinite; }
ເນື່ອງຈາກວ່າທຸກສີອື່ນໆໃນການຕື່ມ, gradient, ແລະເສັ້ນເລືອດຕັນໃນແມ່ນມາຈາກ --foundation, ພວກມັນທັງຫມົດມີການເຄື່ອນໄຫວຮ່ວມກັນ, ແລະບໍ່ມີຫຍັງຕ້ອງໄດ້ຮັບການປັບປຸງດ້ວຍຕົນເອງ. ຫນຶ່ງສີສັດ, ຜົນກະທົບຫຼາຍ ໃນຕອນເລີ່ມຕົ້ນຂອງຂະບວນການນີ້, ຂ້າພະເຈົ້າສົງໄສວ່າຄ່າສີທີ່ກ່ຽວຂ້ອງຂອງ CSS ສາມາດສະເຫນີຄວາມເປັນໄປໄດ້ຫຼາຍຂຶ້ນໃນຂະນະທີ່ຍັງເຮັດໃຫ້ມັນງ່າຍດາຍໃນການປະຕິບັດ. ບໍ່ດົນມານີ້ຂ້າພະເຈົ້າໄດ້ເພີ່ມພື້ນຫລັງຂຸດຄົ້ນບໍ່ແຮ່ຄໍາໃຫມ່ໃສ່ຫນ້າຕິດຕໍ່ຂອງເວັບໄຊທ໌ຂອງຂ້ອຍ, ແລະການເຮັດຊ້ໍາຄັ້ງທໍາອິດລວມມີໂຄມໄຟນ້ໍາມັນທີ່ສະຫວ່າງແລະ swing.
ຂ້ອຍຢາກຈະສຳຫຼວດເບິ່ງວ່າ CSS ທີ່ກ່ຽວຂ້ອງສີສັດສາມາດເຮັດໃຫ້ພາຍໃນບໍ່ແຮ່ເປັນຈິງໄດ້ແນວໃດໂດຍການທາສີດ້ວຍສີຈາກໂຄມໄຟ. ຂ້າພະເຈົ້າຕ້ອງການໃຫ້ພວກເຂົາສົ່ງຜົນກະທົບຕໍ່ໂລກອ້ອມຮອບພວກເຂົາ, ວິທີທີ່ແສງສະຫວ່າງທີ່ແທ້ຈິງເຮັດ. ດັ່ງນັ້ນ, ແທນທີ່ຈະມີການເຄື່ອນໄຫວຫຼາຍສີ, ຂ້ອຍໄດ້ສ້າງລະບົບແສງນ້ອຍໆທີ່ເຄື່ອນໄຫວພຽງແຕ່ສີດຽວ.
ວຽກງານທໍາອິດຂອງຂ້ອຍແມ່ນເພື່ອວາງຊັ້ນຊ້ອນກັນລະຫວ່າງພື້ນຫລັງແລະໂຄມໄຟຂອງຂ້ອຍ: <ເສັ້ນທາງ id="overlay" fill="var(--overlay-tint)" […] style="mix-blend-mode: ສີ" />
ຂ້າພະເຈົ້າໄດ້ໃຊ້ຮູບແບບການຜະສົມຜະສານ: ສີເນື່ອງຈາກວ່າສີທີ່ມີສີທີ່ຢູ່ລຸ່ມມັນໃນຂະນະທີ່ຮັກສາຄວາມສະຫວ່າງທີ່ຕິດພັນ. ເນື່ອງຈາກຂ້ອຍພຽງແຕ່ຕ້ອງການໃຫ້ການສະແດງພາບຊ້ອນຊ້ອນເມື່ອເປີດພາບເຄື່ອນໄຫວ, ຂ້ອຍຈຶ່ງເຮັດໃຫ້ການວາງຊ້ອນກັນໄດ້ເລືອກເຂົ້າ: .svg-mine #overlay { ສະແດງ: none; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { ສະແດງ: ຕັນ; opacity: 0.5; } }
ການວາງຊ້ອນກັນຢູ່ໃນສະຖານທີ່, ແຕ່ຍັງບໍ່ທັນໄດ້ເຊື່ອມຕໍ່ກັບໂຄມໄຟ. ຂ້ອຍຕ້ອງການແຫຼ່ງແສງສະຫວ່າງ. ໂຄມໄຟຂອງຂ້ອຍແມ່ນງ່າຍດາຍ, ແລະແຕ່ລະອັນມີອົງປະກອບວົງທີ່ຂ້ອຍເຮັດໃຫ້ມົວດ້ວຍຕົວກອງ. ການກັ່ນຕອງເຮັດໃຫ້ມົວອ່ອນໆໃນທົ່ວວົງມົນ.
ແທນທີ່ຈະມີການເຄື່ອນໄຫວຂອງພາບຊ້ອນກັນ ແລະໂຄມໄຟແຍກກັນ, ຂ້ອຍຕັ້ງສັນຍາລັກສີ “ແປວໄຟ” ອັນດຽວ ແລະເອົາສິ່ງອື່ນມາຈາກນັ້ນ. ທໍາອິດ, ຂ້ອຍລົງທະບຽນສາມຄຸນສົມບັດທີ່ກໍານົດເອງສໍາລັບຊ່ອງທາງ OKLCH:
@property --fl-l {
syntax: "
ຂ້າພະເຈົ້າໄດ້ເຄື່ອນໄຫວຊ່ອງເຫຼົ່ານັ້ນ, ໂດຍເຈດຕະນາຍູ້ບາງຂອບໄປຫາສີສົ້ມເພື່ອໃຫ້ flicker ອ່ານຢ່າງຊັດເຈນເປັນໄຟ:
@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 (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { ການເຄື່ອນໄຫວ: flame 3.6s infinite linear; isolation: isolate;
/* ສ້າງສີໄຟຈາກຊ່ອງເຄື່ອນໄຫວ */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* ສີໂຄມທີ່ໄດ້ມາຈາກແປວໄຟ */ --lamp-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* ສີຊ້ອນທີ່ໄດ້ມາຈາກແປວໄຟດຽວກັນ */ --overlay-tint: oklch(ຈາກ var(--flame) calc(l + 0.06) calc(c*0.65) calc(h - 10)); } }
ສຸດທ້າຍ, ຂ້ອຍໄດ້ນຳໃຊ້ສີທີ່ໄດ້ມາຈາກໂຄມໄຟທີ່ເຫຼື້ອມໃສ ແລະ ການວາງຊ້ອນທີ່ພວກມັນກະທົບ: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > ວົງມົນ, .svg-mine[data-animations=on] #mine-lamp-2 > ວົງມົນ { ຕື່ມຂໍ້ມູນໃສ່: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { ສະແດງ: ຕັນ; ຕື່ມຂໍ້ມູນໃສ່: var(--overlay-tint); opacity: 0.5; } }
ເມື່ອແປວໄຟຫັນໄປຫາສີສົ້ມ, ໂຄມໄຟຈະອຸ່ນຂຶ້ນ, ແລະສາກກໍ່ອົບອຸ່ນຂຶ້ນ. ເມື່ອແປວໄຟເຢັນລົງ, ທຸກສິ່ງທຸກຢ່າງກໍ່ຕົກລົງກັນ. ສ່ວນທີ່ດີທີ່ສຸດແມ່ນວ່າບໍ່ມີຫຍັງຖືກຂຽນດ້ວຍຕົນເອງ. ຖ້າຂ້ອຍປ່ຽນສີພື້ນຖານ ຫຼືປັບຊ່ວງການເຄື່ອນໄຫວຂອງແປວໄຟ, ລະບົບແສງທັງໝົດຈະອັບເດດພ້ອມໆກັນ. ທ່ານສາມາດເບິ່ງຜົນໄດ້ຮັບສຸດທ້າຍຢູ່ໃນເວັບໄຊທ໌ຂອງຂ້ອຍ. ນຳໃຊ້ຄືນໃໝ່, ນຳໃຊ້ຄືນໃໝ່, ທົບທວນຄືນ ອະນິເມເຕີ Hanna-Barbera ເຫຼົ່ານັ້ນຖືກບັງຄັບໃຫ້ໃຊ້ອົງປະກອບຄືນໃຫມ່ໂດຍບໍ່ຈໍາເປັນ, ແຕ່ຂ້ອຍໃຊ້ສີໃຫມ່ເພາະວ່າມັນເຮັດໃຫ້ວຽກງານຂອງຂ້ອຍມີຄວາມສອດຄ່ອງແລະງ່າຍຕໍ່ການຮັກສາ. ຄ່າສີທີ່ກ່ຽວຂ້ອງຂອງ CSS ອະນຸຍາດໃຫ້ຂ້ອຍ:
ກໍານົດສີພື້ນຖານດຽວ, ອະທິບາຍວ່າສີອື່ນກ່ຽວຂ້ອງກັບມັນແນວໃດ, ໃຊ້ຄືນຄວາມສໍາພັນເຫຼົ່ານັ້ນຢູ່ທົ່ວທຸກແຫ່ງ, ແລະ ເຄື່ອນໄຫວລະບົບໂດຍການປ່ຽນຄ່າອັນດຽວ.
ສີທີ່ກ່ຽວຂ້ອງບໍ່ພຽງແຕ່ເຮັດໃຫ້ຫົວຂໍ້ງ່າຍຂຶ້ນ. ມັນຊຸກຍູ້ວິທີການຄິດບ່ອນທີ່ສີ, ຄືກັບການເຄື່ອນໄຫວ, ມີຄວາມຕັ້ງໃຈ - ແລະບ່ອນທີ່ການປ່ຽນຄ່າຫນຶ່ງສາມາດປ່ຽນ scene ທັງຫມົດໂດຍບໍ່ມີການຂຽນຄືນໃຫມ່ໃນວຽກທີ່ຢູ່ລຸ່ມມັນ.
