ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ ਜਿਸ ਵਿੱਚ ਮੈਨੂੰ CSS ਅਤੇ SVG ਐਨੀਮੇਸ਼ਨਾਂ ਬਾਰੇ ਸਭ ਕੁਝ ਸਿੱਖਣ ਦੀ ਲੋੜ ਸੀ, ਮੈਂ ਸਮੈਸ਼ਿੰਗ ਐਨੀਮੇਸ਼ਨਾਂ ਅਤੇ "ਕਿਸ ਤਰ੍ਹਾਂ ਕਲਾਸਿਕ ਕਾਰਟੂਨ ਆਧੁਨਿਕ CSS ਨੂੰ ਪ੍ਰੇਰਿਤ ਕਰਦੇ ਹਨ" ਬਾਰੇ ਇਹ ਲੜੀ ਲਿਖਣੀ ਸ਼ੁਰੂ ਕੀਤੀ। ਇਸ ਸਾਲ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ, ਮੈਂ ਤੁਹਾਨੂੰ ਇਹ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਆਧੁਨਿਕ CSS ਦੀ ਵਰਤੋਂ ਉਸ ਤੱਤ ਨੂੰ ਬਣਾਉਣ ਲਈ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਜੋ ਟੂਨ ਟਾਈਟਲ ਨੂੰ ਬਹੁਤ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਬਣਾਉਂਦਾ ਹੈ: ਉਹਨਾਂ ਦੀ ਟਾਈਪੋਗ੍ਰਾਫੀ. ਟਾਈਟਲ ਆਰਟਵਰਕ ਡਿਜ਼ਾਈਨ 1920 ਅਤੇ 30 ਦੇ ਦਹਾਕੇ ਦੇ ਸ਼ੁਰੂਆਤੀ ਦੌਰ ਵਿੱਚ, ਇੱਕ ਫਿਲਮ ਦੇ ਟਾਈਟਲ ਕਾਰਡ ਦੀ ਟਾਈਪੋਗ੍ਰਾਫੀ ਨੇ ਇੱਕ ਮੂਡ ਬਣਾਇਆ, ਸੀਨ ਸੈੱਟ ਕੀਤਾ, ਅਤੇ ਦਰਸ਼ਕਾਂ ਨੂੰ ਫਿਲਮ ਦੀ ਕਿਸਮ ਦੀ ਯਾਦ ਦਿਵਾ ਦਿੱਤੀ ਜੋ ਉਹ ਦੇਖਣ ਲਈ ਭੁਗਤਾਨ ਕਰਨਗੇ।
ਕਾਰਟੂਨ ਟਾਈਟਲ ਕਾਰਡ ਵੀ ਬ੍ਰਾਂਡਿੰਗ, ਮੂਡ ਅਤੇ ਸੀਨ-ਸੈਟਿੰਗ ਸਨ, ਸਾਰੇ ਇੱਕ ਵਿੱਚ ਰੋਲ ਕੀਤੇ ਗਏ ਸਨ। ਸ਼ੁਰੂਆਤੀ ਸਾਲਾਂ ਵਿੱਚ, ਜਦੋਂ ਵੱਡੇ ਸਟੂਡੀਓ ਦੇ ਬਜਟ ਵੱਡੇ ਹੁੰਦੇ ਸਨ, ਇਹ ਸਿਰਲੇਖ ਕਾਰਡ ਅਕਸਰ ਚਿੱਤਰਕਾਰੀ ਅਤੇ ਚਿੱਤਰਕਾਰੀ ਹੁੰਦੇ ਸਨ।
ਪਰ ਜਦੋਂ 1950 ਦੇ ਦਹਾਕੇ ਦੌਰਾਨ ਟੈਲੀਵਿਜ਼ਨ ਵਧਿਆ, ਬਜਟ ਘਟਿਆ, ਅਤੇ ਲਾਰੈਂਸ "ਆਰਟ" ਗੋਬਲ ਵਰਗੇ ਕਲਾਕਾਰਾਂ ਦੁਆਰਾ ਡਿਜ਼ਾਈਨ ਕੀਤੇ ਕਾਰਡਾਂ ਨੇ ਇੱਕ ਨਵੀਂ ਵਿਜ਼ੂਅਲ ਭਾਸ਼ਾ ਅਪਣਾਈ, ਜੋ ਵਧੇਰੇ ਗ੍ਰਾਫਿਕ, ਸਟਾਈਲਾਈਜ਼ਡ ਅਤੇ ਘੱਟ ਗੁੰਝਲਦਾਰ ਬਣ ਗਈ। ਨੋਟ: ਲਾਰੈਂਸ "ਆਰਟ" ਗੋਬਲ ਮੱਧ-ਸਦੀ ਦੇ ਅਮਰੀਕੀ ਐਨੀਮੇਸ਼ਨ ਦੇ ਅਕਸਰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤੇ ਨਾਇਕਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। ਉਸਨੇ ਮੁੱਖ ਤੌਰ 'ਤੇ 1950 ਅਤੇ 1960 ਦੇ ਦਹਾਕੇ ਦੇ ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਸਾਲਾਂ ਦੌਰਾਨ ਹੈਨਾ-ਬਾਰਬੇਰਾ ਲਈ ਕੰਮ ਕੀਤਾ। ਗੋਬਲ ਇੱਕ ਅੱਖਰ ਐਨੀਮੇਟਰ ਨਹੀਂ ਸੀ। ਉਸਦੀ ਭੂਮਿਕਾ ਮਾਹੌਲ ਬਣਾਉਣ ਦੀ ਸੀ, ਇਸ ਲਈ ਉਸਨੇ ਫਲਿੰਸਟੋਨਜ਼, ਹਕਲਬੇਰੀ ਹਾਉਂਡ, ਕਵਿੱਕ ਡਰਾਅ ਮੈਕਗ੍ਰਾ, ਅਤੇ ਯੋਗੀ ਬੀਅਰ ਦੇ ਨਾਲ-ਨਾਲ ਸ਼ੁਰੂਆਤੀ ਟਾਈਟਲ ਕਾਰਡਾਂ ਲਈ ਵਾਤਾਵਰਣ ਤਿਆਰ ਕੀਤਾ ਜੋ ਟੋਨ ਸੈੱਟ ਕਰਦੇ ਹਨ। ਉਸ ਦੇ ਸਿਰਲੇਖ ਕਾਰਡ, ਇੱਕ ਲੋਗੋ ਓਵਰਲੇਡ ਨਾਲ ਪੇਂਟਿੰਗਾਂ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ, ਹੈਨਾ-ਬਾਰਬੇਰਾ ਦੇ ਪ੍ਰਤੀਕ ਰੂਪ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਪਾਤਰਾਂ ਲਈ ਗੋਬਲ ਦੀ ਕਲਾਕਾਰੀ ਜਿਵੇਂ ਕਿ ਕਵਿੱਕ ਡਰਾਅ ਮੈਕਗ੍ਰਾ ਅਤੇ ਯੋਗੀ ਬੀਅਰ ਛੋਟੀਆਂ ਟੀਵੀ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਸੀ। ਕਾਰਟੂਨ ਤੋਂ ਇੱਕ ਸਟਿਲ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੀ ਬਜਾਏ, ਉਸਨੇ ਇੱਕ ਸਿੰਗਲ, ਮਜ਼ਬੂਤ ਵਿਚਾਰ ਪੇਸ਼ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦਿੱਤਾ - ਅਕਸਰ ਸਿਲੂਏਟ ਵਿੱਚ - ਜੋ ਇਸਦਾ ਸਾਰ ਹਾਸਲ ਕਰਦਾ ਹੈ। "ਬਜ਼ਿਨ' ਰਿੱਛ" ਵਿੱਚ, ਯੋਗੀ ਇੱਕ ਹੈਲੀਕਾਪਟਰ ਵਿੱਚ ਗੂੰਜਦਾ ਹੈ। ਉਹ ਉਛਾਲਦਾ ਹੈ, ਹੱਥ ਵਿੱਚ ਪਿਕ-ਏ-ਨਿਕ ਟੋਕਰੀ, “ਬੀਅਰ ਆਨ ਏ ਪਿਕਨਿਕ” ਵਿੱਚ ਅਤੇ ਆਪਣੇ “ਪ੍ਰਾਈਜ਼ ਫਾਈਟ ਡਰਾਈਟ” ਲਈ, ਯੋਗੀ ਨੇ ਸਿਰਲੇਖ ਦੇ ਟੈਕਸਟ ਨੂੰ ਬਾਕਸ ਕੀਤਾ।
'ਤੇ ਭਰੋਸਾ ਕਰਨ ਲਈ ਬਹੁਤ ਘੱਟ ਜਾਂ ਕੋਈ ਗਤੀ ਦੇ ਨਾਲ, ਗੋਬਲ ਦੇ ਸਿੰਗਲ ਫਰੇਮਾਂ ਨੂੰ ਇੱਕ ਮੂਡ ਬਣਾਉਣਾ, ਸੀਨ ਸੈੱਟ ਕਰਨਾ ਅਤੇ ਇੱਕ ਕਹਾਣੀ ਦਾ ਵਰਣਨ ਕਰਨਾ ਪਿਆ। ਉਹਨਾਂ ਨੇ ਇਹ ਫਲੈਟ ਰੰਗਾਂ, ਗ੍ਰਾਫਿਕ ਆਕਾਰਾਂ ਅਤੇ ਟਾਈਪੋਗ੍ਰਾਫੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੀਤਾ ਜੋ ਅਕਸਰ ਆਰਟਵਰਕ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਸੀ।
ਵੈੱਬ 'ਤੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਡਿਜ਼ਾਈਨਰ ਹੋਣ ਦੇ ਨਾਤੇ, ਟੂਨ ਸਿਰਲੇਖ ਸਾਨੂੰ ਇਸ ਬਾਰੇ ਬਹੁਤ ਕੁਝ ਸਿਖਾ ਸਕਦੇ ਹਨ ਕਿ ਕਿਸੇ ਬ੍ਰਾਂਡ ਦੀ ਸ਼ਖਸੀਅਤ ਨੂੰ ਕਿਵੇਂ ਵਿਅਕਤ ਕਰਨਾ ਹੈ, ਪਹਿਲੀ ਪ੍ਰਭਾਵ ਬਣਾਉਣਾ ਹੈ, ਅਤੇ ਕਿਸੇ ਉਤਪਾਦ ਜਾਂ ਵੈੱਬਸਾਈਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਿਸੇ ਦੇ ਤਜ਼ਰਬੇ ਲਈ ਉਮੀਦਾਂ ਨੂੰ ਕਿਵੇਂ ਸੈੱਟ ਕਰਨਾ ਹੈ। ਅਸੀਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਬੈਨਰ, ਲੈਂਡਿੰਗ-ਪੇਜ ਸਿਰਲੇਖ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਵਧੀਆ ਫੈਸ਼ਨ ਵਾਲੇ ਸਪਲੈਸ਼ ਸਕ੍ਰੀਨ ਬਣਾਉਣ ਲਈ ਕਲਾਕਾਰਾਂ ਦੀਆਂ ਤਕਨੀਕਾਂ ਤੋਂ ਸਿੱਖ ਸਕਦੇ ਹਾਂ। ਟੂਨ ਟਾਈਟਲ ਟਾਈਪੋਗ੍ਰਾਫੀ ਕਾਰਟੂਨ ਟਾਈਟਲ ਕਾਰਡ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਕਿਵੇਂ ਇਮੇਜਰੀ ਨਾਲ ਮਿਲਾਉਣ ਵਾਲੀ ਕਿਸਮ ਸਿਰਲੇਖ ਜਾਂ ਹੀਰੋ ਦੀ ਲੋੜ ਨੂੰ ਪੰਚ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ। ਮੁੱਠੀ ਭਰ ਟੈਕਸਟ-ਸ਼ੈਡੋ, ਟੈਕਸਟ-ਸਟ੍ਰੋਕ, ਅਤੇ ਟ੍ਰਾਂਸਫਾਰਮ ਟ੍ਰਿਕਸ ਦੇ ਨਾਲ, ਆਧੁਨਿਕ CSS ਤੁਹਾਨੂੰ ਉਸੇ ਊਰਜਾ ਵਿੱਚ ਟੈਪ ਕਰਨ ਦਿੰਦਾ ਹੈ।
ਟੂਨ ਟੈਕਸਟ ਟਾਈਟਲ ਜਨਰੇਟਰ ਇਸ ਲੇਖ ਨੂੰ ਲਿਖਣ ਦੇ ਦੌਰਾਨ, ਮੈਨੂੰ ਅਹਿਸਾਸ ਹੋਇਆ ਕਿ ਕਾਰਟੂਨ ਦੇ ਸਿਰਲੇਖਾਂ ਦੀ ਤਰ੍ਹਾਂ ਟੈਕਸਟ ਬਣਾਉਣ ਲਈ ਇੱਕ ਟੂਲ ਹੋਣਾ ਲਾਭਦਾਇਕ ਹੋਵੇਗਾ ਜੋ ਮੈਨੂੰ ਬਹੁਤ ਪਸੰਦ ਹੈ। ਇਸ ਲਈ ਮੈਂ ਇੱਕ ਬਣਾਇਆ. ਮਾਈ ਟੂਨ ਟੈਕਸਟ ਟਾਈਟਲ ਜੇਨਰੇਟਰ ਤੁਹਾਨੂੰ ਰੰਗਾਂ, ਸਟ੍ਰੋਕਾਂ ਅਤੇ ਮਲਟੀਪਲ ਟੈਕਸਟ ਸ਼ੈਡੋਜ਼ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਪੇਂਟ ਆਰਡਰ ਨੂੰ ਐਡਜਸਟ ਕਰ ਸਕਦੇ ਹੋ, ਅੱਖਰਾਂ ਵਿੱਚ ਸਪੇਸਿੰਗ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ, ਨਮੂਨੇ ਦੇ ਫੌਂਟਾਂ ਦੀ ਇੱਕ ਚੋਣ ਵਿੱਚ ਆਪਣੇ ਟੈਕਸਟ ਦੀ ਪੂਰਵਦਰਸ਼ਨ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਵਰਤਣ ਲਈ ਤਿਆਰ ਕੀਤੇ CSS ਨੂੰ ਸਿੱਧੇ ਆਪਣੇ ਕਲਿੱਪਬੋਰਡ ਵਿੱਚ ਕਾਪੀ ਕਰ ਸਕਦੇ ਹੋ। ਟੂਨ ਟਾਈਟਲ CSS ਤੁਸੀਂ ਸਿਰਫ਼ CSS ਨੂੰ ਕਾਪੀ-ਪੇਸਟ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਟੂਨ ਟੈਕਸਟ ਟਾਈਟਲ ਜੇਨਰੇਟਰ ਤੁਹਾਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਪਰ ਆਓ ਇਸ ਬਾਰੇ ਹੋਰ ਧਿਆਨ ਦੇਈਏ ਕਿ ਇਹ ਕੀ ਕਰਦਾ ਹੈ। ਟੈਕਸਟ ਸ਼ੈਡੋ Augie Doggie ਦੇ ਐਪੀਸੋਡ "Yuk-Yuk Duck" ਤੋਂ ਇਸ ਸਿਰਲੇਖ ਦੀ ਕਿਸਮ ਵੇਖੋ, ਇਸਦੇ ਫਿੱਕੇ ਪੀਲੇ ਅੱਖਰਾਂ ਅਤੇ ਗੂੜ੍ਹੇ, ਸਖ਼ਤ, ਔਫਸੈੱਟ ਸ਼ੈਡੋ ਨਾਲ ਜੋ ਇਸਨੂੰ ਪਿਛੋਕੜ ਤੋਂ ਹਟਾ ਦਿੰਦਾ ਹੈ ਅਤੇ ਡੂੰਘਾਈ ਦਾ ਭਰਮ ਪੈਦਾ ਕਰਦਾ ਹੈ।
ਤੁਸੀਂ ਸ਼ਾਇਦ ਪਹਿਲਾਂ ਹੀ ਜਾਣਦੇ ਹੋਵੋਗੇ ਕਿ ਟੈਕਸਟ-ਸ਼ੈਡੋ ਚਾਰ ਮੁੱਲਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ: (1) ਹਰੀਜੱਟਲ ਅਤੇ (2) ਵਰਟੀਕਲ ਆਫਸੈੱਟ, (3) ਬਲਰ, ਅਤੇ (4) ਇੱਕ ਰੰਗ ਜੋ ਠੋਸ ਜਾਂ ਅਰਧ-ਪਾਰਦਰਸ਼ੀ ਹੋ ਸਕਦਾ ਹੈ। ਉਹ ਔਫਸੈੱਟ ਮੁੱਲ ਸਕਾਰਾਤਮਕ ਜਾਂ ਨਕਾਰਾਤਮਕ ਹੋ ਸਕਦੇ ਹਨ, ਇਸਲਈ ਮੈਂ ਹੇਠਾਂ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਖਿੱਚੀ ਗਈ ਸਖਤ ਸ਼ੈਡੋ ਦੀ ਵਰਤੋਂ ਕਰਕੇ "Yuk-Yuk Duck" ਦੀ ਨਕਲ ਕਰ ਸਕਦਾ ਹਾਂ: ਰੰਗ: #f7f76d; ਟੈਕਸਟ-ਸ਼ੈਡੋ: 5px 5px 0 #1e1904;
ਦੂਜੇ ਪਾਸੇ, ਇਹ "ਪਿੰਟ ਜਾਇੰਟ" ਸਿਰਲੇਖ ਇਸਦੇ ਨਕਾਰਾਤਮਕ ਅਰਧ-ਨਰਮ ਸ਼ੈਡੋ ਦੇ ਨਾਲ ਇੱਕ ਵੱਖਰਾ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ: ਰੰਗ: #c2a872; ਟੈਕਸਟ-ਸ਼ੈਡੋ: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
ਵਾਧੂ ਡੂੰਘਾਈ ਜੋੜਨ ਅਤੇ ਹੋਰ ਦਿਲਚਸਪ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ, ਮੈਂ ਕਈ ਸ਼ੈਡੋ ਲੇਅਰ ਕਰ ਸਕਦਾ ਹਾਂ। "ਚਲੋ ਡਕ ਆਊਟ" ਲਈ, ਮੈਂ ਚਾਰ ਸ਼ੈਡੋ ਨੂੰ ਜੋੜਦਾ ਹਾਂ: ਬੈਕਗ੍ਰਾਊਂਡ ਤੋਂ ਟੈਕਸਟ ਨੂੰ ਚੁੱਕਣ ਲਈ ਇੱਕ ਨੈਗੇਟਿਵ ਹਰੀਜੱਟਲ ਆਫਸੈੱਟ ਵਾਲਾ ਪਹਿਲਾ ਇੱਕ ਠੋਸ ਪਰਛਾਵਾਂ, ਇਸਦੇ ਦੁਆਲੇ ਇੱਕ ਧੁੰਦਲਾ ਬਣਾਉਣ ਲਈ ਹੌਲੀ-ਹੌਲੀ ਨਰਮ ਪਰਛਾਵੇਂ ਆਉਂਦੇ ਹਨ: ਰੰਗ: #6F4D80; ਟੈਕਸਟ-ਸ਼ੈਡੋ: -5px5px 0 #260e1e, /* ਸ਼ੈਡੋ 1 */ 0 0 15px #e9ce96, /* ਸ਼ੈਡੋ 2 */ 0 0 30px #e9ce96, /* ਸ਼ੈਡੋ 3 */ 0 0 30px #e9ce96; /* ਸ਼ੈਡੋ 4 */
ਇਹ ਪਰਛਾਵੇਂ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਟੈਕਸਟ-ਸ਼ੈਡੋ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸਿਰਫ ਰੋਸ਼ਨੀ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਬਾਰੇ ਨਹੀਂ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਸਜਾਵਟੀ ਵੀ ਹੋ ਸਕਦੇ ਹਨ ਅਤੇ ਸ਼ਖਸੀਅਤ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹਨ। ਟੈਕਸਟ ਸਟ੍ਰੋਕ ਬਹੁਤ ਸਾਰੇ ਕਾਰਟੂਨ ਟਾਈਟਲ ਕਾਰਡਾਂ ਵਿੱਚ ਬੋਲਡ ਰੂਪਰੇਖਾ ਵਾਲੇ ਅੱਖਰ ਹੁੰਦੇ ਹਨ ਜੋ ਉਹਨਾਂ ਨੂੰ ਪਿਛੋਕੜ ਤੋਂ ਵੱਖਰਾ ਬਣਾਉਂਦੇ ਹਨ। ਮੈਂ ਟੈਕਸਟ-ਸਟ੍ਰੋਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਪ੍ਰਭਾਵ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾ ਸਕਦਾ ਹਾਂ. ਲੰਬੇ ਸਮੇਂ ਤੋਂ, ਇਹ ਸੰਪੱਤੀ ਸਿਰਫ਼ ਇੱਕ -webkit- ਅਗੇਤਰ ਦੁਆਰਾ ਉਪਲਬਧ ਸੀ, ਪਰ ਇਸਦਾ ਮਤਲਬ ਇਹ ਵੀ ਹੈ ਕਿ ਇਹ ਹੁਣ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਹੈ।
ਟੈਕਸਟ-ਸਟ੍ਰੋਕ ਦੋ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਇੱਕ ਸ਼ਾਰਟਹੈਂਡ ਹੈ। ਪਹਿਲਾ, ਟੈਕਸਟ-ਸਟ੍ਰੋਕ-ਚੌੜਾਈ, ਵਿਅਕਤੀਗਤ ਅੱਖਰਾਂ ਦੇ ਦੁਆਲੇ ਇੱਕ ਕੰਟੋਰ ਖਿੱਚਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਦੂਜਾ, ਟੈਕਸਟ-ਸਟ੍ਰੋਕ-ਰੰਗ, ਇਸਦੇ ਰੰਗ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ। “Whatever Goes Pup” ਲਈ, ਮੈਂ ਪੀਲੇ ਟੈਕਸਟ ਵਿੱਚ ਇੱਕ 4px ਨੀਲਾ ਸਟ੍ਰੋਕ ਜੋੜਿਆ ਹੈ: ਰੰਗ: #eff0cd; -ਵੈਬਕਿੱਟ-ਟੈਕਸਟ-ਸਟ੍ਰੋਕ: 4px #7890b5; ਟੈਕਸਟ-ਸਟ੍ਰੋਕ: 4px #7890b5;
ਸਟ੍ਰੋਕ ਖਾਸ ਤੌਰ 'ਤੇ ਉਦੋਂ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦੇ ਹਨ ਜਦੋਂ ਉਹਨਾਂ ਨੂੰ ਸ਼ੈਡੋ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਇਸਲਈ "ਵਧ ਰਹੇ, ਵਧਦੇ, ਚਲੇ ਗਏ" ਲਈ, ਮੈਂ ਇਸ ਤਿੰਨ-ਅਯਾਮੀ ਟੈਕਸਟ ਪ੍ਰਭਾਵ ਨੂੰ ਬਣਾਉਣ ਲਈ ਇੱਕ ਘੱਟ ਧੁੰਦਲੇ 1px ਸ਼ੈਡੋ ਵਿੱਚ ਇੱਕ ਪਤਲਾ 3px ਸਟ੍ਰੋਕ ਜੋੜਿਆ ਹੈ: ਰੰਗ: #fbb999; ਟੈਕਸਟ-ਸ਼ੈਡੋ: 3px 5px 1px #5160b1; -ਵੈਬਕਿੱਟ-ਟੈਕਸਟ-ਸਟ੍ਰੋਕ: 3px #984336; ਟੈਕਸਟ-ਸਟ੍ਰੋਕ: 3px #984336;
ਪੇਂਟ ਆਰਡਰ ਟੈਕਸਟ-ਸਟ੍ਰੋਕ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਹਮੇਸ਼ਾ ਸੰਭਾਵਿਤ ਨਤੀਜਾ ਨਹੀਂ ਮਿਲਦਾ, ਖਾਸ ਤੌਰ 'ਤੇ ਪਤਲੇ ਅੱਖਰਾਂ ਅਤੇ ਮੋਟੇ ਸਟ੍ਰੋਕਾਂ ਨਾਲ, ਕਿਉਂਕਿ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਭਰਨ 'ਤੇ ਸਟ੍ਰੋਕ ਖਿੱਚਦਾ ਹੈ। ਅਫ਼ਸੋਸ ਦੀ ਗੱਲ ਹੈ ਕਿ, CSS ਅਜੇ ਵੀ ਮੈਨੂੰ ਸਟ੍ਰੋਕ ਪਲੇਸਮੈਂਟ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਨਹੀਂ ਦਿੰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਮੈਂ ਅਕਸਰ ਸਕੈਚ ਵਿੱਚ ਕਰਦਾ ਹਾਂ. ਹਾਲਾਂਕਿ, ਪੇਂਟ-ਆਰਡਰ ਸੰਪੱਤੀ ਦੇ ਮੁੱਲ ਹਨ ਜੋ ਮੈਨੂੰ ਭਰਨ ਦੇ ਅੱਗੇ ਦੀ ਬਜਾਏ ਸਟ੍ਰੋਕ ਨੂੰ ਪਿੱਛੇ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ।
ਪੇਂਟ-ਆਰਡਰ: ਸਟ੍ਰੋਕ ਪਹਿਲਾਂ ਸਟ੍ਰੋਕ ਨੂੰ ਪੇਂਟ ਕਰਦਾ ਹੈ, ਫਿਰ ਫਿਲ, ਜਦੋਂ ਕਿ ਪੇਂਟ-ਆਰਡਰ: ਫਿਲ ਉਲਟ ਕਰਦਾ ਹੈ: ਰੰਗ: #fbb999; paint-order: ਭਰਨਾ; ਟੈਕਸਟ-ਸ਼ੈਡੋ: 3px 5px 1px #5160b1; ਟੈਕਸਟ-ਸਟ੍ਰੋਕ-ਰੰਗ:#984336; ਟੈਕਸਟ-ਸਟ੍ਰੋਕ-ਚੌੜਾਈ: 3px;
ਇੱਕ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਸਟ੍ਰੋਕ ਅੱਖਰਾਂ ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਰੱਖਦਾ ਹੈ, ਭਾਰ ਵਧਾਉਂਦਾ ਹੈ, ਅਤੇ - ਜਦੋਂ ਸ਼ੈਡੋਜ਼ ਅਤੇ ਪੇਂਟ ਆਰਡਰ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ - ਫਲੈਟ ਟੈਕਸਟ ਨੂੰ ਅਸਲ ਮੌਜੂਦਗੀ ਦਿੰਦਾ ਹੈ। ਟੈਕਸਟ ਦੇ ਅੰਦਰ ਬੈਕਗ੍ਰਾਉਂਡ ਕਈ ਕਾਰਟੂਨ ਟਾਈਟਲ ਕਾਰਡ ਟੈਕਸਟਚਰ, ਗਰੇਡੀਐਂਟ, ਜਾਂ ਅੱਖਰਾਂ ਵਿੱਚ ਚਿੱਤਰਿਤ ਵੇਰਵੇ ਜੋੜ ਕੇ ਫਲੈਟ ਰੰਗ ਤੋਂ ਪਰੇ ਹੁੰਦੇ ਹਨ। ਕਈ ਵਾਰ ਇਹ ਟੈਕਸਟਚਰ ਹੁੰਦਾ ਹੈ, ਕਈ ਵਾਰ ਇਹ ਸੂਖਮ ਟੋਨਲ ਸ਼ਿਫਟ ਦੇ ਨਾਲ ਇੱਕ ਗਰੇਡੀਐਂਟ ਹੋ ਸਕਦਾ ਹੈ। ਵੈੱਬ 'ਤੇ, ਮੈਂ ਟੈਕਸਟ ਦੇ ਪਿੱਛੇ ਇੱਕ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰ ਜਾਂ ਗਰੇਡੀਐਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਅਤੇ ਫਿਰ ਇਸਨੂੰ ਅੱਖਰਾਂ ਦੀ ਸ਼ਕਲ ਵਿੱਚ ਕਲਿਪ ਕਰਕੇ ਇਸ ਪ੍ਰਭਾਵ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾ ਸਕਦਾ ਹਾਂ। ਇਹ ਇਕੱਠੇ ਕੰਮ ਕਰਨ ਵਾਲੀਆਂ ਦੋ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ: ਬੈਕਗ੍ਰਾਉਂਡ-ਕਲਿੱਪ: ਟੈਕਸਟ ਅਤੇ ਟੈਕਸਟ-ਫਿਲ-ਕਲਰ: ਪਾਰਦਰਸ਼ੀ।
ਪਹਿਲਾਂ, ਮੈਂ ਟੈਕਸਟ ਦੇ ਪਿੱਛੇ ਇੱਕ ਪਿਛੋਕੜ ਲਾਗੂ ਕਰਦਾ ਹਾਂ. ਇਹ ਇੱਕ ਬਿੱਟਮੈਪ ਜਾਂ ਵੈਕਟਰ ਚਿੱਤਰ ਜਾਂ CSS ਗਰੇਡੀਐਂਟ ਹੋ ਸਕਦਾ ਹੈ। ਕਵਿੱਕ ਡਰਾਅ ਮੈਕਗ੍ਰਾ ਐਪੀਸੋਡ "ਬਾਬਾ ਬੇਟ" ਤੋਂ ਇਸ ਉਦਾਹਰਨ ਲਈ, ਸਿਰਲੇਖ ਪਾਠ ਵਿੱਚ ਹਨੇਰੇ ਤੋਂ ਰੌਸ਼ਨੀ ਤੱਕ ਇੱਕ ਸੂਖਮ ਸਿਖਰ-ਹੇਠਾਂ ਗਰੇਡੀਐਂਟ ਸ਼ਾਮਲ ਹੈ: ਬੈਕਗਰਾਊਂਡ: ਰੇਖਿਕ-ਗਰੇਡੀਐਂਟ(0deg, #667b6a, #1d271a);
ਅੱਗੇ, ਮੈਂ ਉਸ ਬੈਕਗ੍ਰਾਊਂਡ ਨੂੰ ਗਲਾਈਫਸ 'ਤੇ ਕਲਿੱਪ ਕਰਦਾ ਹਾਂ ਅਤੇ ਟੈਕਸਟ ਨੂੰ ਪਾਰਦਰਸ਼ੀ ਬਣਾਉਂਦਾ ਹਾਂ ਤਾਂ ਜੋ ਬੈਕਗ੍ਰਾਊਂਡ ਇਸ ਰਾਹੀਂ ਦਿਖਾਈ ਦੇਵੇ: -ਵੈਬਕਿੱਟ-ਬੈਕਗ੍ਰਾਉਂਡ-ਕਲਿੱਪ: ਟੈਕਸਟ; -ਵੈਬਕਿੱਟ-ਟੈਕਸਟ-ਫਿਲ-ਰੰਗ: ਪਾਰਦਰਸ਼ੀ;
ਸਿਰਫ਼ ਉਨ੍ਹਾਂ ਦੋ ਲਾਈਨਾਂ ਨਾਲ, ਬੈਕਗ੍ਰਾਊਂਡ ਹੁਣ ਟੈਕਸਟ ਦੇ ਪਿੱਛੇ ਨਹੀਂ ਪੇਂਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ; ਇਸ ਦੀ ਬਜਾਏ, ਇਹ ਇਸਦੇ ਅੰਦਰ ਪੇਂਟ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਤਕਨੀਕ ਖਾਸ ਤੌਰ 'ਤੇ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ ਜਦੋਂ ਸਟ੍ਰੋਕ ਅਤੇ ਸ਼ੈਡੋ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। ਇੱਕ ਕਲਿਪਡ ਗਰੇਡੀਐਂਟ ਅੱਖਰ ਨੂੰ ਰੰਗ ਅਤੇ ਟੈਕਸਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਇੱਕ ਸਟ੍ਰੋਕ ਇਸਦੇ ਕਿਨਾਰਿਆਂ ਨੂੰ ਤਿੱਖਾ ਰੱਖਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਪਰਛਾਵਾਂ ਇਸਨੂੰ ਬੈਕਗ੍ਰਾਉਂਡ ਤੋਂ ਉੱਚਾ ਕਰਦਾ ਹੈ। ਇਕੱਠੇ ਮਿਲ ਕੇ, ਉਹ ਥੋੜ੍ਹੇ ਜਿਹੇ CSS ਤੋਂ ਵੱਧ ਕੁਝ ਨਹੀਂ ਵਰਤਦੇ ਹੋਏ ਹੱਥਾਂ ਨਾਲ ਪੇਂਟ ਕੀਤੇ ਟਾਈਟਲ ਕਾਰਡਾਂ ਦੀ ਲੇਅਰਡ ਦਿੱਖ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਂਦੇ ਹਨ। ਹਮੇਸ਼ਾ ਵਾਂਗ, ਕਲਿਪ ਕੀਤੇ ਟੈਕਸਟ ਦੀ ਧਿਆਨ ਨਾਲ ਜਾਂਚ ਕਰੋ, ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਗੁਣ ਕਈ ਵਾਰ ਸ਼ੈਡੋ ਅਤੇ ਰੈਂਡਰਿੰਗ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦੇ ਹਨ। ਲਿਖਤ ਨੂੰ ਵਿਅਕਤੀਗਤ ਅੱਖਰਾਂ ਵਿੱਚ ਵੰਡਣਾ ਕਈ ਵਾਰ ਮੈਂ ਪੂਰੇ ਸ਼ਬਦ ਜਾਂ ਸਿਰਲੇਖ ਨੂੰ ਸਟਾਈਲ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦਾ। ਮੈਂ ਵਿਅਕਤੀਗਤ ਅੱਖਰਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦਾ/ਚਾਹੁੰਦੀ ਹਾਂ — ਇੱਕ ਅੱਖਰ ਨੂੰ ਥਾਂ 'ਤੇ ਧੱਕਣ ਲਈ, ਇੱਕ ਗਲਾਈਫ ਨੂੰ ਵਾਧੂ ਭਾਰ ਦੇਣਾ, ਜਾਂ ਕੁਝ ਅੱਖਰਾਂ ਨੂੰ ਸੁਤੰਤਰ ਰੂਪ ਵਿੱਚ ਐਨੀਮੇਟ ਕਰਨਾ। ਸਾਦੇ HTML ਅਤੇ CSS ਵਿੱਚ, ਅਜਿਹਾ ਕਰਨ ਦਾ ਇੱਕ ਹੀ ਭਰੋਸੇਯੋਗ ਤਰੀਕਾ ਹੈ: ਹਰੇਕ ਅੱਖਰ ਨੂੰ ਇਸਦੇ ਆਪਣੇ ਸਪੈਨ ਐਲੀਮੈਂਟ ਵਿੱਚ ਸਮੇਟਣਾ। ਮੈਂ ਇਹ ਹੱਥੀਂ ਕਰ ਸਕਦਾ/ਸਕਦੀ ਹਾਂ, ਪਰ ਇਹ ਨਾਜ਼ੁਕ, ਸਾਂਭ-ਸੰਭਾਲ ਕਰਨਾ ਔਖਾ ਹੋਵੇਗਾ, ਅਤੇ ਕਾਪੀ ਬਦਲਣ 'ਤੇ ਛੇਤੀ ਹੀ ਟੁੱਟ ਜਾਵੇਗਾ। ਇਸਦੀ ਬਜਾਏ, ਜਦੋਂ ਮੈਨੂੰ ਪ੍ਰਤੀ-ਅੱਖਰ ਨਿਯੰਤਰਣ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ, ਮੈਂ ਇੱਕ ਟੈਕਸਟ-ਸਪਲਿਟਿੰਗ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ ਜਿਵੇਂ ਕਿ splt.js (ਹਾਲਾਂਕਿ ਹੋਰ ਹੱਲ ਉਪਲਬਧ ਹਨ)। ਇਹ ਇੱਕ ਟੈਕਸਟ ਨੋਡ ਲੈਂਦਾ ਹੈ ਅਤੇ ਸ਼ਬਦਾਂ ਜਾਂ ਅੱਖਰਾਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਲਪੇਟਦਾ ਹੈ, ਮੈਨੂੰ ਮੇਰੇ ਮਾਰਕਅਪ ਵਿੱਚ ਗੜਬੜ ਕੀਤੇ ਬਿਨਾਂ ਐਨੀਮੇਟ ਅਤੇ ਸ਼ੈਲੀ ਲਈ ਵਾਧੂ ਹੁੱਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਇੱਕ ਅਜਿਹੀ ਪਹੁੰਚ ਹੈ ਜੋ ਮੇਰੇ HTML ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਅਰਥਪੂਰਨ ਰੱਖਦੀ ਹੈ, ਜਦੋਂ ਕਿ ਮੈਨੂੰ ਵਧੀਆ ਨਿਯੰਤਰਣ ਦਿੰਦੇ ਹੋਏ ਮੈਨੂੰ ਅਸਮਾਨ, ਚਰਿੱਤਰ ਭਰਪੂਰ ਟਾਈਪੋਗ੍ਰਾਫੀ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ ਜੋ ਤੁਸੀਂ ਕਲਾਸਿਕ ਕਾਰਟੂਨ ਟਾਈਟਲ ਕਾਰਡਾਂ ਵਿੱਚ ਦੇਖਦੇ ਹੋ। ਹਾਲਾਂਕਿ, ਇਸ ਪਹੁੰਚ ਦੇ ਨਾਲ ਆਉਂਦਾ ਹੈਪਹੁੰਚਯੋਗਤਾ ਚੇਤਾਵਨੀਆਂ, ਕਿਉਂਕਿ ਜ਼ਿਆਦਾਤਰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਟੈਕਸਟ ਨੋਡਾਂ ਨੂੰ ਕ੍ਰਮ ਵਿੱਚ ਪੜ੍ਹਦੇ ਹਨ। ਇਸ ਲਈ ਇਹ:
ਹਮ ਸਵੀਟ ਹਮ
…ਪੜ੍ਹਦਾ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਉਮੀਦ ਕਰਦੇ ਹੋ: ਹਮ ਸਵੀਟ ਹਮ
ਪਰ ਇਹ:
H u m
…ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੇ ਆਧਾਰ 'ਤੇ ਵੱਖਰੇ ਤਰੀਕੇ ਨਾਲ ਵਿਆਖਿਆ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਕੁਝ ਅੱਖਰਾਂ ਨੂੰ ਜੋੜਦੇ ਹਨ ਅਤੇ ਸ਼ਬਦਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪੜ੍ਹਦੇ ਹਨ। ਦੂਸਰੇ ਅੱਖਰਾਂ ਦੇ ਵਿਚਕਾਰ ਵਿਰਾਮ ਦੇ ਸਕਦੇ ਹਨ, ਜੋ ਕਿ ਸਭ ਤੋਂ ਮਾੜੀ ਸਥਿਤੀ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਲੱਗ ਸਕਦਾ ਹੈ: “H…” “U…” “M…”
ਅਫ਼ਸੋਸ ਦੀ ਗੱਲ ਹੈ ਕਿ, ਕੁਝ ਵੰਡਣ ਵਾਲੇ ਹੱਲ ਹਮੇਸ਼ਾ ਪਹੁੰਚਯੋਗ ਨਤੀਜੇ ਨਹੀਂ ਦਿੰਦੇ ਹਨ, ਇਸਲਈ ਮੈਂ ਆਪਣਾ ਖੁਦ ਦਾ ਟੈਕਸਟ ਸਪਲਿਟਰ, splinter.js ਲਿਖਿਆ ਹੈ, ਜੋ ਇਸ ਸਮੇਂ ਬੀਟਾ ਵਿੱਚ ਹੈ। ਵਿਅਕਤੀਗਤ ਅੱਖਰਾਂ ਨੂੰ ਬਦਲਣਾ ਮੇਰੇ ਟੂਨ ਟੈਕਸਟ ਸਪਲਿਟਰ ਨੂੰ ਐਕਟੀਵੇਟ ਕਰਨ ਲਈ, ਮੈਂ ਉਸ ਤੱਤ ਵਿੱਚ ਇੱਕ ਡੇਟਾ- ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜਦਾ ਹਾਂ ਜਿਸਨੂੰ ਮੈਂ ਵੰਡਣਾ ਚਾਹੁੰਦਾ ਹਾਂ:
ਹਮ ਸਵੀਟ ਹਮ
ਪਹਿਲਾਂ, ਮੇਰੀ ਸਕ੍ਰਿਪਟ ਹਰੇਕ ਸ਼ਬਦ ਨੂੰ ਵਿਅਕਤੀਗਤ ਅੱਖਰਾਂ ਵਿੱਚ ਵੱਖ ਕਰਦੀ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕਲਾਸ ਅਤੇ ARIA ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਨਾਲ ਇੱਕ ਸਪੈਨ ਐਲੀਮੈਂਟ ਵਿੱਚ ਲਪੇਟਦੀ ਹੈ:
ਸਕ੍ਰਿਪਟ ਫਿਰ ਸਪਲਿਟ ਐਲੀਮੈਂਟ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਮਗਰੀ ਲੈਂਦੀ ਹੈ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਇਸਨੂੰ aria ਗੁਣ ਵਜੋਂ ਜੋੜਦੀ ਹੈ:
ਉਹਨਾਂ ਕਲਾਸ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੇ ਨਾਲ, ਮੈਂ ਫਿਰ ਵਿਅਕਤੀਗਤ ਅੱਖਰਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰ ਸਕਦਾ ਹਾਂ ਜਿਵੇਂ ਮੈਂ ਚੁਣਦਾ ਹਾਂ।
ਉਦਾਹਰਨ ਲਈ, "ਹਮ ਸਵੀਟ ਹਮ" ਲਈ, ਮੈਂ ਦੁਹਰਾਉਣਾ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਕਿਵੇਂ ਇਸਦੇ ਅੱਖਰ ਬੇਸਲਾਈਨ ਤੋਂ ਦੂਰ ਹੁੰਦੇ ਹਨ। ਮੇਰੇ ਟੂਨ ਟੈਕਸਟ ਸਪਲਿਟਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਮੈਂ ਅਰਧ-ਰੈਂਡਮ ਦਿੱਖ ਬਣਾਉਣ ਲਈ ਕਈ :nth-child ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਚਾਰ ਵੱਖ-ਵੱਖ ਅਨੁਵਾਦ ਮੁੱਲਾਂ ਨੂੰ ਲਾਗੂ ਕੀਤਾ: /* 4ਵੀਂ, 8ਵੀਂ, 12ਵੀਂ... */ .toon-char:nth-child(4n) { ਅਨੁਵਾਦ: 0 -8px; } /* ਪਹਿਲੀ, 5ਵੀਂ, 9ਵੀਂ... */ .toon-char:nth-child(4n+1) { ਅਨੁਵਾਦ: 0 -4px; } /* ਦੂਜਾ, 6ਵਾਂ, 10ਵਾਂ... */ .toon-char:nth-child(4n+2) { ਅਨੁਵਾਦ: 0 4px; } /* ਤੀਜਾ, 7ਵਾਂ, 11ਵਾਂ... */ .toon-char:nth-child(4n+3) { ਅਨੁਵਾਦ: 0 8px; }
ਪਰ ਅਨੁਵਾਦ ਕੇਵਲ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਮੈਂ ਆਪਣੇ ਟੂਨ ਟੈਕਸਟ ਨੂੰ ਬਦਲਣ ਲਈ ਵਰਤ ਸਕਦਾ ਹਾਂ।
ਮੈਂ ਉਹਨਾਂ ਵਿਅਕਤੀਗਤ ਅੱਖਰਾਂ ਨੂੰ ਹੋਰ ਵੀ ਅਰਾਜਕ ਦਿੱਖ ਲਈ ਘੁੰਮਾ ਸਕਦਾ ਹਾਂ: /* 4ਵੀਂ, 8ਵੀਂ, 12ਵੀਂ... */ .toon-line .toon-char:nth-child(4n) { ਘੁੰਮਾਓ: -4deg; } /* ਪਹਿਲੀ, 5ਵੀਂ, 9ਵੀਂ... */ .toon-char:nth-child(4n+1) { ਘੁੰਮਾਓ: -8deg; } /* ਦੂਜਾ, 6ਵਾਂ, 10ਵਾਂ... */ .toon-char:nth-child(4n+2) { ਘੁੰਮਾਓ: 4deg; } /* ਤੀਜਾ, 7ਵਾਂ, 11ਵਾਂ... */ .toon-char:nth-child(4n+3) { ਘੁੰਮਾਓ: 8deg; }
ਪਰ ਅਨੁਵਾਦ ਕੇਵਲ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਮੈਂ ਆਪਣੇ ਟੂਨ ਟੈਕਸਟ ਨੂੰ ਬਦਲਣ ਲਈ ਵਰਤ ਸਕਦਾ ਹਾਂ। ਮੈਂ ਉਹਨਾਂ ਵਿਅਕਤੀਗਤ ਅੱਖਰਾਂ ਨੂੰ ਹੋਰ ਵੀ ਅਰਾਜਕ ਦਿੱਖ ਲਈ ਘੁੰਮਾ ਸਕਦਾ ਹਾਂ: /* 4ਵੀਂ, 8ਵੀਂ, 12ਵੀਂ... */ .toon-line .toon-char:nth-child(4n) { ਘੁੰਮਾਓ: -4 ਡਿਗਰੀ; }
/* ਪਹਿਲੀ, 5ਵੀਂ, 9ਵੀਂ... */ .toon-char:nth-child(4n+1) { ਘੁੰਮਾਓ: -8 ਡਿਗਰੀ; }
/* ਦੂਜਾ, 6ਵਾਂ, 10ਵਾਂ... */ .toon-char:nth-child(4n+2) { ਘੁੰਮਾਓ: 4 ਡਿਗਰੀ; }
/* ਤੀਜਾ, 7ਵਾਂ, 11ਵਾਂ... */ .toon-char:nth-child(4n+3) { ਘੁੰਮਾਓ: 8 ਡਿਗਰੀ; }
ਅਤੇ, ਬੇਸ਼ੱਕ, ਮੈਂ ਉਹਨਾਂ ਪਾਤਰਾਂ ਨੂੰ ਹਿਲਾਉਣ ਲਈ ਐਨੀਮੇਸ਼ਨ ਜੋੜ ਸਕਦਾ ਹਾਂ ਅਤੇ ਮੇਰੇ ਟੂਨ ਟੈਕਸਟ ਸ਼ੈਲੀ ਦੇ ਸਿਰਲੇਖਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆ ਸਕਦਾ ਹਾਂ। ਪਹਿਲਾਂ, ਮੈਂ ਇੱਕ ਕੀਫ੍ਰੇਮ ਐਨੀਮੇਸ਼ਨ ਬਣਾਇਆ ਜੋ ਅੱਖਰਾਂ ਨੂੰ ਘੁੰਮਾਉਂਦਾ ਹੈ:
@keyframes ਹਿੱਲਣਾ { 0%, 100% { ਪਰਿਵਰਤਨ: rotate(var(--base-rotate, 0deg)); } 25% { ਪਰਿਵਰਤਨ: ਘੁੰਮਾਓ(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { ਪਰਿਵਰਤਨ: ਘੁੰਮਾਓ(calc(var(--ਬੇਸ-ਰੋਟੇਟ, 0deg) - 2deg)); } 75% { ਪਰਿਵਰਤਨ: ਘੁੰਮਾਓ(calc(var(--ਬੇਸ-ਰੋਟੇਟ, 0deg) + 1deg)); } }
ਇਸ ਨੂੰ ਮੇਰੇ ਟੂਨ ਟੈਕਸਟ ਸਪਲਿਟਰ ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਸਪੈਨ ਐਲੀਮੈਂਟਸ 'ਤੇ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ: .toon-char { ਐਨੀਮੇਸ਼ਨ: jiggle 3s ਅਨੰਤ ਆਸਾਨੀ-ਇਨ-ਆਊਟ; transform-origin: ਕੇਂਦਰ ਥੱਲੇ; }
ਅਤੇ ਅੰਤ ਵਿੱਚ, ਰੋਟੇਸ਼ਨ ਦੀ ਮਾਤਰਾ ਨੂੰ ਸੈੱਟ ਕਰਨਾ ਅਤੇ ਹਰੇਕ ਅੱਖਰ ਨੂੰ ਹਿੱਲਣਾ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਦੇਰੀ: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { ਐਨੀਮੇਸ਼ਨ-ਦੇਰੀ: 0.1s; } .toon-char:nth-child(4n+1) { ਐਨੀਮੇਸ਼ਨ-ਦੇਰੀ: 0.3s; } .toon-char:nth-child(4n+2) { ਐਨੀਮੇਸ਼ਨ-ਦੇਰੀ: 0.5s; } .toon-char:nth-child(4n+3) { ਐਨੀਮੇਸ਼ਨ-ਦੇਰੀ: 0.7s; }
ਇੱਕ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਇੱਕ ਫਰੇਮ ਕਾਰਟੂਨ ਸਿਰਲੇਖ ਦੇ ਕਲਾਕਾਰਾਂ ਕੋਲ ਇੱਕ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਇੱਕ ਫਰੇਮ ਸੀ, ਅਤੇ ਉਹਨਾਂ ਦੀ ਟਾਈਪੋਗ੍ਰਾਫੀ ਉਨੀ ਹੀ ਮਹੱਤਵਪੂਰਨ ਸੀ ਜਿੰਨੀ ਉਹਨਾਂ ਦੁਆਰਾ ਪੇਂਟ ਕੀਤੀ ਗਈ ਕਲਾਕਾਰੀ। ਵੈੱਬ 'ਤੇ ਵੀ ਇਹੀ ਸੱਚ ਹੈ। ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਤਿਆਰ ਕੀਤਾ ਸਿਰਲੇਖ ਜਾਂ ਹੀਰੋਖੇਤਰ ਨੂੰ ਸਪਸ਼ਟਤਾ, ਚਰਿੱਤਰ ਅਤੇ ਵਿਸ਼ਵਾਸ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ — ਸਿਰਫ਼ ਇੱਕ ਫਿੱਕੀ ਪੂਰੀ-ਚੌੜਾਈ ਵਾਲੀ ਬੈਕਗ੍ਰਾਊਂਡ ਚਿੱਤਰ ਨਹੀਂ। ਕੁਝ ਸਾਵਧਾਨੀ ਨਾਲ ਚੁਣੀਆਂ ਗਈਆਂ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ — ਸ਼ੈਡੋਜ਼, ਸਟ੍ਰੋਕ, ਕਲਿੱਪ ਕੀਤੇ ਬੈਕਗ੍ਰਾਊਂਡ, ਅਤੇ ਕੁਝ ਸੰਜਮਿਤ ਐਨੀਮੇਸ਼ਨ — ਨਾਲ ਅਸੀਂ ਉਸੇ ਪ੍ਰਭਾਵ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾ ਸਕਦੇ ਹਾਂ। ਮੈਨੂੰ ਟੂਨ ਟੈਕਸਟ ਇਸ ਲਈ ਨਹੀਂ ਕਿਉਂਕਿ ਮੈਂ ਉਦਾਸੀਨ ਹਾਂ, ਪਰ ਕਿਉਂਕਿ ਇਸਦਾ ਡਿਜ਼ਾਈਨ ਜਾਣਬੁੱਝ ਕੇ ਹੈ। ਜਾਣਬੁੱਝ ਕੇ ਚੋਣਾਂ ਕਰੋ, ਅਤੇ ਥੋੜੀ ਜਿਹੀ ਟੂਨ ਟੈਕਸਟ ਟਾਈਪੋਗ੍ਰਾਫੀ ਨੂੰ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਪੰਚ ਜੋੜਨ ਦਿਓ।
