ਬਾਰਡਰ ਰੇਡੀਅਸ ਜਨਰੇਟਰ

CSS ਬਾਰਡਰ ਰੇਡੀਅਸ ਨੂੰ ਸਮਝਣਾ

CSS ਵਿੱਚ border-radius ਪ੍ਰਾਪਰਟੀ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਦੇ ਅੰਦਰੂਨੀ ਤੱਤਾਂ ਦੇ ਕੋਨਿਆਂ ਨੂੰ ਗੋਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਟੂਲ ਡਿਜ਼ਾਈਨਰਾਂ ਅਤੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਕੋਨਿਆਂ ਦੀ ਗੋਲਾਈ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਅਤੇ ਤੁਰੰਤ CSS ਕੋਡ ਤਿਆਰ ਕਰਨ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਜਦੋਂ ਅਸੀਂ ਕਿਸੇ ਬਾਕਸ ਦੇ ਕੋਨਿਆਂ ਨੂੰ ਮੋੜਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਉਸ ਕੋਨੇ 'ਤੇ ਇੱਕ ਅਦਿੱਖ ਚੱਕਰ ਜਾਂ ਅੰਡਾਕਾਰ ਦੀ ਕਲਪਨਾ ਕਰ ਰਹੇ ਹੁੰਦੇ ਹਾਂ, ਜਿਸਦਾ ਰੇਡੀਅਸ (ਅਰਧ-ਵਿਆਸ) ਕੋਨੇ ਦੀ ਗੋਲਾਈ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ।

ਇਸ ਟੂਲ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਲਾਈਡਰ ਵੈਲਯੂ 24 ਹੁੰਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਸ਼ੁਰੂਆਤ ਵਿੱਚ border-radius: 24px; ਕੋਡ ਤਿਆਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਮੁੱਲ ਬਦਲ ਕੇ ਤੁਸੀਂ ਆਪਣੀ ਪਸੰਦ ਅਨੁਸਾਰ ਕੋਨਿਆਂ ਨੂੰ ਤਿੱਖਾ ਜਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਗੋਲ ਕਰ ਸਕਦੇ ਹੋ।

ਪਿਕਸਲ (px) ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ (%) ਯੂਨਿਟਾਂ ਵਿੱਚ ਅੰਤਰ

ਬਾਰਡਰ ਰੇਡੀਅਸ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਦੋ ਮੁੱਖ ਯੂਨਿਟਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜੋ ਕਿ ਡਿਜ਼ਾਈਨ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੀਆਂ ਹਨ:

• ਪਿਕਸਲ (px): ਪਿਕਸਲ ਯੂਨਿਟ ਵਿੱਚ ਕੋਨਾ ਇੱਕ ਨਿਸ਼ਚਿਤ ਮਾਤਰਾ ਵਿੱਚ ਗੋਲ ਹੁੰਦਾ ਹੈ। ਬਾਕਸ ਦਾ ਆਕਾਰ ਚਾਹੇ ਜੋ ਵੀ ਹੋਵੇ, ਕੋਨੇ ਦੀ ਗੋਲਾਈ ਸਥਿਰ ਰਹਿੰਦੀ ਹੈ।
• ਪ੍ਰਤੀਸ਼ਤ (%): ਪ੍ਰਤੀਸ਼ਤ ਯੂਨਿਟ ਵਿੱਚ ਕੋਨੇ ਦੀ ਗੋਲਾਈ ਬਾਕਸ ਦੇ ਕੁੱਲ ਆਕਾਰ ਦੇ ਅਨੁਪਾਤ ਵਿੱਚ ਨਿਰਧਾਰਤ ਹੁੰਦੀ ਹੈ। ਇਸ ਵਿੱਚ ਹਰੀਜੱਟਲ ਪ੍ਰਤੀਸ਼ਤ ਬਾਕਸ ਦੀ ਚੌੜਾਈ (width) ਦੇ ਅਨੁਸਾਰ ਅਤੇ ਵਰਟੀਕਲ ਪ੍ਰਤੀਸ਼ਤ ਬਾਕਸ ਦੀ ਉਚਾਈ (height) ਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦੀ ਹੈ। ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।

ਸਿੰਗਲ ਰੇਡੀਅਸ ਅਤੇ ਐਡਵਾਂਸਡ ਅੰਡਾਕਾਰ (Elliptical) ਸ਼ੇਪਸ

