ਮੈਂ ਹਾਲ ਹੀ ਵਿੱਚ ਆਪਣੀ ਵੈਬਸਾਈਟ 'ਤੇ ਐਨੀਮੇਟਡ ਗ੍ਰਾਫਿਕਸ ਨੂੰ ਇੱਕ ਨਵੀਂ ਥੀਮ ਅਤੇ ਪਾਇਨੀਅਰਿੰਗ ਪਾਤਰਾਂ ਦੇ ਇੱਕ ਸਮੂਹ ਦੇ ਨਾਲ ਤਾਜ਼ਾ ਕੀਤਾ ਹੈ, ਇਸ ਲੜੀ ਵਿੱਚ ਮੇਰੇ ਦੁਆਰਾ ਸਾਂਝੀਆਂ ਕੀਤੀਆਂ ਗਈਆਂ ਬਹੁਤ ਸਾਰੀਆਂ ਤਕਨੀਕਾਂ ਦਾ ਅਭਿਆਸ ਕਰਦੇ ਹੋਏ। ਮੇਰੇ ਕੁਝ ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਦਿੱਖ ਬਦਲ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਕੋਈ ਉਨ੍ਹਾਂ ਨਾਲ ਜਾਂ ਦਿਨ ਦੇ ਵੱਖ-ਵੱਖ ਸਮਿਆਂ 'ਤੇ ਗੱਲਬਾਤ ਕਰਦਾ ਹੈ।
ਮੇਰੇ ਬਲੌਗ ਪੰਨਿਆਂ ਦੇ ਉੱਪਰਲੇ ਗ੍ਰਾਫਿਕ ਦੇ ਰੰਗ ਹਰ ਰੋਜ਼ ਸਵੇਰ ਤੋਂ ਰਾਤ ਤੱਕ ਬਦਲਦੇ ਰਹਿੰਦੇ ਹਨ। ਫਿਰ, ਇੱਥੇ ਬਰਫ ਮੋਡ ਹੈ, ਜੋ ਇੱਕ ਓਵਰਲੇਅ ਪਰਤ ਅਤੇ ਇੱਕ ਮਿਸ਼ਰਣ ਮੋਡ ਦੇ ਸ਼ਿਸ਼ਟਤਾ ਨਾਲ, ਠੰਡੇ ਰੰਗ ਅਤੇ ਇੱਕ ਸਰਦੀਆਂ ਦੀ ਥੀਮ ਜੋੜਦਾ ਹੈ।
ਇਸ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹੋਏ, ਮੈਂ ਇਹ ਸੋਚਣਾ ਸ਼ੁਰੂ ਕਰ ਦਿੱਤਾ ਕਿ ਕੀ CSS ਅਨੁਸਾਰੀ ਰੰਗ ਮੁੱਲ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਦੇ ਨਾਲ-ਨਾਲ ਮੈਨੂੰ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਦੇ ਸਕਦੇ ਹਨ. ਨੋਟ: ਇਸ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ, ਮੈਂ ਥੀਮਿੰਗ ਗ੍ਰਾਫਿਕਸ ਅਤੇ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ਸੰਬੰਧਿਤ ਰੰਗ ਮੁੱਲ ਅਤੇ OKLCH ਰੰਗ ਸਪੇਸ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਤ ਕਰਾਂਗਾ। ਜੇਕਰ ਤੁਸੀਂ ਸਾਪੇਖਿਕ ਰੰਗ ਵਿੱਚ ਡੂੰਘਾਈ ਨਾਲ ਡੁਬਕੀ ਲਗਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਅਹਿਮਦ ਸ਼ਦੀਦ ਨੇ ਇੱਕ ਸ਼ਾਨਦਾਰ ਇੰਟਰਐਕਟਿਵ ਗਾਈਡ ਤਿਆਰ ਕੀਤੀ ਹੈ। ਜਿਵੇਂ ਕਿ ਕਲਰ ਸਪੇਸ, ਗਾਮਟਸ, ਅਤੇ OKLCH ਲਈ, ਸਾਡੇ ਆਪਣੇ ਜਿਓਫ ਗ੍ਰਾਹਮ ਨੇ ਉਹਨਾਂ ਬਾਰੇ ਲਿਖਿਆ ਹੈ।
ਤੱਤਾਂ ਦੀ ਵਾਰ-ਵਾਰ ਵਰਤੋਂ ਮੁੱਖ ਸੀ। ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਬੈਕਗ੍ਰਾਉਂਡਾਂ ਦੀ ਮੁੜ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜ਼ੂਮ ਅਤੇ ਓਵਰਲੇਅ ਉਸੇ ਕਲਾਕਾਰੀ ਤੋਂ ਨਵੇਂ ਦ੍ਰਿਸ਼ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਇਹ ਲੋੜ ਤੋਂ ਪੈਦਾ ਹੋਇਆ ਸੀ, ਪਰ ਇਸ ਨੇ ਵਿਅਕਤੀਗਤ ਦ੍ਰਿਸ਼ਾਂ ਦੀ ਬਜਾਏ ਲੜੀਵਾਰਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਸੋਚਣ ਨੂੰ ਵੀ ਉਤਸ਼ਾਹਿਤ ਕੀਤਾ। ਰੰਗ ਪੈਲੇਟਸ ਨੂੰ ਹੱਥੀਂ ਅੱਪਡੇਟ ਕਰਨ ਨਾਲ ਸਮੱਸਿਆ ਹੈ ਆਓ ਸਿੱਧੇ ਮੇਰੀ ਚੁਣੌਤੀ 'ਤੇ ਚੱਲੀਏ। ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਟੂਨ ਟਾਈਟਲਸ ਵਿੱਚ — 1959 ਦੇ ਯੋਗੀ ਬੇਅਰ ਸ਼ੋਅ ਦੇ ਐਪੀਸੋਡ “ਲੂਲਾਬੀ-ਬਾਈ ਬੇਅਰ” ਉੱਤੇ ਆਧਾਰਿਤ — ਅਤੇ ਮੇਰਾ ਕੰਮ ਆਮ ਤੌਰ 'ਤੇ, ਪੈਲੇਟਸ ਕੁਝ ਚੋਣਵੇਂ ਰੰਗਾਂ ਤੱਕ ਸੀਮਿਤ ਹੁੰਦੇ ਹਨ।
ਮੈਂ ਹੋਰ ਰੰਗਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤੇ ਬਿਨਾਂ ਪੈਲੇਟ ਦਾ ਵਿਸਤਾਰ ਕਰਨ ਲਈ ਜਿਸਨੂੰ ਮੈਂ ਆਪਣਾ "ਫਾਊਂਡੇਸ਼ਨ" ਰੰਗ ਕਹਿੰਦਾ ਹਾਂ ਉਸ ਤੋਂ ਸ਼ੇਡ ਅਤੇ ਟਿੰਟ ਬਣਾਉਂਦਾ ਹਾਂ।
ਸਕੈਚ ਵਿੱਚ, ਮੈਂ HSL ਕਲਰ ਸਪੇਸ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹਾਂ, ਇਸਲਈ ਇਸ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਮੇਰੇ ਫਾਊਂਡੇਸ਼ਨ ਕਲਰ ਦੀ ਲਾਈਟਨੈੱਸ ਵੈਲਯੂ ਨੂੰ ਵਧਾਉਣਾ ਜਾਂ ਘਟਾਉਣਾ ਸ਼ਾਮਲ ਹੈ। ਇਮਾਨਦਾਰੀ ਨਾਲ, ਇਹ ਕੋਈ ਔਖਾ ਕੰਮ ਨਹੀਂ ਹੈ - ਪਰ ਇੱਕ ਵੱਖਰਾ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਚੁਣਨ ਲਈ ਸ਼ੇਡਾਂ ਅਤੇ ਰੰਗਾਂ ਦਾ ਇੱਕ ਨਵਾਂ ਸੈੱਟ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਨੂੰ ਹੱਥੀਂ ਕਰਨਾ, ਬਾਰ ਬਾਰ, ਜਲਦੀ ਹੀ ਮਿਹਨਤੀ ਬਣ ਜਾਂਦਾ ਹੈ।
ਮੈਂ HSL — H (Hue), S (ਸੰਤ੍ਰਿਪਤਾ), ਅਤੇ L (ਹਲਕੀਪਨ) — ਰੰਗ ਸਪੇਸ ਦਾ ਜ਼ਿਕਰ ਕੀਤਾ ਹੈ, ਪਰ ਇਹ ਰੰਗ ਦਾ ਵਰਣਨ ਕਰਨ ਦੇ ਕਈ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। RGB — R (ਲਾਲ), G (ਹਰਾ), B (ਨੀਲਾ) — ਸ਼ਾਇਦ ਸਭ ਤੋਂ ਜਾਣੂ ਹੈ, ਘੱਟੋ-ਘੱਟ ਇਸਦੇ ਹੈਕਸ ਰੂਪ ਵਿੱਚ। ਇਸਦੇ OKLCH ਰੂਪ ਵਿੱਚ LAB — L (ਹਲਕਾਪਨ), A (ਹਰਾ-ਲਾਲ), B (ਨੀਲਾ-ਪੀਲਾ) — ਅਤੇ ਨਵਾਂ, ਪਰ ਹੁਣ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ LCH — L (ਹਲਕਾਪਨ), C (ਕ੍ਰੋਮਾ), H (ਹਿਊ) — ਮਾਡਲ ਵੀ ਹੈ। LCH ਦੇ ਨਾਲ - ਖਾਸ ਤੌਰ 'ਤੇ CSS ਵਿੱਚ OKLCH - ਮੈਂ ਆਪਣੇ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਦੇ ਹਲਕੇਪਣ ਮੁੱਲ ਨੂੰ ਅਨੁਕੂਲ ਕਰ ਸਕਦਾ ਹਾਂ।
ਜਾਂ ਮੈਂ ਇਸਦਾ ਕ੍ਰੋਮਾ ਬਦਲ ਸਕਦਾ ਹਾਂ। LCH ਕ੍ਰੋਮਾ ਅਤੇ HSL ਸੰਤ੍ਰਿਪਤਾ ਦੋਵੇਂ ਇੱਕ ਰੰਗ ਦੀ ਤੀਬਰਤਾ ਜਾਂ ਅਮੀਰੀ ਦਾ ਵਰਣਨ ਕਰਦੇ ਹਨ, ਪਰ ਉਹ ਅਜਿਹਾ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਕਰਦੇ ਹਨ। LCH ਮੈਨੂੰ ਰੰਗਾਂ ਵਿਚਕਾਰ ਇੱਕ ਵਿਸ਼ਾਲ ਸ਼੍ਰੇਣੀ ਅਤੇ ਵਧੇਰੇ ਅਨੁਮਾਨ ਲਗਾਉਣ ਯੋਗ ਮਿਸ਼ਰਣ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਮੈਂ ਰੰਗਾਂ ਦਾ ਇੱਕ ਪੈਲੇਟ ਬਣਾਉਣ ਲਈ ਰੰਗਤ ਨੂੰ ਵੀ ਬਦਲ ਸਕਦਾ ਹਾਂ ਜੋ ਇੱਕੋ ਜਿਹੇ ਹਲਕੇਪਨ ਅਤੇ ਕ੍ਰੋਮਾ ਮੁੱਲਾਂ ਨੂੰ ਸਾਂਝਾ ਕਰਦੇ ਹਨ। ਐਚਐਸਐਲ ਅਤੇ ਐਲਸੀਐਚ ਦੋਵਾਂ ਵਿੱਚ, ਰੰਗ ਦਾ ਸਪੈਕਟ੍ਰਮ ਲਾਲ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਹਰੇ ਅਤੇ ਨੀਲੇ ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ, ਅਤੇ ਲਾਲ ਵਿੱਚ ਵਾਪਸ ਆਉਂਦਾ ਹੈ।
OKLCH ਕਿਉਂ ਬਦਲਿਆ ਕਿ ਮੈਂ ਰੰਗ ਬਾਰੇ ਕਿਵੇਂ ਸੋਚਦਾ ਹਾਂ OKLCH ਕਲਰ ਸਪੇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ ਹੁਣ ਵਿਆਪਕ ਹੈ, ਭਾਵੇਂ ਕਿ ਡਿਜ਼ਾਈਨ ਟੂਲ - ਸਕੈਚ ਸਮੇਤ - ਨੇ ਫੜਿਆ ਨਹੀਂ ਹੈ। ਖੁਸ਼ਕਿਸਮਤੀ ਨਾਲ, ਇਹ ਤੁਹਾਨੂੰ OKLCH ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਨਹੀਂ ਰੋਕਦਾ. ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਲਈ ਖੁਸ਼ੀ ਨਾਲ Hex, HSL, LAB, ਅਤੇ RGB ਮੁੱਲਾਂ ਨੂੰ OKLCH ਵਿੱਚ ਬਦਲ ਦੇਣਗੇ। ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਸਪੇਸ ਵਿੱਚ ਇੱਕ CSS ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਇੱਕ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਵਿੱਚ ਹੈਕਸ ਵੀ ਸ਼ਾਮਲ ਹੈ: /* ਫਾਊਂਡੇਸ਼ਨ ਦਾ ਰੰਗ */ --ਫਾਊਂਡੇਸ਼ਨ: #5accd6;
ਇਸ ਤੋਂ ਲਏ ਗਏ ਕੋਈ ਵੀ ਰੰਗ ਆਪਣੇ ਆਪ ਹੀ OKLCH ਵਿੱਚ ਬਦਲ ਜਾਣਗੇ: --ਫਾਊਂਡੇਸ਼ਨ-ਲਾਈਟ: oklch(var(--foundation) ਤੋਂ [...]; } --foundation-mid: oklch(var(--foundation) ਤੋਂ [...]; } --ਫਾਊਂਡੇਸ਼ਨ-ਡਾਰਕ: oklch(var(--foundation) ਤੋਂ [...]; }
ਇੱਕ ਡਿਜ਼ਾਇਨ ਸਿਸਟਮ ਦੇ ਤੌਰ ਤੇ ਸੰਬੰਧਿਤ ਰੰਗ ਅਨੁਸਾਰੀ ਰੰਗ ਬਾਰੇ ਇਹ ਕਹਿੰਦੇ ਹੋਏ ਸੋਚੋ: "ਇਹ ਰੰਗ ਲਓ, ਇਸਨੂੰ ਬਦਲੋ, ਫਿਰ ਮੈਨੂੰ ਨਤੀਜਾ ਦਿਓ।" ਰੰਗ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦੇ ਦੋ ਤਰੀਕੇ ਹਨ: ਸੰਪੂਰਨ ਤਬਦੀਲੀਆਂ ਅਤੇ ਅਨੁਪਾਤਕ ਤਬਦੀਲੀਆਂ। ਉਹ ਕੋਡ ਵਿੱਚ ਇੱਕੋ ਜਿਹੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ, ਪਰ ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗਾਂ ਨੂੰ ਬਦਲਣਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ ਤਾਂ ਬਹੁਤ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਵਿਵਹਾਰ ਕਰਦੇ ਹਨ। ਉਸ ਅੰਤਰ ਨੂੰ ਸਮਝਣਾ ਉਹ ਹੈ ਜੋ ਇੱਕ ਸਿਸਟਮ ਵਿੱਚ ਰਿਸ਼ਤੇਦਾਰ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਦਲ ਸਕਦਾ ਹੈ। /* ਫਾਊਂਡੇਸ਼ਨ ਦਾ ਰੰਗ */ --ਫਾਊਂਡੇਸ਼ਨ: #5accd6;
ਉਦਾਹਰਨ ਲਈ, ਮੇਰੇ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਦਾ ਹਲਕਾ ਮੁੱਲ 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 ਕੈਲਕ(c - 0.10) h);
ਰੰਗਾਂ ਦੀ ਇੱਕ ਪੈਲੇਟ ਬਣਾਉਣ ਲਈ, ਮੈਂ ਆਪਣੇ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ (200) ਅਤੇ ਮੇਰੇ ਨਵੇਂ ਰੰਗ (260) ਦੇ ਆਭਾ ਦੇ ਮੁੱਲ ਵਿੱਚ ਅੰਤਰ ਦੀ ਗਣਨਾ ਕਰਦਾ ਹਾਂ: oklch(var(--ਫਾਊਂਡੇਸ਼ਨ) ਤੋਂ l c ਕੈਲਕ (h + 60));
ਉਹ ਗਣਨਾਵਾਂ ਨਿਰੋਲ ਹਨ। ਜਦੋਂ ਮੈਂ ਇੱਕ ਨਿਸ਼ਚਿਤ ਰਕਮ ਨੂੰ ਘਟਾਉਂਦਾ ਹਾਂ, ਤਾਂ ਮੈਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਕਹਿ ਰਿਹਾ ਹਾਂ, "ਹਮੇਸ਼ਾ ਇੰਨਾ ਘਟਾਓ।" ਸਥਿਰ ਮੁੱਲ ਜੋੜਨ ਵੇਲੇ ਇਹੀ ਲਾਗੂ ਹੁੰਦਾ ਹੈ: ਕੈਲਕ (c - 0.10) ਕੈਲਕ (c + 0.10)
ਮੈਂ ਇਸ ਪਹੁੰਚ ਦੀਆਂ ਸੀਮਾਵਾਂ ਨੂੰ ਸਖ਼ਤ ਤਰੀਕੇ ਨਾਲ ਸਿੱਖਿਆ ਹੈ। ਜਦੋਂ ਮੈਂ ਫਿਕਸਡ ਕ੍ਰੋਮਾ ਮੁੱਲਾਂ ਨੂੰ ਘਟਾਉਣ 'ਤੇ ਭਰੋਸਾ ਕੀਤਾ, ਤਾਂ ਜਿਵੇਂ ਹੀ ਮੈਂ ਫਾਊਂਡੇਸ਼ਨ ਬਦਲਿਆ, ਰੰਗ ਸਲੇਟੀ ਵੱਲ ਡਿੱਗ ਗਏ। ਇੱਕ ਪੈਲੇਟ ਜੋ ਇੱਕ ਰੰਗ ਲਈ ਕੰਮ ਕਰਦਾ ਸੀ ਦੂਜੇ ਲਈ ਵੱਖ ਹੋ ਗਿਆ. ਗੁਣਾ ਵੱਖਰਾ ਵਿਹਾਰ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਮੈਂ ਕ੍ਰੋਮਾ ਨੂੰ ਗੁਣਾ ਕਰਦਾ ਹਾਂ, ਮੈਂ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਕਹਿ ਰਿਹਾ ਹਾਂ: "ਇਸ ਰੰਗ ਦੀ ਤੀਬਰਤਾ ਨੂੰ ਅਨੁਪਾਤ ਨਾਲ ਘਟਾਓ।" ਰੰਗਾਂ ਵਿਚਕਾਰ ਸਬੰਧ ਬਰਕਰਾਰ ਰਹਿੰਦਾ ਹੈ, ਭਾਵੇਂ ਬੁਨਿਆਦ ਬਦਲ ਜਾਂਦੀ ਹੈ: ਕੈਲਕ (c * 0.10)
ਮੇਰੀ ਮੂਵ ਇਟ, ਸਕੇਲ ਇਟ, ਰੋਟੇਟ ਇਟ ਨਿਯਮ
ਹਲਕੀ ਹਿਲਾਓ (ਜੋੜੋ ਜਾਂ ਘਟਾਓ), ਸਕੇਲ ਕ੍ਰੋਮਾ (ਗੁਣਾ), ਰੰਗ ਨੂੰ ਘੁੰਮਾਓ (ਡਿਗਰੀਆਂ ਜੋੜੋ ਜਾਂ ਘਟਾਓ)।
ਮੈਂ ਕ੍ਰੋਮਾ ਨੂੰ ਸਕੇਲ ਕਰਦਾ ਹਾਂ ਕਿਉਂਕਿ ਮੈਂ ਬੇਸ ਕਲਰ ਦੇ ਅਨੁਪਾਤੀ ਰਹਿਣ ਲਈ ਤੀਬਰਤਾ ਵਿੱਚ ਬਦਲਾਅ ਚਾਹੁੰਦਾ ਹਾਂ। ਰੰਗ ਦੇ ਰਿਸ਼ਤੇ ਰੋਟੇਸ਼ਨਲ ਹੁੰਦੇ ਹਨ, ਇਸਲਈ ਰੰਗਤ ਨੂੰ ਗੁਣਾ ਕਰਨ ਦਾ ਕੋਈ ਅਰਥ ਨਹੀਂ ਹੁੰਦਾ। ਹਲਕੀਤਾ ਅਨੁਭਵੀ ਅਤੇ ਸੰਪੂਰਨ ਹੈ — ਇਸਨੂੰ ਗੁਣਾ ਕਰਨ ਨਾਲ ਅਕਸਰ ਅਜੀਬ ਨਤੀਜੇ ਨਿਕਲਦੇ ਹਨ।
ਇੱਕ ਰੰਗ ਤੋਂ ਇੱਕ ਪੂਰੀ ਥੀਮ ਤੱਕ ਸੰਬੰਧਿਤ ਰੰਗ ਮੈਨੂੰ ਇੱਕ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਅਤੇ ਇਸ ਤੋਂ ਮੈਨੂੰ ਲੋੜੀਂਦਾ ਹਰ ਹੋਰ ਰੰਗ ਬਣਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ — ਫਿਲਸ, ਸਟ੍ਰੋਕ, ਗਰੇਡੀਐਂਟ ਸਟਾਪ, ਸ਼ੈਡੋ —। ਉਸ ਸਮੇਂ, ਰੰਗ ਪੈਲੇਟ ਬਣਨਾ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ ਅਤੇ ਇੱਕ ਸਿਸਟਮ ਬਣਨਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ। SVG ਦ੍ਰਿਸ਼ਟਾਂਤ ਭਰਨ, ਸਟ੍ਰੋਕ ਅਤੇ ਗਰੇਡੀਐਂਟ ਵਿੱਚ ਇੱਕੋ ਜਿਹੇ ਕੁਝ ਰੰਗਾਂ ਦੀ ਮੁੜ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਸੰਬੰਧਿਤ ਰੰਗ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਸਬੰਧਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਹਰ ਥਾਂ ਦੁਬਾਰਾ ਵਰਤਣ ਦਿੰਦਾ ਹੈ — ਜਿਵੇਂ ਕਿ ਐਨੀਮੇਟਰਾਂ ਨੇ ਨਵੇਂ ਦ੍ਰਿਸ਼ ਬਣਾਉਣ ਲਈ ਬੈਕਗ੍ਰਾਊਂਡ ਦੀ ਮੁੜ ਵਰਤੋਂ ਕੀਤੀ ਹੈ।
ਇੱਕ ਵਾਰ ਫਾਊਂਡੇਸ਼ਨ ਦਾ ਰੰਗ ਬਦਲੋ, ਅਤੇ ਹਰ ਲਿਆ ਗਿਆ ਰੰਗ ਆਪਣੇ ਆਪ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦਾ ਹੈ, ਬਿਨਾਂ ਹੱਥੀਂ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਦੀ ਮੁੜ ਗਣਨਾ ਕੀਤੇ। ਐਨੀਮੇਟਡ ਗਰਾਫਿਕਸ ਦੇ ਬਾਹਰ, ਮੈਂ ਬਟਨ ਅਤੇ ਲਿੰਕਾਂ ਵਰਗੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਦੀਆਂ ਸਥਿਤੀਆਂ ਲਈ ਰੰਗਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਇਹੀ ਪਹੁੰਚ ਵਰਤ ਸਕਦਾ ਹਾਂ। ਮੈਂ ਆਪਣੇ "ਲੂਲਾਬੀ-ਬਾਈ ਬੇਅਰ" ਟੂਨ ਟਾਈਟਲ ਵਿੱਚ ਵਰਤਿਆ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਇੱਕ ਨੀਲਾ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਨੀਲਾ ਹੈ। ਬੈਕਗ੍ਰਾਊਂਡ ਮੇਰੀ ਫਾਊਂਡੇਸ਼ਨ ਅਤੇ ਗੂੜ੍ਹੇ ਸੰਸਕਰਣ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਰੇਡੀਅਲ ਗਰੇਡੀਐਂਟ ਹੈ।
ਪੂਰੀ ਤਰ੍ਹਾਂ ਵੱਖਰੇ ਮੂਡਾਂ ਦੇ ਨਾਲ ਵਿਕਲਪਕ ਸੰਸਕਰਣ ਬਣਾਉਣ ਲਈ, ਮੈਨੂੰ ਸਿਰਫ ਫਾਊਂਡੇਸ਼ਨ ਦਾ ਰੰਗ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ: --ਫਾਊਂਡੇਸ਼ਨ: #5accd6; --ਗ੍ਰੇਡ-ਐਂਡ: var(--ਫਾਊਂਡੇਸ਼ਨ); --grad-start: oklch(var(--foundation) ਤੋਂ calc(l - 0.2357) calc(c * 0.833) h);
ਉਹਨਾਂ ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਰੰਗ ਮੁੱਲਾਂ ਦੀ ਡੁਪਲੀਕੇਟ ਕੀਤੇ ਬਿਨਾਂ ਮੇਰੇ SVG ਗਰੇਡੀਐਂਟ ਨਾਲ ਜੋੜਨ ਲਈ, ਮੈਂ ਹਾਰਡ-ਕੋਡ ਵਾਲੇ ਸਟਾਪ-ਕਲਰ ਮੁੱਲਾਂ ਨੂੰ ਇਨਲਾਈਨ ਸਟਾਈਲ ਨਾਲ ਬਦਲ ਦਿੱਤਾ ਹੈ:
ਅੱਗੇ, ਮੈਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦੀ ਲੋੜ ਸੀ ਕਿ ਮੇਰਾ ਟੂਨ ਟੈਕਸਟ ਮੇਰੇ ਦੁਆਰਾ ਚੁਣੇ ਗਏ ਕਿਸੇ ਵੀ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਨਾਲ ਹਮੇਸ਼ਾ ਉਲਟ ਹੋਵੇ। ਇੱਕ 180 ਡਿਗਰੀ ਹਿਊ ਰੋਟੇਸ਼ਨ ਇੱਕ ਪੂਰਕ ਰੰਗ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜੋ ਨਿਸ਼ਚਿਤ ਤੌਰ 'ਤੇ ਆ ਜਾਂਦਾ ਹੈ - ਪਰ ਬੇਆਰਾਮ ਨਾਲ ਕੰਬ ਸਕਦਾ ਹੈ: ਟੈਕਸਟ-ਲਾਈਟ { ਭਰੋ: oklch(var(--foundation) ਤੋਂ l c ਕੈਲਕ (h + 180)); }
ਇੱਕ 90° ਸ਼ਿਫਟ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪੂਰਕ ਹੋਣ ਦੇ ਬਿਨਾਂ ਇੱਕ ਚਮਕਦਾਰ ਸੈਕੰਡਰੀ ਰੰਗ ਪੈਦਾ ਕਰਦੀ ਹੈ: ਟੈਕਸਟ-ਲਾਈਟ { ਭਰੋ: oklch(var(--foundation) ਤੋਂ l c calc(h - 90)); }
Quick Draw McGraw ਦੇ 1959 Toon ਟਾਈਟਲ “El Kabong” ਦਾ ਮੇਰਾ ਮਨੋਰੰਜਨ ਉਹੀ ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਪਰ ਇੱਕ ਹੋਰ ਵਿਭਿੰਨ ਪੈਲੇਟ ਨਾਲ। ਉਦਾਹਰਨ ਲਈ, ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਅਤੇ ਗੂੜ੍ਹੇ ਰੰਗ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਹੋਰ ਰੇਡੀਅਲ ਗਰੇਡੀਐਂਟ ਹੈ।
ਬੈਕਗ੍ਰਾਊਂਡ ਵਿੱਚ ਇਮਾਰਤ ਅਤੇ ਦਰੱਖਤ ਇੱਕੋ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਦੇ ਵੱਖੋ-ਵੱਖਰੇ ਸ਼ੇਡ ਹਨ। ਉਹਨਾਂ ਮਾਰਗਾਂ ਲਈ, ਮੈਨੂੰ ਦੋ ਵਾਧੂ ਭਰਨ ਵਾਲੇ ਰੰਗਾਂ ਦੀ ਲੋੜ ਸੀ: .ਬੀਜੀ-ਮੱਧ { ਭਰੋ: oklch(var(--foundation) ਤੋਂ calc(l - 0.04) calc(c * 0.91) h); }
.bg-ਹਨੇਰਾ { ਭਰੋ: oklch(var(--foundation) ਤੋਂ calc(l - 0.12) calc(c * 0.64) h); }
ਜਦੋਂ ਬੁਨਿਆਦ ਹਿੱਲਣੀ ਸ਼ੁਰੂ ਹੋ ਜਾਂਦੀ ਹੈ
ਹੁਣ ਤੱਕ, ਮੈਂ ਜੋ ਵੀ ਦਿਖਾਇਆ ਹੈ ਉਹ ਸਥਿਰ ਹੈ। ਇੱਥੋਂ ਤੱਕ ਕਿ ਜਦੋਂ ਕੋਈ ਫਾਊਂਡੇਸ਼ਨ ਦਾ ਰੰਗ ਬਦਲਣ ਲਈ ਰੰਗ ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਤਬਦੀਲੀ ਤੁਰੰਤ ਹੋ ਜਾਂਦੀ ਹੈ। ਪਰ ਐਨੀਮੇਟਡ ਗਰਾਫਿਕਸ ਘੱਟ ਹੀ ਖੜ੍ਹੇ ਰਹਿੰਦੇ ਹਨ - ਸੁਰਾਗ ਨਾਮ ਵਿੱਚ ਹੈ। ਇਸ ਲਈ, ਜੇ ਰੰਗ ਸਿਸਟਮ ਦਾ ਹਿੱਸਾ ਹੈ, ਤਾਂ ਕੋਈ ਕਾਰਨ ਨਹੀਂ ਹੈ ਕਿ ਇਹ ਐਨੀਮੇਟ ਨਹੀਂ ਕਰ ਸਕਦਾ, ਵੀ.
ਫਾਊਂਡੇਸ਼ਨ ਕਲਰ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ, ਮੈਨੂੰ ਪਹਿਲਾਂ ਇਸਨੂੰ ਇਸਦੇ OKLCH ਚੈਨਲਾਂ ਵਿੱਚ ਵੰਡਣ ਦੀ ਲੋੜ ਹੈ- ਹਲਕਾਪਨ, ਕ੍ਰੋਮਾ, ਅਤੇ ਰੰਗਤ। ਪਰ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਵਾਧੂ ਕਦਮ ਹੈ: ਮੈਨੂੰ ਉਹਨਾਂ ਮੁੱਲਾਂ ਨੂੰ ਟਾਈਪ ਕੀਤੀਆਂ ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਜੋਂ ਰਜਿਸਟਰ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਪਰ ਇਸ ਦਾ ਕੀ ਮਤਲਬ ਹੈ?
ਮੂਲ ਰੂਪ ਵਿੱਚ, ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਇਹ ਨਹੀਂ ਜਾਣਦਾ ਹੈ ਕਿ ਕੀ ਇੱਕ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀ ਵੈਲਯੂ ਇੱਕ ਰੰਗ, ਲੰਬਾਈ, ਸੰਖਿਆ, ਜਾਂ ਕਿਸੇ ਹੋਰ ਚੀਜ਼ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਦਰਸਾਉਂਦੀ ਹੈ। ਇਸਦਾ ਅਕਸਰ ਮਤਲਬ ਹੁੰਦਾ ਹੈ ਕਿ ਉਹਨਾਂ ਨੂੰ ਐਨੀਮੇਸ਼ਨ ਦੇ ਦੌਰਾਨ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਇੰਟਰਪੋਲੇਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਮੁੱਲ ਤੋਂ ਦੂਜੇ ਵਿੱਚ ਛਾਲ ਮਾਰੋ.
ਇੱਕ ਕਸਟਮ ਪ੍ਰਾਪਰਟੀ ਨੂੰ ਰਜਿਸਟਰ ਕਰਨਾ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਇਹ ਕਿਸ ਕਿਸਮ ਦਾ ਮੁੱਲ ਦਰਸਾਉਂਦਾ ਹੈ ਅਤੇ ਸਮੇਂ ਦੇ ਨਾਲ ਇਸ ਨੂੰ ਕਿਵੇਂ ਵਿਵਹਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਮੇਰੇ ਰੰਗ ਚੈਨਲਾਂ ਨੂੰ ਸੰਖਿਆਵਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਮੰਨੇ ਤਾਂ ਜੋ ਉਹਨਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਐਨੀਮੇਟ ਕੀਤਾ ਜਾ ਸਕੇ।
@property --f-l {
ਸੰਟੈਕਸ: "
@property --f-c {
ਸੰਟੈਕਸ: "
@property --f-h {
ਸੰਟੈਕਸ: "
ਇੱਕ ਵਾਰ ਰਜਿਸਟਰ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਇਹ ਕਸਟਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੇਟਿਵ CSS ਵਾਂਗ ਵਿਹਾਰ ਕਰਦੀਆਂ ਹਨ। ਬ੍ਰਾਊਜ਼ਰ ਉਹਨਾਂ ਨੂੰ ਫਰੇਮ-ਦਰ-ਫ੍ਰੇਮ ਵਿੱਚ ਇੰਟਰਪੋਲੇਟ ਕਰ ਸਕਦਾ ਹੈ। ਮੈਂ ਫਿਰ ਉਹਨਾਂ ਚੈਨਲਾਂ ਤੋਂ ਫਾਊਂਡੇਸ਼ਨ ਕਲਰ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਂਦਾ ਹਾਂ: --ਫਾਊਂਡੇਸ਼ਨ: 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 ਈਜ਼-ਇਨ-ਆਊਟ ਅਨੰਤ; }
ਕਿਉਂਕਿ ਫਿਲਸ, ਗਰੇਡੀਐਂਟ, ਅਤੇ ਸਟ੍ਰੋਕ ਵਿੱਚ ਹਰ ਦੂਜਾ ਰੰਗ --foundation ਤੋਂ ਲਿਆ ਗਿਆ ਹੈ, ਉਹ ਸਾਰੇ ਇਕੱਠੇ ਐਨੀਮੇਟ ਹੁੰਦੇ ਹਨ, ਅਤੇ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਨੂੰ ਹੱਥੀਂ ਅੱਪਡੇਟ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਇੱਕ ਐਨੀਮੇਟਡ ਰੰਗ, ਬਹੁਤ ਸਾਰੇ ਪ੍ਰਭਾਵ ਇਸ ਪ੍ਰਕਿਰਿਆ ਦੀ ਸ਼ੁਰੂਆਤ 'ਤੇ, ਮੈਂ ਹੈਰਾਨ ਸੀ ਕਿ ਕੀ CSS ਅਨੁਸਾਰੀ ਰੰਗ ਮੁੱਲ ਵਧੇਰੇ ਸੰਭਾਵਨਾਵਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰ ਸਕਦੇ ਹਨ ਜਦੋਂ ਕਿ ਉਹਨਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਸੌਖਾ ਬਣਾਉਂਦੇ ਹਨ. ਮੈਂ ਹਾਲ ਹੀ ਵਿੱਚ ਆਪਣੀ ਵੈਬਸਾਈਟ ਦੇ ਸੰਪਰਕ ਪੰਨੇ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਸੋਨੇ ਦੀ ਖਾਣ ਦੀ ਪਿੱਠਭੂਮੀ ਸ਼ਾਮਲ ਕੀਤੀ ਹੈ, ਅਤੇ ਪਹਿਲੀ ਦੁਹਰਾਓ ਵਿੱਚ ਤੇਲ ਦੇ ਲੈਂਪ ਸ਼ਾਮਲ ਹਨ ਜੋ ਚਮਕਦੇ ਹਨ ਅਤੇ ਸਵਿੰਗ ਕਰਦੇ ਹਨ।
ਮੈਂ ਇਹ ਪੜਚੋਲ ਕਰਨਾ ਚਾਹੁੰਦਾ ਸੀ ਕਿ ਕਿਵੇਂ CSS ਅਨੁਸਾਰੀ ਰੰਗਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਨਾਲ ਮਾਈਨ ਇੰਟੀਰੀਅਰ ਨੂੰ ਲੈਂਪਾਂ ਦੇ ਰੰਗਾਂ ਨਾਲ ਰੰਗ ਕੇ ਹੋਰ ਯਥਾਰਥਵਾਦੀ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। ਮੈਂ ਚਾਹੁੰਦਾ ਸੀ ਕਿ ਉਹ ਆਪਣੇ ਆਲੇ ਦੁਆਲੇ ਦੀ ਦੁਨੀਆਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਨ, ਜਿਸ ਤਰ੍ਹਾਂ ਅਸਲ ਰੋਸ਼ਨੀ ਕਰਦਾ ਹੈ। ਇਸ ਲਈ, ਕਈ ਰੰਗਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਦੀ ਬਜਾਏ, ਮੈਂ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਰੋਸ਼ਨੀ ਸਿਸਟਮ ਬਣਾਇਆ ਹੈ ਜੋ ਸਿਰਫ ਇੱਕ ਰੰਗ ਨੂੰ ਐਨੀਮੇਟ ਕਰਦਾ ਹੈ।
ਮੇਰਾ ਪਹਿਲਾ ਕੰਮ ਬੈਕਗ੍ਰਾਊਂਡ ਅਤੇ ਮੇਰੇ ਲੈਂਪ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਓਵਰਲੇ ਲੇਅਰ ਨੂੰ ਸਲਾਟ ਕਰਨਾ ਸੀ: <ਪਾਥ id="ਓਵਰਲੇ" fill="var(-overlay-tint)" [...] style="mix-blend-mode: color" />
ਮੈਂ ਮਿਕਸ-ਬਲੇਂਡ-ਮੋਡ: ਰੰਗ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਕਿਉਂਕਿ ਇਹ ਅੰਡਰਲਾਈੰਗ ਚਮਕ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦੇ ਹੋਏ ਇਸ ਦੇ ਹੇਠਾਂ ਕੀ ਹੈ। ਜਿਵੇਂ ਕਿ ਮੈਂ ਸਿਰਫ ਐਨੀਮੇਸ਼ਨ ਚਾਲੂ ਹੋਣ 'ਤੇ ਓਵਰਲੇਅ ਨੂੰ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੁੰਦਾ ਹਾਂ, ਮੈਂ ਓਵਰਲੇ ਨੂੰ ਔਪਟ-ਇਨ ਕੀਤਾ ਹੈ: .svg-mine #overlay { ਡਿਸਪਲੇ: ਕੋਈ ਨਹੀਂ; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #ਓਵਰਲੇ { ਡਿਸਪਲੇ: ਬਲਾਕ; ਧੁੰਦਲਾਪਨ: 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 (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { ਐਨੀਮੇਸ਼ਨ: ਫਲੇਮ 3.6s ਅਨੰਤ ਰੇਖਿਕ; isolation: isolate;
/* ਐਨੀਮੇਟਡ ਚੈਨਲਾਂ ਤੋਂ ਫਲੇਮ ਕਲਰ ਬਣਾਓ */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* ਲਾਟ ਤੋਂ ਲਿਆ ਲੈਂਪ ਦਾ ਰੰਗ */ --ਲੈਂਪ-ਕੋਰ: oklch(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(--ਲੈਂਪ-ਕੋਰ); }
.svg-mine[data-animations=on] #ਓਵਰਲੇ { ਡਿਸਪਲੇ: ਬਲਾਕ; ਭਰੋ: var(-overlay-tint); ਧੁੰਦਲਾਪਨ: 0.5; } }
ਜਦੋਂ ਲਾਟ ਸੰਤਰੀ ਵੱਲ ਵਧਦੀ ਹੈ, ਤਾਂ ਦੀਵੇ ਗਰਮ ਹੋ ਜਾਂਦੇ ਹਨ, ਅਤੇ ਦ੍ਰਿਸ਼ ਉਹਨਾਂ ਦੇ ਨਾਲ ਗਰਮ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਲਾਟ ਠੰਢੀ ਹੁੰਦੀ ਹੈ, ਸਭ ਕੁਝ ਇਕੱਠੇ ਹੋ ਜਾਂਦਾ ਹੈ. ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ ਇਹ ਹੈ ਕਿ ਕੁਝ ਵੀ ਹੱਥੀਂ ਨਹੀਂ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਮੈਂ ਫਾਊਂਡੇਸ਼ਨ ਦਾ ਰੰਗ ਬਦਲਦਾ ਹਾਂ ਜਾਂ ਫਲੇਮ ਐਨੀਮੇਸ਼ਨ ਰੇਂਜਾਂ ਨੂੰ ਬਦਲਦਾ ਹਾਂ, ਤਾਂ ਸਾਰਾ ਲਾਈਟਿੰਗ ਸਿਸਟਮ ਇੱਕੋ ਸਮੇਂ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ ਮੇਰੀ ਵੈਬਸਾਈਟ 'ਤੇ ਅੰਤਮ ਨਤੀਜਾ ਦੇਖ ਸਕਦੇ ਹੋ. ਮੁੜ ਵਰਤੋਂ, ਮੁੜ ਵਰਤੋਂ, ਮੁੜ ਵਿਚਾਰ ਕੀਤਾ ਉਹ ਹੈਨਾ-ਬਾਰਬੇਰਾ ਐਨੀਮੇਟਰਾਂ ਨੂੰ ਲੋੜ ਤੋਂ ਬਾਹਰ ਤੱਤਾਂ ਨੂੰ ਦੁਬਾਰਾ ਤਿਆਰ ਕਰਨ ਲਈ ਮਜ਼ਬੂਰ ਕੀਤਾ ਗਿਆ ਸੀ, ਪਰ ਮੈਂ ਰੰਗਾਂ ਦੀ ਮੁੜ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ ਕਿਉਂਕਿ ਇਹ ਮੇਰੇ ਕੰਮ ਨੂੰ ਵਧੇਰੇ ਇਕਸਾਰ ਅਤੇ ਬਰਕਰਾਰ ਰੱਖਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। CSS ਅਨੁਸਾਰੀ ਰੰਗ ਮੁੱਲ ਮੈਨੂੰ ਇਹ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ:
ਇੱਕ ਸਿੰਗਲ ਫਾਊਂਡੇਸ਼ਨ ਰੰਗ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ, ਵਰਣਨ ਕਰੋ ਕਿ ਹੋਰ ਰੰਗ ਇਸ ਨਾਲ ਕਿਵੇਂ ਸਬੰਧਤ ਹਨ, ਉਹਨਾਂ ਰਿਸ਼ਤਿਆਂ ਨੂੰ ਹਰ ਥਾਂ ਮੁੜ ਵਰਤੋਂ, ਅਤੇ ਇੱਕ ਮੁੱਲ ਬਦਲ ਕੇ ਸਿਸਟਮ ਨੂੰ ਐਨੀਮੇਟ ਕਰੋ।
ਸੰਬੰਧਿਤ ਰੰਗ ਸਿਰਫ਼ ਥੀਮਿੰਗ ਨੂੰ ਆਸਾਨ ਨਹੀਂ ਬਣਾਉਂਦਾ। ਇਹ ਸੋਚਣ ਦੇ ਇੱਕ ਤਰੀਕੇ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਰੰਗ, ਜਿਵੇਂ ਮੋਸ਼ਨ, ਜਾਣਬੁੱਝ ਕੇ ਹੁੰਦਾ ਹੈ - ਅਤੇ ਜਿੱਥੇ ਇੱਕ ਮੁੱਲ ਨੂੰ ਬਦਲਣਾ ਇਸਦੇ ਹੇਠਾਂ ਕੰਮ ਨੂੰ ਮੁੜ ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਪੂਰੇ ਦ੍ਰਿਸ਼ ਨੂੰ ਬਦਲ ਸਕਦਾ ਹੈ।
