ನಾನು ಇತ್ತೀಚೆಗೆ ನನ್ನ ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ಅನಿಮೇಟೆಡ್ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಹೊಸ ಥೀಮ್ ಮತ್ತು ಪ್ರವರ್ತಕ ಪಾತ್ರಗಳ ಗುಂಪಿನೊಂದಿಗೆ ರಿಫ್ರೆಶ್ ಮಾಡಿದ್ದೇನೆ, ಈ ಸರಣಿಯಲ್ಲಿ ನಾನು ಹಂಚಿಕೊಂಡಿರುವ ಸಾಕಷ್ಟು ತಂತ್ರಗಳನ್ನು ಆಚರಣೆಗೆ ತರುತ್ತೇನೆ. ಯಾರಾದರೂ ಅವರೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದಾಗ ಅಥವಾ ದಿನದ ವಿವಿಧ ಸಮಯಗಳಲ್ಲಿ ನನ್ನ ಕೆಲವು ಅನಿಮೇಷನ್ಗಳು ನೋಟವನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ.
ನನ್ನ ಬ್ಲಾಗ್ ಪುಟಗಳ ಮೇಲಿನ ಗ್ರಾಫಿಕ್ನಲ್ಲಿನ ಬಣ್ಣಗಳು ಪ್ರತಿದಿನ ಬೆಳಿಗ್ಗೆಯಿಂದ ರಾತ್ರಿಯವರೆಗೆ ಬದಲಾಗುತ್ತವೆ. ನಂತರ, ಸ್ನೋ ಮೋಡ್ ಇದೆ, ಇದು ತಂಪಾದ ಬಣ್ಣಗಳು ಮತ್ತು ಚಳಿಗಾಲದ ಥೀಮ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ, ಓವರ್ಲೇ ಲೇಯರ್ ಮತ್ತು ಬ್ಲೆಂಡಿಂಗ್ ಮೋಡ್ನ ಸೌಜನ್ಯ.
ಈ ಕೆಲಸ ಮಾಡುವಾಗ, CSS ಸಂಬಂಧಿತ ಬಣ್ಣದ ಮೌಲ್ಯಗಳು ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುವಾಗ ನನಗೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ನೀಡಬಹುದೇ ಎಂದು ನಾನು ಆಶ್ಚರ್ಯ ಪಡಲು ಪ್ರಾರಂಭಿಸಿದೆ. ಗಮನಿಸಿ: ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ, ನಾನು ಸಾಪೇಕ್ಷ ಬಣ್ಣದ ಮೌಲ್ಯಗಳು ಮತ್ತು ಥೆಮಿಂಗ್ ಗ್ರಾಫಿಕ್ಸ್ ಮತ್ತು ಅನಿಮೇಷನ್ಗಳಿಗಾಗಿ OKLCH ಬಣ್ಣದ ಜಾಗದ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತೇನೆ. ನೀವು ಸಾಪೇಕ್ಷ ಬಣ್ಣಕ್ಕೆ ಆಳವಾಗಿ ಧುಮುಕಲು ಬಯಸಿದರೆ, ಅಹ್ಮದ್ ಶದೀದ್ ಅವರು ಅತ್ಯುತ್ತಮವಾದ ಸಂವಾದಾತ್ಮಕ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ರಚಿಸಿದ್ದಾರೆ. ಬಣ್ಣದ ಸ್ಥಳಗಳು, ಗ್ಯಾಮಟ್ಗಳು ಮತ್ತು OKLCH ಗಾಗಿ, ನಮ್ಮ ಸ್ವಂತ ಜಿಯೋಫ್ ಗ್ರಹಾಂ ಅವರ ಬಗ್ಗೆ ಬರೆದಿದ್ದಾರೆ.
ಅಂಶಗಳ ಪುನರಾವರ್ತಿತ ಬಳಕೆಯು ಪ್ರಮುಖವಾಗಿದೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಹಿನ್ನೆಲೆಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಲಾಗುತ್ತದೆ, ಜೂಮ್ಗಳು ಮತ್ತು ಮೇಲ್ಪದರಗಳು ಅದೇ ಕಲಾಕೃತಿಯಿಂದ ಹೊಸ ದೃಶ್ಯಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ. ಇದು ಅವಶ್ಯಕತೆಯಿಂದ ಹುಟ್ಟಿದೆ, ಆದರೆ ಇದು ವೈಯಕ್ತಿಕ ದೃಶ್ಯಗಳಿಗಿಂತ ಸರಣಿಯ ವಿಷಯದಲ್ಲಿ ಯೋಚಿಸುವುದನ್ನು ಪ್ರೋತ್ಸಾಹಿಸಿತು. ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ನವೀಕರಿಸುವಲ್ಲಿ ಸಮಸ್ಯೆ ನನ್ನ ಸವಾಲಿಗೆ ನೇರವಾಗಿ ಬರೋಣ. ಈ ರೀತಿಯ ಟೂನ್ ಶೀರ್ಷಿಕೆಗಳಲ್ಲಿ - 1959 ರ ಯೋಗಿ ಬೇರ್ ಶೋ ಎಪಿಸೋಡ್ "ಲುಲ್ಲಾಬೈ-ಬೈ ಬೇರ್" ಅನ್ನು ಆಧರಿಸಿದೆ - ಮತ್ತು ನನ್ನ ಕೆಲಸ ಸಾಮಾನ್ಯವಾಗಿ, ಪ್ಯಾಲೆಟ್ಗಳು ಆಯ್ದ ಕೆಲವು ಬಣ್ಣಗಳಿಗೆ ಸೀಮಿತವಾಗಿವೆ.
ಹೆಚ್ಚಿನ ವರ್ಣಗಳನ್ನು ಸೇರಿಸದೆಯೇ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ವಿಸ್ತರಿಸಲು ನನ್ನ "ಫೌಂಡೇಶನ್" ಬಣ್ಣವನ್ನು ನಾನು ಕರೆಯುವ ಛಾಯೆಗಳು ಮತ್ತು ಛಾಯೆಗಳನ್ನು ನಾನು ರಚಿಸುತ್ತೇನೆ.
ಸ್ಕೆಚ್ನಲ್ಲಿ, ನಾನು HSL ಬಣ್ಣದ ಜಾಗದಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತೇನೆ, ಆದ್ದರಿಂದ ಈ ಪ್ರಕ್ರಿಯೆಯು ನನ್ನ ಅಡಿಪಾಯದ ಬಣ್ಣದ ಲಘುತೆಯ ಮೌಲ್ಯವನ್ನು ಹೆಚ್ಚಿಸುವುದು ಅಥವಾ ಕಡಿಮೆ ಮಾಡುವುದು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಪ್ರಾಮಾಣಿಕವಾಗಿ, ಇದು ಪ್ರಯಾಸದಾಯಕ ಕೆಲಸವಲ್ಲ - ಆದರೆ ವಿಭಿನ್ನ ಅಡಿಪಾಯದ ಬಣ್ಣವನ್ನು ಆಯ್ಕೆಮಾಡಲು ಸಂಪೂರ್ಣ ಹೊಸ ಛಾಯೆಗಳು ಮತ್ತು ಛಾಯೆಗಳನ್ನು ರಚಿಸುವ ಅಗತ್ಯವಿದೆ. ಹಸ್ತಚಾಲಿತವಾಗಿ, ಮತ್ತೆ ಮತ್ತೆ ಮಾಡುವುದರಿಂದ ತ್ವರಿತವಾಗಿ ಪ್ರಯಾಸಕರವಾಗುತ್ತದೆ.
ನಾನು HSL - H (ವರ್ಣ), S (ಸ್ಯಾಚುರೇಶನ್), ಮತ್ತು L (ಲಘುತೆ) - ಬಣ್ಣದ ಜಾಗವನ್ನು ಉಲ್ಲೇಖಿಸಿದೆ, ಆದರೆ ಇದು ಬಣ್ಣವನ್ನು ವಿವರಿಸುವ ಹಲವಾರು ವಿಧಾನಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. RGB - R (ಕೆಂಪು), G (ಹಸಿರು), B (ನೀಲಿ) - ಬಹುಶಃ ಅತ್ಯಂತ ಪರಿಚಿತವಾಗಿದೆ, ಕನಿಷ್ಠ ಅದರ ಹೆಕ್ಸ್ ರೂಪದಲ್ಲಿ. LAB - L (ಲಘುತೆ), A (ಹಸಿರು-ಕೆಂಪು), B (ನೀಲಿ-ಹಳದಿ) - ಮತ್ತು ಹೊಸದು, ಆದರೆ ಈಗ ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿರುವ LCH - L (ಲಘುತೆ), C (ಕ್ರೋಮಾ), H (ವರ್ಣ) - ಮಾದರಿಯು ಅದರ OKLCH ರೂಪದಲ್ಲಿದೆ. LCH ನೊಂದಿಗೆ - ನಿರ್ದಿಷ್ಟವಾಗಿ CSS ನಲ್ಲಿ OKLCH - ನನ್ನ ಅಡಿಪಾಯದ ಬಣ್ಣದ ಲಘುತೆಯ ಮೌಲ್ಯವನ್ನು ನಾನು ಸರಿಹೊಂದಿಸಬಹುದು.
ಅಥವಾ ನಾನು ಅದರ ಕ್ರೋಮಾವನ್ನು ಬದಲಾಯಿಸಬಹುದು. LCH ಕ್ರೋಮಾ ಮತ್ತು HSL ಶುದ್ಧತ್ವ ಎರಡೂ ಬಣ್ಣದ ತೀವ್ರತೆ ಅಥವಾ ಶ್ರೀಮಂತಿಕೆಯನ್ನು ವಿವರಿಸುತ್ತದೆ, ಆದರೆ ಅವುಗಳು ವಿಭಿನ್ನ ರೀತಿಯಲ್ಲಿ ಮಾಡುತ್ತವೆ. LCH ನನಗೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಬಣ್ಣಗಳ ನಡುವೆ ಹೆಚ್ಚು ಊಹಿಸಬಹುದಾದ ಮಿಶ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.
ಒಂದೇ ರೀತಿಯ ಲಘುತೆ ಮತ್ತು ಕ್ರೋಮಾ ಮೌಲ್ಯಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಬಣ್ಣಗಳ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸಲು ನಾನು ವರ್ಣವನ್ನು ಬದಲಾಯಿಸಬಹುದು. HSL ಮತ್ತು LCH ಎರಡರಲ್ಲೂ, ವರ್ಣ ವರ್ಣಪಟಲವು ಕೆಂಪು ಬಣ್ಣದಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ, ಹಸಿರು ಮತ್ತು ನೀಲಿ ಬಣ್ಣಗಳ ಮೂಲಕ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಕೆಂಪು ಬಣ್ಣಕ್ಕೆ ಮರಳುತ್ತದೆ.
OKLCH ಏಕೆ ಬದಲಾಗಿದೆ ನಾನು ಬಣ್ಣದ ಬಗ್ಗೆ ಹೇಗೆ ಯೋಚಿಸುತ್ತೇನೆ ವಿನ್ಯಾಸ ಪರಿಕರಗಳು - ಸ್ಕೆಚ್ ಸೇರಿದಂತೆ - ಹಿಡಿಯದಿದ್ದರೂ ಸಹ OKLCH ಬಣ್ಣದ ಸ್ಥಳಕ್ಕಾಗಿ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಈಗ ವ್ಯಾಪಕವಾಗಿದೆ. ಅದೃಷ್ಟವಶಾತ್, OKLCH ಅನ್ನು ಬಳಸುವುದರಿಂದ ಅದು ನಿಮ್ಮನ್ನು ತಡೆಯುವುದಿಲ್ಲ. ಬ್ರೌಸರ್ಗಳು ನಿಮಗೆ ಸಂತೋಷದಿಂದ Hex, HSL, LAB ಮತ್ತು RGB ಮೌಲ್ಯಗಳನ್ನು OKLCH ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತವೆ. ಹೆಕ್ಸ್ ಸೇರಿದಂತೆ ಯಾವುದೇ ಜಾಗದಲ್ಲಿ ಅಡಿಪಾಯದ ಬಣ್ಣದೊಂದಿಗೆ ನೀವು CSS ಕಸ್ಟಮ್ ಆಸ್ತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು: /* ಅಡಿಪಾಯದ ಬಣ್ಣ */ --ಫೌಂಡೇಶನ್: #5accd6;
ಅದರಿಂದ ಪಡೆದ ಯಾವುದೇ ಬಣ್ಣಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ OKLCH ಆಗಿ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ: --Foundation-light: oklch(var(--Foundation) ನಿಂದ [...]; } --Foundation-mid: oklch(var(--Foundation) ನಿಂದ [...]; } --Foundation-dark: oklch(var(--Foundation) ನಿಂದ [...]; }
ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯಾಗಿ ಸಂಬಂಧಿತ ಬಣ್ಣ ಸಾಪೇಕ್ಷ ಬಣ್ಣವನ್ನು ಹೇಳುವಂತೆ ಯೋಚಿಸಿ: "ಈ ಬಣ್ಣವನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ, ಅದನ್ನು ತಿರುಚಿ, ನಂತರ ನನಗೆ ಫಲಿತಾಂಶವನ್ನು ನೀಡಿ." ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಲು ಎರಡು ಮಾರ್ಗಗಳಿವೆ: ಸಂಪೂರ್ಣ ಬದಲಾವಣೆಗಳು ಮತ್ತು ಪ್ರಮಾಣಾನುಗುಣ ಬದಲಾವಣೆಗಳು. ಅವು ಕೋಡ್ನಲ್ಲಿ ಹೋಲುತ್ತವೆ, ಆದರೆ ನೀವು ಅಡಿಪಾಯದ ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸಲು ಪ್ರಾರಂಭಿಸಿದ ನಂತರ ವಿಭಿನ್ನವಾಗಿ ವರ್ತಿಸುತ್ತವೆ. ಆ ವ್ಯತ್ಯಾಸವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸಾಪೇಕ್ಷ ಬಣ್ಣವನ್ನು ಬಳಸಿಕೊಂಡು ಸಿಸ್ಟಮ್ ಆಗಿ ಪರಿವರ್ತಿಸಬಹುದು. /* ಅಡಿಪಾಯದ ಬಣ್ಣ */ --ಫೌಂಡೇಶನ್: #5accd6;
ಉದಾಹರಣೆಗೆ, ನನ್ನ ಅಡಿಪಾಯದ ಬಣ್ಣದ ಲಘುತೆಯ ಮೌಲ್ಯವು 0.7837 ಆಗಿದ್ದರೆ, ಗಾಢವಾದ ಆವೃತ್ತಿಯು 0.5837 ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ. ವ್ಯತ್ಯಾಸವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು, ನಾನು ಹೆಚ್ಚಿನ ಮೌಲ್ಯದಿಂದ ಕಡಿಮೆ ಮೌಲ್ಯವನ್ನು ಕಳೆಯುತ್ತೇನೆ ಮತ್ತು ಕ್ಯಾಲ್ಕ್ () ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಫಲಿತಾಂಶವನ್ನು ಅನ್ವಯಿಸುತ್ತೇನೆ: --ಅಡಿಪಾಯ-ಕತ್ತಲೆ: oklch(var(--ಫೌಂಡೇಶನ್) ನಿಂದ calc (l - 0.20) c h);
ಹಗುರವಾದ ಬಣ್ಣವನ್ನು ಸಾಧಿಸಲು, ಬದಲಾಗಿ ನಾನು ವ್ಯತ್ಯಾಸವನ್ನು ಸೇರಿಸುತ್ತೇನೆ: --ಅಡಿಪಾಯ-ಬೆಳಕು: oklch(var(--ಫೌಂಡೇಶನ್) ನಿಂದ calc (l + 0.10) c h);
ಕ್ರೋಮಾಹೊಂದಾಣಿಕೆಗಳು ಅದೇ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಅನುಸರಿಸುತ್ತವೆ. ನನ್ನ ಅಡಿಪಾಯದ ಬಣ್ಣದ ತೀವ್ರತೆಯನ್ನು 0.1035 ರಿಂದ 0.0035 ಕ್ಕೆ ಕಡಿಮೆ ಮಾಡಲು, ನಾನು ಒಂದು ಮೌಲ್ಯವನ್ನು ಇನ್ನೊಂದರಿಂದ ಕಳೆಯುತ್ತೇನೆ: oklch(var(--ಫೌಂಡೇಶನ್) ನಿಂದ l ಕ್ಯಾಲ್ಕ್ (ಸಿ - 0.10) ಗಂ);
ವರ್ಣಗಳ ಪ್ಯಾಲೆಟ್ ರಚಿಸಲು, ನನ್ನ ಅಡಿಪಾಯದ ಬಣ್ಣ (200) ಮತ್ತು ನನ್ನ ಹೊಸ ವರ್ಣ (260) ನ ವರ್ಣ ಮೌಲ್ಯದ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ನಾನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತೇನೆ: oklch(var(--ಫೌಂಡೇಶನ್) ನಿಂದ l ಸಿ ಕ್ಯಾಲ್ಕ್ (h + 60));
ಆ ಲೆಕ್ಕಾಚಾರಗಳು ಸಂಪೂರ್ಣ. ನಾನು ನಿಗದಿತ ಮೊತ್ತವನ್ನು ಕಳೆಯುವಾಗ, "ಯಾವಾಗಲೂ ಇದನ್ನು ಕಳೆಯಿರಿ" ಎಂದು ನಾನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಳುತ್ತೇನೆ. ಸ್ಥಿರ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸುವಾಗ ಅದೇ ಅನ್ವಯಿಸುತ್ತದೆ: ಕ್ಯಾಲ್ಕ್ (ಸಿ - 0.10) ಕ್ಯಾಲ್ಕ್ (ಸಿ + 0.10)
ಈ ವಿಧಾನದ ಮಿತಿಗಳನ್ನು ನಾನು ಕಠಿಣ ರೀತಿಯಲ್ಲಿ ಕಲಿತಿದ್ದೇನೆ. ನಾನು ಸ್ಥಿರ ಕ್ರೋಮಾ ಮೌಲ್ಯಗಳನ್ನು ಕಳೆಯುವುದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದ್ದಾಗ, ನಾನು ಅಡಿಪಾಯವನ್ನು ಬದಲಾಯಿಸಿದ ತಕ್ಷಣ ಬಣ್ಣಗಳು ಬೂದು ಬಣ್ಣಕ್ಕೆ ಕುಸಿದವು. ಒಂದು ಬಣ್ಣಕ್ಕೆ ಕೆಲಸ ಮಾಡುವ ಪ್ಯಾಲೆಟ್ ಇನ್ನೊಂದಕ್ಕೆ ಕುಸಿಯಿತು. ಗುಣಾಕಾರವು ವಿಭಿನ್ನವಾಗಿ ವರ್ತಿಸುತ್ತದೆ. ನಾನು ಕ್ರೋಮಾವನ್ನು ಗುಣಿಸಿದಾಗ, ನಾನು ಬ್ರೌಸರ್ಗೆ ಹೇಳುತ್ತಿದ್ದೇನೆ: "ಈ ಬಣ್ಣದ ತೀವ್ರತೆಯನ್ನು ಒಂದು ಪ್ರಮಾಣದಲ್ಲಿ ಕಡಿಮೆ ಮಾಡಿ." ಅಡಿಪಾಯ ಬದಲಾದಾಗಲೂ ಬಣ್ಣಗಳ ನಡುವಿನ ಸಂಬಂಧವು ಹಾಗೇ ಇರುತ್ತದೆ: ಕ್ಯಾಲ್ಕ್ (ಸಿ * 0.10)
ಮೈ ಮೂವ್ ಇಟ್, ಸ್ಕೇಲ್ ಇಟ್, ರೋಟೇಟ್ ಇಟ್ ರೂಲ್ಸ್
ಲಘುತೆಯನ್ನು ಸರಿಸಿ (ಸೇರಿಸಿ ಅಥವಾ ಕಳೆಯಿರಿ), ಸ್ಕೇಲ್ ಕ್ರೋಮಾ (ಗುಣಿಸಿ), ವರ್ಣವನ್ನು ತಿರುಗಿಸಿ (ಡಿಗ್ರಿಗಳನ್ನು ಸೇರಿಸಿ ಅಥವಾ ಕಳೆಯಿರಿ).
ನಾನು ಕ್ರೋಮಾವನ್ನು ಅಳೆಯುತ್ತೇನೆ ಏಕೆಂದರೆ ತೀವ್ರತೆಯ ಬದಲಾವಣೆಗಳು ಮೂಲ ಬಣ್ಣಕ್ಕೆ ಅನುಗುಣವಾಗಿರಲು ನಾನು ಬಯಸುತ್ತೇನೆ. ವರ್ಣ ಸಂಬಂಧಗಳು ತಿರುಗುವವು, ಆದ್ದರಿಂದ ವರ್ಣವನ್ನು ಗುಣಿಸುವುದರಲ್ಲಿ ಅರ್ಥವಿಲ್ಲ. ಲಘುತೆಯು ಗ್ರಹಿಕೆ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿದೆ - ಅದನ್ನು ಗುಣಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಬೆಸ ಫಲಿತಾಂಶಗಳನ್ನು ನೀಡುತ್ತದೆ.
ಒಂದು ಬಣ್ಣದಿಂದ ಸಂಪೂರ್ಣ ಥೀಮ್ಗೆ ಸಾಪೇಕ್ಷ ಬಣ್ಣವು ಅಡಿಪಾಯದ ಬಣ್ಣವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ನನಗೆ ಅಗತ್ಯವಿರುವ ಪ್ರತಿಯೊಂದು ಬಣ್ಣವನ್ನು ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ - ತುಂಬುವಿಕೆಗಳು, ಸ್ಟ್ರೋಕ್ಗಳು, ಗ್ರೇಡಿಯಂಟ್ ಸ್ಟಾಪ್ಗಳು, ನೆರಳುಗಳು - ಅದರಿಂದ. ಆ ಸಮಯದಲ್ಲಿ, ಬಣ್ಣವು ಪ್ಯಾಲೆಟ್ ಆಗುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ ಮತ್ತು ವ್ಯವಸ್ಥೆಯಾಗಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. SVG ವಿವರಣೆಗಳು ಫಿಲ್ಗಳು, ಸ್ಟ್ರೋಕ್ಗಳು ಮತ್ತು ಗ್ರೇಡಿಯಂಟ್ಗಳಾದ್ಯಂತ ಅದೇ ಕೆಲವು ಬಣ್ಣಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಲು ಒಲವು ತೋರುತ್ತವೆ. ಸಂಬಂಧಿತ ಬಣ್ಣವು ಆ ಸಂಬಂಧಗಳನ್ನು ಒಮ್ಮೆ ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ಅವುಗಳನ್ನು ಎಲ್ಲೆಡೆ ಮರುಬಳಕೆ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ - ಹೊಸ ದೃಶ್ಯಗಳನ್ನು ರಚಿಸಲು ಆನಿಮೇಟರ್ಗಳು ಹಿನ್ನೆಲೆಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಿದಂತೆ.
ಅಡಿಪಾಯದ ಬಣ್ಣವನ್ನು ಒಮ್ಮೆ ಬದಲಾಯಿಸಿ ಮತ್ತು ಕೈಯಿಂದ ಏನನ್ನೂ ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡದೆಯೇ ಪ್ರತಿ ಪಡೆದ ಬಣ್ಣವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸುತ್ತದೆ. ಅನಿಮೇಟೆಡ್ ಗ್ರಾಫಿಕ್ಸ್ನ ಹೊರಗೆ, ಗುಂಡಿಗಳು ಮತ್ತು ಲಿಂಕ್ಗಳಂತಹ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳ ಸ್ಥಿತಿಗಳಿಗೆ ಬಣ್ಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಾನು ಇದೇ ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು. ನನ್ನ "ಲುಲಬೈ-ಬೈ ಬೇರ್" ಟೂನ್ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ನಾನು ಬಳಸಿದ ಅಡಿಪಾಯ ಬಣ್ಣವು ನೀಲಿಬಣ್ಣದ ನೀಲಿ ಬಣ್ಣದ್ದಾಗಿದೆ. ಹಿನ್ನೆಲೆಯು ನನ್ನ ಅಡಿಪಾಯ ಮತ್ತು ಗಾಢವಾದ ಆವೃತ್ತಿಯ ನಡುವಿನ ರೇಡಿಯಲ್ ಗ್ರೇಡಿಯಂಟ್ ಆಗಿದೆ.
ಸಂಪೂರ್ಣವಾಗಿ ವಿಭಿನ್ನ ಮನಸ್ಥಿತಿಗಳೊಂದಿಗೆ ಪರ್ಯಾಯ ಆವೃತ್ತಿಗಳನ್ನು ರಚಿಸಲು, ನಾನು ಅಡಿಪಾಯದ ಬಣ್ಣವನ್ನು ಮಾತ್ರ ಬದಲಾಯಿಸಬೇಕಾಗಿದೆ: --ಫೌಂಡೇಶನ್: #5accd6; --grad-end: var(--Foundation); --ಗ್ರಾಡ್-ಸ್ಟಾರ್ಟ್: oklch(var (--ಫೌಂಡೇಶನ್) ನಿಂದ calc (l - 0.2357) calc (c * 0.833) h);
ಬಣ್ಣದ ಮೌಲ್ಯಗಳನ್ನು ನಕಲು ಮಾಡದೆಯೇ ಆ ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನನ್ನ SVG ಗ್ರೇಡಿಯಂಟ್ಗೆ ಬಂಧಿಸಲು, ನಾನು ಹಾರ್ಡ್-ಕೋಡೆಡ್ ಸ್ಟಾಪ್-ಕಲರ್ ಮೌಲ್ಯಗಳನ್ನು ಇನ್ಲೈನ್ ಶೈಲಿಗಳೊಂದಿಗೆ ಬದಲಾಯಿಸಿದೆ:
ಮುಂದೆ, ನನ್ನ ಟೂನ್ ಪಠ್ಯವು ಯಾವಾಗಲೂ ನಾನು ಆಯ್ಕೆಮಾಡುವ ಯಾವುದೇ ಅಡಿಪಾಯದ ಬಣ್ಣದೊಂದಿಗೆ ವ್ಯತಿರಿಕ್ತವಾಗಿದೆ ಎಂದು ನಾನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು. 180 ಡಿಗ್ರಿ ವರ್ಣದ ತಿರುಗುವಿಕೆಯು ಪೂರಕವಾದ ಬಣ್ಣವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ, ಅದು ಖಂಡಿತವಾಗಿಯೂ ಪಾಪ್ ಆಗುತ್ತದೆ - ಆದರೆ ಅಹಿತಕರವಾಗಿ ಕಂಪಿಸಬಹುದು: .ಪಠ್ಯ-ಬೆಳಕು { ಭರ್ತಿ: oklch(var(--ಫೌಂಡೇಶನ್) ನಿಂದ l ಸಿ ಕ್ಯಾಲ್ಕ್ (h + 180)); }
90° ಶಿಫ್ಟ್ ಸಂಪೂರ್ಣವಾಗಿ ಪೂರಕವಾಗಿರದೆ ಎದ್ದುಕಾಣುವ ದ್ವಿತೀಯಕ ಬಣ್ಣವನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ: .ಪಠ್ಯ-ಬೆಳಕು { ಭರ್ತಿ: oklch(var(--ಫೌಂಡೇಶನ್) ನಿಂದ l ಸಿ ಕ್ಯಾಲ್ಕ್ (ಎಚ್ - 90)); }
ಕ್ವಿಕ್ ಡ್ರಾ ಮ್ಯಾಕ್ಗ್ರಾ ಅವರ 1959 ರ ಟೂನ್ ಶೀರ್ಷಿಕೆ "ಎಲ್ ಕಬಾಂಗ್" ನ ನನ್ನ ಮನರಂಜನೆಯು ಅದೇ ತಂತ್ರಗಳನ್ನು ಬಳಸುತ್ತದೆ ಆದರೆ ಹೆಚ್ಚು ವೈವಿಧ್ಯಮಯ ಪ್ಯಾಲೆಟ್ನೊಂದಿಗೆ. ಉದಾಹರಣೆಗೆ, ಅಡಿಪಾಯದ ಬಣ್ಣ ಮತ್ತು ಗಾಢ ಛಾಯೆಯ ನಡುವೆ ಮತ್ತೊಂದು ರೇಡಿಯಲ್ ಗ್ರೇಡಿಯಂಟ್ ಇದೆ.
ಹಿನ್ನಲೆಯಲ್ಲಿರುವ ಕಟ್ಟಡ ಮತ್ತು ಮರವು ಒಂದೇ ಅಡಿಪಾಯದ ಬಣ್ಣದ ವಿಭಿನ್ನ ಛಾಯೆಗಳಾಗಿವೆ. ಆ ಮಾರ್ಗಗಳಿಗಾಗಿ, ನನಗೆ ಎರಡು ಹೆಚ್ಚುವರಿ ಬಣ್ಣಗಳು ಬೇಕಾಗಿವೆ: .bg-mid { ಭರ್ತಿ: oklch(var(--ಫೌಂಡೇಶನ್) ನಿಂದ calc (l - 0.04) calc (c * 0.91) h); }
.bg-ಡಾರ್ಕ್ { ಭರ್ತಿ: oklch(var(--ಫೌಂಡೇಶನ್) ನಿಂದ calc (l - 0.12) calc (c * 0.64) h); }
ಅಡಿಪಾಯಗಳು ಚಲಿಸಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಇಲ್ಲಿಯವರೆಗೆ, ನಾನು ತೋರಿಸಿದ ಎಲ್ಲವೂ ಸ್ಥಿರವಾಗಿದೆ. ಅಡಿಪಾಯದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಲು ಯಾರಾದರೂ ಬಣ್ಣ ಪಿಕ್ಕರ್ ಅನ್ನು ಬಳಸಿದಾಗಲೂ, ಆ ಬದಲಾವಣೆಯು ತಕ್ಷಣವೇ ಸಂಭವಿಸುತ್ತದೆ. ಆದರೆ ಅನಿಮೇಟೆಡ್ ಗ್ರಾಫಿಕ್ಸ್ ವಿರಳವಾಗಿ ನಿಲ್ಲುತ್ತದೆ - ಸುಳಿವು ಹೆಸರಿನಲ್ಲಿದೆ. ಆದ್ದರಿಂದ, ಬಣ್ಣವು ವ್ಯವಸ್ಥೆಯ ಭಾಗವಾಗಿದ್ದರೆ, ಅದು ಅನಿಮೇಟ್ ಮಾಡಲು ಯಾವುದೇ ಕಾರಣವಿಲ್ಲ. ಅಡಿಪಾಯದ ಬಣ್ಣವನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು, ನಾನು ಅದನ್ನು ಮೊದಲು ಅದರ OKLCH ಚಾನಲ್ಗಳಾಗಿ ವಿಭಜಿಸಬೇಕಾಗಿದೆ- ಲಘುತೆ, ವರ್ಣ ಮತ್ತು ವರ್ಣ. ಆದರೆ ಒಂದು ಪ್ರಮುಖ ಹೆಚ್ಚುವರಿ ಹಂತವಿದೆ: ನಾನು ಆ ಮೌಲ್ಯಗಳನ್ನು ಟೈಪ್ ಮಾಡಿದ ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳಾಗಿ ನೋಂದಾಯಿಸಬೇಕಾಗಿದೆ. ಆದರೆ ಇದರ ಅರ್ಥವೇನು? ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, CSS ಕಸ್ಟಮ್ ಆಸ್ತಿ ಮೌಲ್ಯವು ಬಣ್ಣ, ಉದ್ದ, ಸಂಖ್ಯೆ ಅಥವಾ ಬೇರೆ ಯಾವುದನ್ನಾದರೂ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರತಿನಿಧಿಸುತ್ತದೆಯೇ ಎಂದು ಬ್ರೌಸರ್ಗೆ ತಿಳಿದಿರುವುದಿಲ್ಲ. ಅನಿಮೇಷನ್ ಸಮಯದಲ್ಲಿ ಅವುಗಳನ್ನು ಸರಾಗವಾಗಿ ಇಂಟರ್ಪೋಲೇಟ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ ಮತ್ತು ಒಂದು ಮೌಲ್ಯದಿಂದ ಇನ್ನೊಂದು ಮೌಲ್ಯಕ್ಕೆ ನೆಗೆಯುವುದು ಎಂದರ್ಥ. ಕಸ್ಟಮ್ ಆಸ್ತಿಯನ್ನು ನೋಂದಾಯಿಸುವುದರಿಂದ ಅದು ಪ್ರತಿನಿಧಿಸುವ ಮೌಲ್ಯದ ಪ್ರಕಾರವನ್ನು ಮತ್ತು ಕಾಲಾನಂತರದಲ್ಲಿ ಅದು ಹೇಗೆ ವರ್ತಿಸಬೇಕು ಎಂಬುದನ್ನು ಬ್ರೌಸರ್ಗೆ ತಿಳಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಬ್ರೌಸರ್ ನನ್ನ ಬಣ್ಣದ ಚಾನಲ್ಗಳನ್ನು ಸಂಖ್ಯೆಗಳಾಗಿ ಪರಿಗಣಿಸಬೇಕೆಂದು ನಾನು ಬಯಸುತ್ತೇನೆ ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ಸರಾಗವಾಗಿ ಅನಿಮೇಟೆಡ್ ಮಾಡಬಹುದು. @property --f-l { ಸಿಂಟ್ಯಾಕ್ಸ್: "<ಸಂಖ್ಯೆ>"; ಉತ್ತರಾಧಿಕಾರ: ನಿಜ; ಆರಂಭಿಕ ಮೌಲ್ಯ: 0.40; }
@property --f-c { ಸಿಂಟ್ಯಾಕ್ಸ್: "<ಸಂಖ್ಯೆ>"; ಉತ್ತರಾಧಿಕಾರ: ನಿಜ; ಆರಂಭಿಕ ಮೌಲ್ಯ: 0.11; }
@property --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; } }
.ಟೂನ್-ಶೀರ್ಷಿಕೆ { ಅನಿಮೇಷನ್: 10 ಸೆಗಳನ್ನು ಸುಲಭವಾಗಿ ಉಸಿರಾಡಿ ಅನಂತ; }
ಏಕೆಂದರೆ ಫಿಲ್ಗಳು, ಗ್ರೇಡಿಯಂಟ್ಗಳು ಮತ್ತು ಸ್ಟ್ರೋಕ್ಗಳಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಬಣ್ಣವು --ಫೌಂಡೇಶನ್ನಿಂದ ಪಡೆಯಲ್ಪಟ್ಟಿದೆ, ಅವೆಲ್ಲವೂ ಒಟ್ಟಿಗೆ ಅನಿಮೇಟ್ ಆಗುತ್ತವೆ ಮತ್ತು ಯಾವುದನ್ನೂ ಹಸ್ತಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಬೇಕಾಗಿಲ್ಲ. ಒಂದು ಅನಿಮೇಟೆಡ್ ಬಣ್ಣ, ಅನೇಕ ಪರಿಣಾಮಗಳು ಈ ಪ್ರಕ್ರಿಯೆಯ ಪ್ರಾರಂಭದಲ್ಲಿ, CSS ಸಂಬಂಧಿತ ಬಣ್ಣದ ಮೌಲ್ಯಗಳು ಹೆಚ್ಚಿನ ಸಾಧ್ಯತೆಗಳನ್ನು ನೀಡಬಹುದೇ ಎಂದು ನಾನು ಆಶ್ಚರ್ಯ ಪಡುತ್ತೇನೆ ಮತ್ತು ಅವುಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸರಳವಾಗಿದೆ. ನಾನು ಇತ್ತೀಚೆಗೆ ನನ್ನ ವೆಬ್ಸೈಟ್ನ ಸಂಪರ್ಕ ಪುಟಕ್ಕೆ ಹೊಸ ಚಿನ್ನದ ಗಣಿ ಹಿನ್ನೆಲೆಯನ್ನು ಸೇರಿಸಿದ್ದೇನೆ ಮತ್ತು ಮೊದಲ ಪುನರಾವರ್ತನೆಯು ಹೊಳೆಯುವ ಮತ್ತು ಸ್ವಿಂಗ್ ಮಾಡುವ ತೈಲ ದೀಪಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
CSS ಸಂಬಂಧಿತ ಬಣ್ಣಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು ಹೇಗೆ ದೀಪಗಳಿಂದ ಬಣ್ಣಗಳಿಂದ ಬಣ್ಣ ಹಚ್ಚುವ ಮೂಲಕ ಗಣಿ ಒಳಾಂಗಣವನ್ನು ಹೆಚ್ಚು ವಾಸ್ತವಿಕವಾಗಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಾನು ಅನ್ವೇಷಿಸಲು ಬಯಸುತ್ತೇನೆ. ಅವರು ತಮ್ಮ ಸುತ್ತಲಿನ ಪ್ರಪಂಚದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬೇಕೆಂದು ನಾನು ಬಯಸುತ್ತೇನೆ, ನಿಜವಾದ ಬೆಳಕು ಮಾಡುವ ರೀತಿಯಲ್ಲಿ. ಆದ್ದರಿಂದ, ಬಹು ಬಣ್ಣಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವ ಬದಲು, ನಾನು ಕೇವಲ ಒಂದು ಬಣ್ಣವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವ ಸಣ್ಣ ಬೆಳಕಿನ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಿದೆ.
ಹಿನ್ನೆಲೆ ಮತ್ತು ನನ್ನ ದೀಪಗಳ ನಡುವೆ ಮೇಲ್ಪದರದ ಪದರವನ್ನು ಸ್ಲಾಟ್ ಮಾಡುವುದು ನನ್ನ ಮೊದಲ ಕಾರ್ಯವಾಗಿತ್ತು: <ಮಾರ್ಗ ಐಡಿ="ಓವರ್ಲೇ" ತುಂಬು="var(--ಓವರ್ಲೇ-ಟಿಂಟ್)" [...] ಶೈಲಿ="ಮಿಕ್ಸ್-ಬ್ಲೆಂಡ್-ಮೋಡ್: ಬಣ್ಣ" />
ನಾನು ಮಿಕ್ಸ್-ಬ್ಲೆಂಡ್-ಮೋಡ್ ಅನ್ನು ಬಳಸಿದ್ದೇನೆ: ಬಣ್ಣ ಏಕೆಂದರೆ ಅದು ಆಧಾರವಾಗಿರುವ ಪ್ರಕಾಶವನ್ನು ಸಂರಕ್ಷಿಸುವಾಗ ಅದರ ಕೆಳಗೆ ಏನಿದೆ ಎಂಬುದನ್ನು ಬಣ್ಣಿಸುತ್ತದೆ. ಅನಿಮೇಶನ್ಗಳನ್ನು ಆನ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಮೇಲ್ಪದರವು ಗೋಚರಿಸಬೇಕೆಂದು ನಾನು ಬಯಸುತ್ತೇನೆ, ನಾನು ಓವರ್ಲೇ ಆಯ್ಕೆಯನ್ನು ಮಾಡಿದ್ದೇನೆ: .svg-mine #ಓವರ್ಲೇ { ಪ್ರದರ್ಶನ: ಯಾವುದೂ ಇಲ್ಲ; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಅಪಾರದರ್ಶಕತೆ: 0.5; } }
ಮೇಲ್ಪದರವು ಸ್ಥಳದಲ್ಲಿತ್ತು, ಆದರೆ ಇನ್ನೂ ದೀಪಗಳಿಗೆ ಸಂಪರ್ಕ ಹೊಂದಿಲ್ಲ. ನನಗೆ ಬೆಳಕಿನ ಮೂಲ ಬೇಕಿತ್ತು. ನನ್ನ ದೀಪಗಳು ಸರಳವಾಗಿದೆ, ಮತ್ತು ಪ್ರತಿಯೊಂದೂ ನಾನು ಫಿಲ್ಟರ್ನೊಂದಿಗೆ ಮಸುಕುಗೊಳಿಸಿದ ವೃತ್ತದ ಅಂಶವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಫಿಲ್ಟರ್ ಇಡೀ ವೃತ್ತದ ಮೇಲೆ ತುಂಬಾ ಮೃದುವಾದ ಮಸುಕು ಉಂಟುಮಾಡುತ್ತದೆ.
<ಫಿಲ್ಟರ್ ಐಡಿ="ಲ್ಯಾಂಪ್-ಗ್ಲೋ-1" x="-120%" y="-120%" ಅಗಲ="340%" ಎತ್ತರ="340%">
ಒವರ್ಲೇ ಮತ್ತು ಲ್ಯಾಂಪ್ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಅನಿಮೇಟ್ ಮಾಡುವ ಬದಲು, ನಾನು ಒಂದೇ "ಜ್ವಾಲೆಯ" ಬಣ್ಣದ ಟೋಕನ್ ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡುತ್ತೇನೆ ಮತ್ತು ಅದರಿಂದ ಎಲ್ಲವನ್ನೂ ಪಡೆಯುತ್ತೇನೆ. ಮೊದಲಿಗೆ, ನಾನು OKLCH ಚಾನಲ್ಗಳಿಗಾಗಿ ಮೂರು ಟೈಪ್ ಮಾಡಿದ ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನೋಂದಾಯಿಸುತ್ತೇನೆ: @property --fl-l { ಸಿಂಟ್ಯಾಕ್ಸ್: "<ಸಂಖ್ಯೆ>"; ಉತ್ತರಾಧಿಕಾರ: ನಿಜ; ಆರಂಭಿಕ ಮೌಲ್ಯ: 0.86; } @property --fl-c { ಸಿಂಟ್ಯಾಕ್ಸ್: "<ಸಂಖ್ಯೆ>"; ಉತ್ತರಾಧಿಕಾರ: ನಿಜ; ಆರಂಭಿಕ ಮೌಲ್ಯ: 0.12; } @property --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 (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { ಅನಿಮೇಷನ್: ಜ್ವಾಲೆ 3.6s ಅನಂತ ರೇಖೀಯ; ಪ್ರತ್ಯೇಕತೆ: ಪ್ರತ್ಯೇಕಿಸಿ;
/* ಅನಿಮೇಟೆಡ್ ಚಾನಲ್ಗಳಿಂದ ಜ್ವಾಲೆಯ ಬಣ್ಣವನ್ನು ನಿರ್ಮಿಸಿ */ --ಜ್ವಾಲೆ: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* ಜ್ವಾಲೆಯಿಂದ ಪಡೆದ ದೀಪದ ಬಣ್ಣ */ --ಲ್ಯಾಂಪ್-ಕೋರ್: oklch (var (--ಜ್ವಾಲೆ) calc (l + 0.05) calc (c * 0.70) h);
/* ಒವರ್ಲೇ ಟಿಂಟ್ ಅನ್ನು ಅದೇ ಜ್ವಾಲೆಯಿಂದ ಪಡೆಯಲಾಗಿದೆ */ --ಓವರ್ಲೇ-ಟಿಂಟ್: oklch (var (--ಜ್ವಾಲೆ) ನಿಂದ ಕ್ಯಾಲ್ಕ್ (ಎಲ್ + 0.06) ಕ್ಯಾಲ್ಕ್ (ಸಿ * 0.65) ಕ್ಯಾಲ್ಕ್ (ಎಚ್ - 10)); } }
ಅಂತಿಮವಾಗಿ, ನಾನು ಆ ಪಡೆದ ಬಣ್ಣಗಳನ್ನು ಹೊಳೆಯುವ ದೀಪಗಳಿಗೆ ಮತ್ತು ಅವು ಪರಿಣಾಮ ಬೀರುವ ಮೇಲ್ಪದರಕ್ಕೆ ಅನ್ವಯಿಸಿದೆ: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > ವೃತ್ತ, .svg-mine[data-animations=on] #mine-lamp-2 > ವೃತ್ತ { ಭರ್ತಿ: var (--ಲ್ಯಾಂಪ್-ಕೋರ್); }
.svg-mine[data-animations=on] #overlay { ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಭರ್ತಿ: var (--ಓವರ್ಲೇ-ಟಿಂಟ್); ಅಪಾರದರ್ಶಕತೆ: 0.5; } }
ಜ್ವಾಲೆಯು ಕಿತ್ತಳೆಯ ಕಡೆಗೆ ಬದಲಾದಾಗ, ದೀಪಗಳು ಬೆಚ್ಚಗಾಗುತ್ತವೆ ಮತ್ತು ದೃಶ್ಯವು ಅವರೊಂದಿಗೆ ಬೆಚ್ಚಗಾಗುತ್ತದೆ. ಜ್ವಾಲೆಯು ತಣ್ಣಗಾದಾಗ, ಎಲ್ಲವೂ ಒಟ್ಟಿಗೆ ನೆಲೆಗೊಳ್ಳುತ್ತದೆ. ಉತ್ತಮ ಭಾಗವೆಂದರೆ ಏನನ್ನೂ ಕೈಯಾರೆ ಬರೆಯಲಾಗಿಲ್ಲ. ನಾನು ಅಡಿಪಾಯದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಿದರೆ ಅಥವಾ ಜ್ವಾಲೆಯ ಅನಿಮೇಷನ್ ಶ್ರೇಣಿಗಳನ್ನು ತಿರುಚಿದರೆ, ಸಂಪೂರ್ಣ ಬೆಳಕಿನ ವ್ಯವಸ್ಥೆಯು ಏಕಕಾಲದಲ್ಲಿ ನವೀಕರಿಸುತ್ತದೆ. ನನ್ನ ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ನೀವು ಅಂತಿಮ ಫಲಿತಾಂಶವನ್ನು ನೋಡಬಹುದು. ಮರುಬಳಕೆ, ಮರುಬಳಕೆ, ಮರುಪರಿಶೀಲಿಸಲಾಗಿದೆ ಆ ಹಾನ್ನಾ-ಬಾರ್ಬೆರಾ ಆನಿಮೇಟರ್ಗಳು ಅವಶ್ಯಕತೆಯಿಂದ ಅಂಶಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಲು ಒತ್ತಾಯಿಸಲ್ಪಟ್ಟರು, ಆದರೆ ನಾನು ಬಣ್ಣಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡುತ್ತೇನೆ ಏಕೆಂದರೆ ಇದು ನನ್ನ ಕೆಲಸವನ್ನು ಹೆಚ್ಚು ಸ್ಥಿರವಾಗಿ ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ. CSS ಸಾಪೇಕ್ಷ ಬಣ್ಣದ ಮೌಲ್ಯಗಳು ನನಗೆ ಇದನ್ನು ಅನುಮತಿಸುತ್ತವೆ:
ಒಂದೇ ಅಡಿಪಾಯದ ಬಣ್ಣವನ್ನು ವಿವರಿಸಿ, ಇತರ ಬಣ್ಣಗಳು ಹೇಗೆ ಸಂಬಂಧಿಸಿವೆ ಎಂಬುದನ್ನು ವಿವರಿಸಿ, ಆ ಸಂಬಂಧಗಳನ್ನು ಎಲ್ಲೆಡೆ ಮರುಬಳಕೆ ಮಾಡಿ, ಮತ್ತು ಒಂದು ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ಸಿಸ್ಟಮ್ ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡಿ.
ಸಾಪೇಕ್ಷ ಬಣ್ಣವು ಥೀಮಿಂಗ್ ಅನ್ನು ಸುಲಭಗೊಳಿಸುವುದಿಲ್ಲ. ಚಲನೆಯಂತಹ ಬಣ್ಣವು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿದೆ - ಮತ್ತು ಒಂದು ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುವುದರಿಂದ ಅದರ ಕೆಳಗಿರುವ ಕೆಲಸವನ್ನು ಪುನಃ ಬರೆಯದೆ ಸಂಪೂರ್ಣ ದೃಶ್ಯವನ್ನು ಪರಿವರ್ತಿಸಬಹುದು ಎಂದು ಯೋಚಿಸುವ ವಿಧಾನವನ್ನು ಇದು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ.