ਜਦੋਂ ਅੰਡਾਕਾਰ ਮੋਡ ਬੰਦ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਹਰ ਕੋਨਾ ਇੱਕ ਸਿੰਗਲ ਰੇਡੀਅਸ ਵਾਲਾ ਚੌਥਾਈ-ਚੱਕਰ ਹੁੰਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਕੋਨੇ ਦੀ ਹਰੀਜੱਟਲ ਅਤੇ ਵਰਟੀਕਲ ਗੋਲਾਈ ਬਰਾਬਰ ਹੁੰਦੀ ਹੈ।

ਜਦੋਂ "ਅੰਡਾਕਾਰ ਕੋਨੇ" (elliptical mode) ਨੂੰ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਹਰੇਕ ਕੋਨੇ ਨੂੰ ਇੱਕ ਵੱਖਰਾ ਹਰੀਜੱਟਲ ਅਤੇ ਵਰਟੀਕਲ ਰੇਡੀਅਸ ਮਿਲਦਾ ਹੈ। ਇਸ ਨਾਲ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਵਧੇਰੇ ਨਰਮ ਅਤੇ ਆਰਗੈਨਿਕ "ਬਲੌਬ" (blob) ਆਕਾਰ ਬਣਾਉਣ ਦੀ ਆਜ਼ਾਦੀ ਮਿਲਦੀ ਹੈ। ਜਦੋਂ ਇਹ ਮੋਡ ਚਾਲੂ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਜਨਰੇਟਰ CSS ਵਿੱਚ ਦੋ-ਮੁੱਲ ਵਾਲਾ ਸਲੈਸ਼ (/) ਫਾਰਮੈਟ ਲਿਖਦਾ ਹੈ। ਜਦੋਂ ਕੋਨੇ ਦੁਬਾਰਾ ਆਮ ਵਾਂਗ ਗੋਲ ਹੋ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਇਹ ਆਪਣੇ ਆਪ ਛੋਟੇ ਫਾਰਮੈਟ 'ਤੇ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ।

ਸੰਪੂਰਨ ਚੱਕਰ ਅਤੇ ਪਿਲ-ਆਕਾਰ ਬਣਾਉਣ ਦੀ ਤਕਨੀਕ

ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਅਕਸਰ ਖਾਸ ਆਕਾਰਾਂ ਜਿਵੇਂ ਕਿ ਚੱਕਰ ਜਾਂ ਪਿਲ-ਆਕਾਰ (ਗੋਲੀਆਂ ਵਰਗੇ ਬਟਨ) ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਹਨਾਂ ਨੂੰ ਹੇਠ ਲਿਖੇ ਤਰੀਕਿਆਂ ਨਾਲ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

1. ਸੰਪੂਰਨ ਚੱਕਰ (Perfect Circle): ਇੱਕ ਵਰਗ (square) ਐਲੀਮੈਂਟ ਨੂੰ ਪੂਰਨ ਚੱਕਰ ਵਿੱਚ ਬਦਲਣ ਲਈ, ਕੋਨਿਆਂ ਨੂੰ ਲਿੰਕ ਕਰੋ, ਯੂਨਿਟ ਨੂੰ ਪ੍ਰਤੀਸ਼ਤ (%) 'ਤੇ ਸਵਿਚ ਕਰੋ ਅਤੇ ਸਲਾਈਡਰ ਨੂੰ 50% 'ਤੇ ਸੈੱਟ ਕਰੋ।
2. ਪਿਲ-ਆਕਾਰ (Pill Shape): ਇੱਕ ਪਿਲ-ਆਕਾਰ ਦਾ ਬਟਨ ਬਣਾਉਣ ਲਈ, ਯੂਨਿਟ ਨੂੰ ਪਿਕਸਲ (px) ਵਿੱਚ ਰੱਖੋ ਅਤੇ ਕਿਸੇ ਵੀ ਕੋਨੇ ਦੇ ਸਲਾਈਡਰ ਨੂੰ ਖਿੱਚ ਕੇ ਬਟਨ ਦੀ ਕੁੱਲ ਉਚਾਈ ਦੇ ਅੱਧੇ ਹਿੱਸੇ ਤੋਂ ਅੱਗੇ ਲੈ ਜਾਓ। ਇਸ ਨਾਲ ਬਟਨ ਦੀ ਚੌੜਾਈ ਚਾਹੇ ਜੋ ਵੀ ਹੋਵੇ, ਉਸਦੇ ਕਿਨਾਰੇ ਹਮੇਸ਼ਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਗੋਲ ਰਹਿਣਗੇ।

ਟੂਲ ਦੇ ਇਨਪੁਟਸ ਅਤੇ ਕੰਟਰੋਲ ਵਿਕਲਪ

