CSS ਬਾਕਸ ਸ਼ੈਡੋ ਜਨਰੇਟਰ ਦੀ ਵਰਤੋਂ ਅਤੇ ਕਾਰਜਪ੍ਰਣਾਲੀ
ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਐਲੀਮੈਂਟਸ ਨੂੰ ਡੂੰਘਾਈ ਅਤੇ ਅਸਲੀਅਤ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ box-shadow ਇੱਕ ਮਹੱਤਵਪੂਰਨ CSS ਪ੍ਰਾਪਰਟੀ ਹੈ। ਇਹ ਟੂਲ ਵੱਖ-ਵੱਖ ਸਲਾਈਡਰਾਂ ਦੀ ਮਦਦ ਨਾਲ ਕਸਟਮ ਬਾਕਸ ਸ਼ੈਡੋ ਬਣਾਉਣ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਮਲਟੀਪਲ ਸ਼ੈਡੋ ਲੇਅਰਾਂ ਨੂੰ ਇੱਕ ਦੂਜੇ ਦੇ ਉੱਪਰ ਸਟੈਕ (stack) ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਤਾਂ ਜੋ ਗੁੰਝਲਦਾਰ ਅਤੇ ਯਥਾਰਥਵਾਦੀ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕੀਤੇ ਜਾ ਸਕਣ। ਡਿਜ਼ਾਈਨ ਤਿਆਰ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਉਪਭੋਗਤਾ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਵਰਤਣ ਲਈ ਤਿਆਰ CSS ਕੋਡ ਨੂੰ ਤੁਰੰਤ ਕਾਪੀ ਕਰ ਸਕਦੇ ਹਨ।
ਇਸ ਟੂਲ ਵਿੱਚ ਪੰਜ ਲੇਅਰਾਂ ਪਹਿਲਾਂ ਤੋਂ ਰੈਂਡਰ ਹੁੰਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਵਿੱਚੋਂ ਪਹਿਲੀ ਲੇਅਰ ਦੇ ਡਿਫਾਲਟ ਮੁੱਲ 0 8 24 -4 ਅਤੇ 18% ਟ੍ਰਾਂਸਪੇਰੈਂਟ ਬਲੈਕ (transparent black) ਹੁੰਦੇ ਹਨ, ਜਦੋਂ ਕਿ ਬਾਕੀ ਚਾਰ ਲੇਅਰਾਂ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਲੁਕੀਆਂ ਹੁੰਦੀਆਂ ਹਨ।
ਸ਼ੈਡੋ ਡਿਜ਼ਾਈਨ ਦੇ ਮੁੱਖ ਪੈਰਾਮੀਟਰ ਅਤੇ ਇਨਪੁਟਸ
ਇੱਕ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਪਰਛਾਵਾਂ ਬਣਾਉਣ ਲਈ ਕਈ ਤਰ੍ਹਾਂ ਦੇ ਨਿਯੰਤਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜੋ CSS ਆਉਟਪੁੱਟ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਅਪਡੇਟ ਕਰਦੇ ਹਨ:
- ਹਰੀਜੱਟਲ ਆਫਸੈੱਟ: ਇਹ ਸਲਾਈਡਰ ਪਰਛਾਵੇਂ ਨੂੰ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਪਾਸੇ ਲੈ ਜਾਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਸਦੀ ਸੀਮਾ -50px ਤੋਂ 50px ਤੱਕ ਹੁੰਦੀ ਹੈ।
- ਵਰਟੀਕਲ ਆਫਸੈੱਟ: ਇਹ ਸਲਾਈਡਰ ਪਰਛਾਵੇਂ ਨੂੰ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਵੱਲ ਲੈ ਜਾਂਦਾ ਹੈ। ਇਸਦੀ ਸੀਮਾ ਵੀ -50px ਤੋਂ 50px ਤੱਕ ਨਿਰਧਾਰਤ ਹੈ।
- ਬਲਰ (Blur): ਇਹ ਪਰਛਾਵੇਂ ਦੇ ਕਿਨਾਰਿਆਂ ਨੂੰ ਨਰਮ ਅਤੇ ਧੁੰਦਲਾ ਕਰਦਾ ਹੈ। ਇਸਦੀ ਰੇਂਜ 0px ਤੋਂ 100px ਤੱਕ ਹੁੰਦੀ ਹੈ।
- ਸਪ੍ਰੈਡ: ਇਹ ਬਲਰ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਪਰਛਾਵੇਂ ਦੇ ਆਕਾਰ ਨੂੰ ਵਧਾਉਣ ਜਾਂ ਘਟਾਉਣ ਦਾ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਸਦੀ ਸੀਮਾ -50px ਤੋਂ 50px ਤੱਕ ਹੈ। ਇੱਕ ਨੈਗੇਟਿਵ ਸਪ੍ਰੈਡ ਮੁੱਲ ਪਰਛਾਵੇਂ ਨੂੰ ਅੰਦਰ ਵੱਲ ਖਿੱਚਦਾ ਹੈ।
- ਪਰਛਾਵੇਂ ਦਾ ਰੰਗ: ਇੱਕ ਕਲਰ ਪਿਕਰ ਜਿਸ ਰਾਹੀਂ ਪਰਛਾਵੇਂ ਲਈ ਲੋੜੀਂਦਾ ਰੰਗ ਚੁਣਿਆ ਜਾਂਦਾ ਹੈ।
- ਧੁੰਦਲਾਪਨ (Opacity): ਇਹ ਸਲਾਈਡਰ ਪਰਛਾਵੇਂ ਦੀ ਪਾਰਦਰਸ਼ਤਾ (transparency) ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
- ਅੰਦਰੂਨੀ ਪਰਛਾਵਾਂ (Inset shadow): ਇਹ ਇੱਕ ਟੌਗਲ ਬਟਨ ਹੈ ਜੋ ਪਰਛਾਵੇਂ ਨੂੰ ਐਲੀਮੈਂਟ ਦੇ ਬਾਹਰ ਦਿਖਾਉਣ ਦੀ ਬਜਾਏ ਅੰਦਰ ਵੱਲ ਮੋੜ ਦਿੰਦਾ ਹੈ।
ਲੇਅਰ ਪ੍ਰਬੰਧਨ ਅਤੇ ਮਲਟੀਪਲ ਸ਼ੈਡੋ ਸਟੈਕਿੰਗ
ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਵਧੇਰੇ ਡੂੰਘਾਈ ਅਤੇ ਯਥਾਰਥਵਾਦੀ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਅਕਸਰ ਇੱਕ ਤੋਂ ਵੱਧ ਸ਼ੈਡੋ ਲੇਅਰਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
- ਲੇਅਰ ਜੋੜੋ: ਇਸ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਡਿਫਾਲਟ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਇੱਕ ਨਵੀਂ ਸ਼ੈਡੋ ਲੇਅਰ ਬਣ ਜਾਂਦੀ ਹੈ।
- ਲੇਅਰ ਹਟਾਓ: ਇਹ ਬਟਨ ਚੁਣੀ ਹੋਈ ਸ਼ੈਡੋ ਲੇਅਰ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮਿਟਾ ਦਿੰਦਾ ਹੈ।
ਜਦੋਂ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਇੱਕ ਤੋਂ ਵੱਧ ਲੇਅਰਾਂ ਮੌਜੂਦ ਹੁੰਦੀਆਂ ਹਨ, ਤਾਂ ਜਨਰੇਟ ਕੀਤੇ ਗਏ CSS ਕੋਡ ਵਿੱਚ ਸਾਰੀਆਂ ਲੇਅਰਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਕੌਮੇ (comma-separated values) ਨਾਲ ਵੱਖ ਕਰਕੇ ਪੇਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ: ਬਾਹਰੀ ਬਨਾਮ ਅੰਦਰੂਨੀ ਪਰਛਾਵਾਂ
ਪਰਛਾਵੇਂ ਦੀ ਸਥਿਤੀ ਅਤੇ ਦਿਸ਼ਾ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ ਕਿ ਕੋਈ ਐਲੀਮੈਂਟ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:
| ਪਰਛਾਵੇਂ ਦੀ ਕਿਸਮ | ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ | ਮੁੱਖ ਵਰਤੋਂ |
|---|---|---|
| ਸਧਾਰਨ (Normal Shadow) | ਐਲੀਮੈਂਟ ਦੇ ਬਾਹਰ ਪੈਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਇਹ ਪੇਜ ਤੋਂ ਉੱਭਰਿਆ ਹੋਇਆ ਜਾਪਦਾ ਹੈ। | ਉੱਭਰੇ ਹੋਏ ਕਾਰਡ, ਬਟਨ ਅਤੇ ਮੀਨੂ |
| ਅੰਦਰੂਨੀ (Inset Shadow) | ਪਰਛਾਵੇਂ ਨੂੰ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ ਵੱਲ ਮੋੜ ਦਿੰਦਾ ਹੈ। | ਦੱਬੇ ਹੋਏ ਇਨਪੁਟਸ (sunken inputs) ਜਾਂ ਦਬਾਏ ਗਏ ਬਟਨ |
ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਅਤੇ ਨਿੱਜਤਾ
ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡੀ ਨਿੱਜਤਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦੀ ਹੈ। ਹਰ ਪਰਛਾਵਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)
offset, blur, ਅਤੇ spread ਅਸਲ ਵਿੱਚ ਕੀ ਕੰਟਰੋਲ ਕਰਦੇ ਹਨ?
Offset ਪਰਛਾਵੇਂ ਨੂੰ ਖੱਬੇ/ਸੱਜੇ ਅਤੇ ਉੱਪਰ/ਹੇਠਾਂ ਲੈ ਜਾਂਦਾ ਹੈ, blur ਇਸਦੇ ਕਿਨਾਰਿਆਂ ਨੂੰ ਨਰਮ ਕਰਦਾ ਹੈ, ਅਤੇ spread ਬਲਰ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਸਨੂੰ ਵਧਾਉਂਦਾ ਜਾਂ ਘਟਾਉਂਦਾ ਹੈ। ਇੱਕ ਨੈਗੇਟਿਵ ਸਪ੍ਰੈਡ ਪਰਛਾਵੇਂ ਨੂੰ ਅੰਦਰ ਵੱਲ ਖਿੱਚਦਾ ਹੈ, ਜੋ ਕਿ ਇੱਕ ਸੰਘਣੇ, ਨਜ਼ਦੀਕੀ ਪਰਛਾਵੇਂ ਲਈ ਲਾਭਦਾਇਕ ਹੈ।
inset ਵਿਕਲਪ ਕੀ ਕਰਦਾ ਹੈ?
ਇੱਕ ਆਮ ਪਰਛਾਵਾਂ ਐਲੀਮੈਂਟ ਦੇ ਬਾਹਰ ਪੈਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਕਿਸੇ ਉੱਭਰੇ ਹੋਏ ਕਾਰਡ ਦੇ ਪਿੱਛੇ ਦੀ ਰੋਸ਼ਨੀ। Inset ਇਸਨੂੰ ਅੰਦਰ ਵੱਲ ਮੋੜ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਐਲੀਮੈਂਟ ਅੰਦਰ ਦੱਬਿਆ ਹੋਇਆ ਜਾਪਦਾ ਹੈ — ਇਹ ਦੱਬੇ ਹੋਏ ਇਨਪੁਟਸ ਜਾਂ ਦਬਾਏ ਗਏ ਬਟਨਾਂ ਲਈ ਬਹੁਤ ਉਪਯੋਗੀ ਹੈ।
ਇੱਕ ਤੋਂ ਵੱਧ ਸ਼ੈਡੋ ਲੇਅਰਾਂ ਨੂੰ ਕਿਉਂ ਸਟੈਕ ਕਰੀਏ?
ਇੱਕ ਸਿੰਗਲ ਪਰਛਾਵਾਂ ਇੱਕ ਨਿਸ਼ਚਿਤ ਆਕਾਰ ਤੋਂ ਬਾਅਦ ਫਲੈਟ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਅਸਲ ਉਚਾਈ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਸੰਘਣੇ, ਗੂੜ੍ਹੇ ਪਰਛਾਵੇਂ ਨੂੰ ਇੱਕ ਨਰਮ, ਵਧੇਰੇ ਫੈਲੇ ਹੋਏ ਪਰਛਾਵੇਂ ਨਾਲ ਜੋੜਦੀ ਹੈ — ਇਹ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਦੂਜੀ ਲੇਅਰ ਜੋੜੋ ਅਤੇ ਹਰੇਕ ਨੂੰ ਸੁਤੰਤਰ ਰੂਪ ਵਿੱਚ ਟਿਊਨ ਕਰੋ।