ਇਹ ਜਨਰੇਟਰ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਵਿੱਚ ਕਈ ਤਰ੍ਹਾਂ ਦੇ ਨਿਯੰਤਰਣ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:

• ਸਲਾਈਡਰ: ਕੋਨਿਆਂ ਦੀ ਗੋਲਾਈ ਨੂੰ 0 ਤੋਂ 100 ਦੀ ਰੇਂਜ ਵਿੱਚ ਐਡਜਸਟ ਕਰਨ ਲਈ ਸਲਾਈਡਰ ਦਿੱਤੇ ਗਏ ਹਨ।
  • ਜਦੋਂ "ਸਾਰੇ ਕੋਨਿਆਂ ਨੂੰ ਲਿੰਕ ਕਰੋ" ਟੌਗਲ ਚਾਲੂ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਇੱਕ ਸਿੰਗਲ ਸਲਾਈਡਰ "ਸਾਰੇ ਕੋਨੇ" ਸਾਰੇ ਚਾਰ ਕੋਨਿਆਂ ਨੂੰ ਇੱਕੋ ਸਮੇਂ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ।
  • ਜਦੋਂ ਕੋਨੇ ਅਨ-ਲਿੰਕ ਹੁੰਦੇ ਹਨ, ਤਾਂ ਚਾਰ ਵੱਖ-ਵੱਖ ਸਲਾਈਡਰ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ: "ਉੱਪਰ ਖੱਬੇ", "ਉੱਪਰ ਸੱਜੇ", "ਹੇਠਾਂ ਸੱਜੇ", ਅਤੇ "ਹੇਠਾਂ ਖੱਬੇ"। ਇਹ ਸਲਾਈਡਰ ਕਲਾਕਵਾਈਜ਼ (ਸੱਜੇ ਹੱਥ) ਦਿਸ਼ਾ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹਨ।
  • ਅੰਡਾਕਾਰ ਮੋਡ ਵਿੱਚ, ਹਰੇਕ ਕੋਨੇ ਲਈ "ਹਰੀਜੱਟਲ" ਅਤੇ "ਵਰਟੀਕਲ" ਸਲਾਈਡਰ ਉਪਲਬਧ ਹੋ ਜਾਂਦੇ ਹਨ।
• ਯੂਨਿਟ ਸਿਲੈਕਟਰ: "px" ਅਤੇ "%" ਵਿਚਕਾਰ ਸਵਿਚ ਕਰਨ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ।
• ਪ੍ਰੀਸੈੱਟ ਬਟਨ: ਤੁਰੰਤ ਡਿਜ਼ਾਈਨ ਲਈ ਪੰਜ ਬਟਨ ਉਪਲਬਧ ਹਨ:
  • "ਤਿੱਖਾ"
  • "ਗੋਲ"
  • "ਚੱਕਰ" - ਇਹ ਸਾਰੇ ਕੋਨਿਆਂ ਨੂੰ 50% 'ਤੇ ਸੈੱਟ ਕਰਦਾ ਹੈ
  • "ਬਲੌਬ" (Blob)
  • "ਪੱਤਾ" (Leaf)

ਆਉਟਪੁੱਟ ਅਤੇ ਕੋਡ ਦੀ ਵਰਤੋਂ

ਟੂਲ ਵਿੱਚ ਕੀਤੇ ਗਏ ਬਦਲਾਅ ਤੁਰੰਤ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ:

• ਪ੍ਰੀਵਿਊ: ਇਹ ਬਾਕਸ ਦੇ ਉੱਪਰ ਲਾਗੂ ਕੀਤੇ ਬਾਰਡਰ ਰੇਡੀਅਸ ਦਾ ਇੱਕ ਲਾਈਵ ਵਿਜ਼ੂਅਲ ਪ੍ਰਦਰਸ਼ਨ ਦਿਖਾਉਂਦਾ ਹੈ।
• CSS: ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਕੋਡ "CSS" ਹੈਡਿੰਗ ਦੇ ਹੇਠਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ।
• CSS ਕਾਪੀ ਕਰੋ: ਇਸ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਤੁਸੀਂ ਤਿਆਰ ਕੀਤੇ ਕੋਡ ਨੂੰ ਕਾਪੀ ਕਰਕੇ ਸਿੱਧਾ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ।

ਨਿੱਜਤਾ ਅਤੇ ਪ੍ਰੋਸੈਸਿੰਗ

ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡੀ ਨਿੱਜਤਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦੀ ਹੈ। ਹਰ ਕੋਨਾ ਸਿੱਧਾ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।

---

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)

ਚਾਰ ਕੋਨੇ ਅਤੇ px ਬਨਾਮ % ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

ਚਾਰ ਸਲਾਈਡਰ ਕਲਾਕਵਾਈਜ਼ (ਸੱਜੇ ਹੱਥ) ਦਿਸ਼ਾ ਵਿੱਚ ਉੱਪਰ-ਖੱਬੇ, ਉੱਪਰ-ਸੱਜੇ, ਹੇਠਾਂ-ਸੱਜੇ ਅਤੇ ਹੇਠਾਂ-ਖੱਬੇ ਕੋਨਿਆਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ। ਪਿਕਸਲ ਵਿੱਚ ਕੋਨਾ ਇੱਕ ਨਿਸ਼ਚਿਤ ਮਾਤਰਾ ਵਿੱਚ ਗੋਲ ਹੁੰਦਾ ਹੈ; ਪ੍ਰਤੀਸ਼ਤ ਵਿੱਚ ਇਹ ਬਾਕਸ ਦੇ ਅਨੁਪਾਤ ਵਿੱਚ ਗੋਲ ਹੁੰਦਾ ਹੈ — ਹਰੀਜੱਟਲ ਪ੍ਰਤੀਸ਼ਤ ਚੌੜਾਈ ਦੇ ਅਨੁਸਾਰ ਅਤੇ ਵਰਟੀਕਲ ਪ੍ਰਤੀਸ਼ਤ ਉਚਾਈ ਦੇ ਅਨੁਸਾਰ ਚੱਲਦੀ ਹੈ, ਇਸ ਲਈ 50% ਇੱਕ ਵਰਗ ਨੂੰ ਚੱਕਰ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।

ਅੰਡਾਕਾਰ (elliptical) ਮੋਡ ਕੀ ਕਰਦਾ ਹੈ?

ਬੰਦ ਹੋਣ 'ਤੇ, ਹਰ ਕੋਨਾ ਇੱਕ ਸਿੰਗਲ ਰੇਡੀਅਸ ਵਾਲਾ ਚੌਥਾਈ-ਚੱਕਰ ਹੁੰਦਾ ਹੈ। ਇਸਨੂੰ ਚਾਲੂ ਕਰੋ ਅਤੇ ਹਰੇਕ ਕੋਨੇ ਨੂੰ ਇੱਕ ਵੱਖਰਾ ਹਰੀਜੱਟਲ ਅਤੇ ਵਰਟੀਕਲ ਰੇਡੀਅਸ ਮਿਲਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਨਰਮ, ਆਰਗੈਨਿਕ "ਬਲੌਬ" ਆਕਾਰ ਬਣਾ ਸਕਦੇ ਹੋ। ਜਨਰੇਟਰ ਤੁਹਾਡੇ ਲਈ ਦੋ-ਮੁੱਲ ਵਾਲਾ ਸਲੈਸ਼ ਫਾਰਮੈਟ ਲਿਖਦਾ ਹੈ ਅਤੇ ਕੋਨੇ ਦੁਬਾਰਾ ਗੋਲ ਹੋਣ 'ਤੇ ਛੋਟੇ ਫਾਰਮੈਟ 'ਤੇ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ।

ਮੈਂ ਇੱਕ ਸੰਪੂਰਨ ਚੱਕਰ ਜਾਂ ਪਿਲ-ਆਕਾਰ ਕਿਵੇਂ ਬਣਾਵਾਂ?

ਕੋਨਿਆਂ ਨੂੰ ਲਿੰਕ ਕਰੋ, ਪ੍ਰਤੀਸ਼ਤ (%) 'ਤੇ ਸਵਿਚ ਕਰੋ ਅਤੇ 50% ਸੈੱਟ ਕਰੋ: ਇੱਕ ਵਰਗ ਗੋਲ ਚੱਕਰ ਬਣ ਜਾਵੇਗਾ। ਇੱਕ ਪਿਲ-ਆਕਾਰ (ਗੋਲੀਆਂ ਵਰਗੇ) ਬਟਨ ਲਈ, ਪਿਕਸਲ (px) ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਕਿਸੇ ਕੋਨੇ ਨੂੰ ਬਟਨ ਦੀ ਅੱਧੀ ਉਚਾਈ ਤੋਂ ਅੱਗੇ ਖਿੱਚੋ — ਕਿਸੇ ਵੀ ਚੌੜਾਈ 'ਤੇ ਕਿਨਾਰੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਗੋਲ ਰਹਿਣਗੇ। Circle ਪ੍ਰੀਸੈੱਟ ਇੱਕ ਕਲਿੱਕ ਵਿੱਚ ਪਹਿਲੇ ਕੇਸ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ।