CSS border-radius ಪ್ರಾಪರ್ಟಿಯ ಮೂಲಭೂತ ಅಂಶಗಳು
ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಬಾಕ್ಸ್ ಮಾದರಿಯ ಅಂಶಗಳ ಮೂಲೆಗಳನ್ನು ದುಂಡಗಾಗಿಸಲು CSS border-radius ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ಪ್ರಾಪರ್ಟಿಯು ವಿನ್ಯಾಸಕರಿಗೆ ಮತ್ತು ಡೆವಲಪರ್ಗಳಿಗೆ ಚೌಕಾಕಾರದ ಅಂಶಗಳನ್ನು ಮೃದುವಾದ ಆಕಾರಗಳಾಗಿ ಪರಿವರ್ತಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಬಾರ್ಡರ್ ರೇಡಿಯಸ್ ಜನರೇಟರ್ ಉಪಕರಣವು ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ಇಲ್ಲಿ ನೀವು ಸ್ಲೈಡರ್ಗಳ ಮೂಲಕ ಮೂಲೆಗಳ ರೇಡಿಯಸ್ ಅನ್ನು ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಅದು ತಕ್ಷಣವೇ ಅಗತ್ಯವಿರುವ CSS ಕೋಡ್ ಅನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ.
ಈ ಉಪಕರಣದಲ್ಲಿ ಆರಂಭಿಕ ಸ್ಲೈಡರ್ ಮೌಲ್ಯವು 24 ಆಗಿರುತ್ತದೆ, ಇದು border-radius: 24px; ಎಂಬ CSS ಕೋಡ್ ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ. ಪ್ರದಕ್ಷಿಣಾಕಾರವಾಗಿ (clockwise) ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಈ ನಿಯಮವು ಮೇಲಿನ-ಎಡ, ಮೇಲಿನ-ಬಲ, ಕೆಳಗಿನ-ಬಲ ಮತ್ತು ಕೆಳಗಿನ-ಎಡ ಮೂಲೆಗಳನ್ನು ಕ್ರಮವಾಗಿ ನಿಯಂತ್ರಿಸುತ್ತದೆ.
ಪಿಕ್ಸೆಲ್ ಮತ್ತು ಶೇಕಡಾವಾರು ಯೂನಿಟ್ಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸ
ಮೂಲೆಗಳನ್ನು ದುಂಡಗಾಗಿಸುವಾಗ ಯೂನಿಟ್ಗಳ ಆಯ್ಕೆಯು ಪ್ರಮುಖ ಪಾತ್ರ ವಹಿಸುತ್ತದೆ. ಈ ಉಪಕರಣದಲ್ಲಿ "px" (ಪಿಕ್ಸೆಲ್) ಮತ್ತು "%" (ಶೇಕಡಾವಾರು) ಎಂಬ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ.
- ಪಿಕ್ಸೆಲ್ (px) ಯೂನಿಟ್: ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಬಳಸಿದಾಗ, ಮೂಲೆಯು ಒಂದು ನಿರ್ದಿಷ್ಟ ಮತ್ತು ಸ್ಥಿರವಾದ ಪ್ರಮಾಣದಲ್ಲಿ ದುಂಡಗಾಗುತ್ತದೆ. ಬಾಕ್ಸ್ನ ಗಾತ್ರವು ಎಷ್ಟೇ ಬದಲಾದರೂ, ಮೂಲೆಯ ರೇಡಿಯಸ್ ಮಾತ್ರ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ.
- ಶೇಕಡಾವಾರು (%) ಯೂನಿಟ್: ಶೇಕಡಾವಾರು ಯೂನಿಟ್ ಬಳಸಿದಾಗ, ಮೂಲೆಯು ಬಾಕ್ಸ್ನ ಒಟ್ಟಾರೆ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ದುಂಡಗಾಗುತ್ತದೆ. ಇಲ್ಲಿ ಅಡ್ಡ ಶೇಕಡಾವಾರು ಮೌಲ್ಯವು ಬಾಕ್ಸ್ನ ಅಗಲವನ್ನು (width) ಮತ್ತು ಲಂಬ ಶೇಕಡಾವಾರು ಮೌಲ್ಯವು ಬಾಕ್ಸ್ನ ಎತ್ತರವನ್ನು (height) ಆಧರಿಸಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳಿಗೆ ಹೆಚ್ಚು ಸೂಕ್ತವಾಗಿದೆ.
ದೀರ್ಘವೃತ್ತಾಕಾರದ (Elliptical) ಮೂಲೆಗಳೊಂದಿಗೆ ಸುಧಾರಿತ ಆಕಾರಗಳು
ಸಾಮಾನ್ಯವಾಗಿ border-radius ಬಳಸಿದಾಗ ಪ್ರತಿಯೊಂದು ಮೂಲೆಯೂ ಒಂದೇ ತ್ರಿಜ್ಯವನ್ನು ಹೊಂದಿರುವ ಕಾಲು-ವೃತ್ತದಂತೆ (quarter-circle) ಇರುತ್ತದೆ. ಆದರೆ ದೀರ್ಘವೃತ್ತಾಕಾರದ (Elliptical) ಮೋಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ, ಪ್ರತಿ ಮೂಲೆಗೂ ಪ್ರತ್ಯೇಕವಾದ ಅಡ್ಡ (horizontal) ಮತ್ತು ಲಂಬ (vertical) ತ್ರಿಜ್ಯಗಳನ್ನು ನೀಡಬಹುದು.
ಈ ಮೋಡ್ ಆನ್ ಆಗಿದ್ದಾಗ, ಜನರೇಟರ್ CSS ಗಾಗಿ ಎರಡು-ಮೌಲ್ಯಗಳ ಸ್ಲ್ಯಾಷ್ (/) ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಕೋಡ್ ಬರೆಯುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಅಡ್ಡ ಮತ್ತು ಲಂಬ ಮೌಲ್ಯಗಳು ವಿಭಿನ್ನವಾಗಿದ್ದಾಗ ಈ ಸ್ಲ್ಯಾಷ್ ಸಂಕೇತವು ಬಳಕೆಯಾಗುತ್ತದೆ. ಮೂಲೆಗಳು ಮತ್ತೆ ಸಾಮಾನ್ಯ ಸ್ಥಿತಿಗೆ ಮರಳಿದಾಗ, ಉಪಕರಣವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಣ್ಣ ಫಾರ್ಮ್ಯಾಟ್ಗೆ ಬದಲಾಗುತ್ತದೆ. ಈ ತಂತ್ರಜ್ಞಾನದ ಸಹಾಯದಿಂದ ಮೃದುವಾದ ಮತ್ತು ನೈಸರ್ಗಿಕವಾದ "blob" ಆಕಾರಗಳನ್ನು ಸುಲಭವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು.
ವೃತ್ತ ಮತ್ತು ಪಿಲ್ ಆಕಾರಗಳನ್ನು ರಚಿಸುವ ವಿಧಾನಗಳು
ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ವೃತ್ತಾಕಾರದ ಪ್ರೊಫೈಲ್ ಚಿತ್ರಗಳು ಮತ್ತು ಪಿಲ್ ಆಕಾರದ ಬಟನ್ಗಳು ಸಾಮಾನ್ಯ ಬಳಕೆಯಲ್ಲಿವೆ. ಇವುಗಳನ್ನು CSS ಮೂಲಕ ಸುಲಭವಾಗಿ ರಚಿಸಬಹುದು:
- ಪರಿಪೂರ್ಣ ವೃತ್ತ (Perfect Circle): ಒಂದು ಚೌಕಾಕಾರದ (square) ಅಂಶವನ್ನು ಸಂಪೂರ್ಣ ವೃತ್ತವನ್ನಾಗಿ ಮಾಡಲು, ಎಲ್ಲಾ ಮೂಲೆಗಳನ್ನು ಲಿಂಕ್ ಮಾಡಬೇಕು. ನಂತರ ಯೂನಿಟ್ ಅನ್ನು ಶೇಕಡಾವಾರು (%) ಗೆ ಬದಲಾಯಿಸಿ, ಮೌಲ್ಯವನ್ನು 50% ಗೆ ಹೊಂದಿಸಬೇಕು. ಇದು ನಾಲ್ಕೂ ಮೂಲೆಗಳನ್ನು ಸಮಾನವಾಗಿ ದುಂಡಗಾಗಿಸಿ ವೃತ್ತವನ್ನು ರೂಪಿಸುತ್ತದೆ.
- ಪಿಲ್ ಆಕಾರದ ಬಟನ್ (Pill-shaped Button): ಪಿಲ್ ಆಕಾರವನ್ನು ಪಡೆಯಲು ಯೂನಿಟ್ ಅನ್ನು ಪಿಕ್ಸೆಲ್ (px) ನಲ್ಲೇ ಇರಿಸಿಕೊಳ್ಳಬೇಕು. ನಂತರ ಮೂಲೆಯ ಸ್ಲೈಡರ್ ಅನ್ನು ಬಟನ್ನ ಒಟ್ಟು ಎತ್ತರದ ಅರ್ಧಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಮೌಲ್ಯಕ್ಕೆ ಎಳೆಯಬೇಕು. ಹೀಗೆ ಮಾಡುವುದರಿಂದ, ಬಟನ್ನ ಅಗಲ ಎಷ್ಟೇ ಹೆಚ್ಚಾದರೂ ಅದರ ಬದಿಗಳು ಸಂಪೂರ್ಣವಾಗಿ ದುಂಡಗಾಗಿಯೇ ಉಳಿಯುತ್ತವೆ.
ಪ್ರಿಸೆಟ್ಗಳು ಮತ್ತು ಅವುಗಳ ಪಾತ್ರ
ವಿನ್ಯಾಸ ಪ್ರಕ್ರಿಯೆಯನ್ನು ವೇಗಗೊಳಿಸಲು ಈ ಉಪಕರಣದಲ್ಲಿ ಐದು ಪ್ರಮುಖ ಪ್ರಿಸೆಟ್ ಬಟನ್ಗಳನ್ನು ನೀಡಲಾಗಿದೆ. ಇವುಗಳು ಒಂದೇ ಕ್ಲಿಕ್ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಆಕಾರಗಳನ್ನು ನೀಡುತ್ತವೆ:
- ಚೂಪಾದ: ಎಲ್ಲಾ ಮೂಲೆಗಳ ರೇಡಿಯಸ್ ಅನ್ನು 0 ಗೆ ಹೊಂದಿಸಿ ಚೂಪಾದ ಮೂಲೆಗಳನ್ನು ನೀಡುತ್ತದೆ.
- ದುಂಡಗಿನ: ಸಾಧಾರಣವಾಗಿ ಬಳಸಲಾಗುವ ದುಂಡಗಿನ ಮೂಲೆಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
- ವೃತ್ತ: ಎಲ್ಲಾ ಮೂಲೆಗಳ ಮೌಲ್ಯವನ್ನು 50% ಗೆ ಹೊಂದಿಸಿ ವೃತ್ತಾಕಾರವನ್ನು ನೀಡುತ್ತದೆ.
- ಬ್ಲಾಬ್ (Blob): ದೀರ್ಘವೃತ್ತಾಕಾರದ ಮೋಡ್ ಬಳಸಿ ನೈಸರ್ಗಿಕ ಮತ್ತು ಅಸಮಪಾರ್ಶ್ವದ ಆಕಾರವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
- ಎಲೆ (Leaf): ಎಲೆಯ ಆಕಾರವನ್ನು ಹೋಲುವಂತೆ ವಿರುದ್ಧ ಮೂಲೆಗಳನ್ನು ವಿಭಿನ್ನವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸುತ್ತದೆ.
ಡೇಟಾ ಗೌಪ್ಯತೆ ಮತ್ತು ಸಂಸ್ಕರಣೆ
ಈ ಉಪಕರಣವನ್ನು ಬಳಸುವಾಗ ನಿಮ್ಮ ವಿನ್ಯಾಸದ ಸುರಕ್ಷತೆಯ ಬಗ್ಗೆ ಚಿಂತಿಸಬೇಕಾಗಿಲ್ಲ. ಪ್ರತಿಯೊಂದು ಮೂಲೆಯನ್ನೂ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲೇ ರಚಿಸಲಾಗುತ್ತದೆ. ನೀವು ಇಲ್ಲಿ ಹೊಂದಿಸುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ. ಎಲ್ಲಾ ಪ್ರಕ್ರಿಯೆಗಳು ಸ್ಥಳೀಯವಾಗಿ ನಿಮ್ಮ ಸಾಧನದಲ್ಲೇ ನಡೆಯುತ್ತವೆ.
ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೋತ್ತರಗಳು (FAQ)
ನಾಲ್ಕು ಮೂಲೆಗಳು ಮತ್ತು px vs % ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ?
ನಾಲ್ಕು ಸ್ಲೈಡರ್ಗಳು ಪ್ರದಕ್ಷಿಣಾಕಾರವಾಗಿ (clockwise) ಮೇಲಿನ-ಎಡ, ಮೇಲಿನ-ಬಲ, ಕೆಳಗಿನ-ಬಲ ಮತ್ತು ಕೆಳಗಿನ-ಎಡ ಮೂಲೆಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ. ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ (px) ಮೂಲೆಯು ನಿರ್ದಿಷ್ಟ ಪ್ರಮಾಣದಲ್ಲಿ ದುಂಡಗಾಗುತ್ತದೆ; ಶೇಕಡಾವಾರು (%) ನಲ್ಲಿ ಅದು ಬಾಕ್ಸ್ನ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ದುಂಡಗಾಗುತ್ತದೆ — ಅಡ್ಡ ಶೇಕಡಾವಾರು ಅಗಲವನ್ನು ಮತ್ತು ಲಂಬ ಶೇಕಡಾವಾರು ಎತ್ತರವನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ 50% ಮೌಲ್ಯವು ಚೌಕವನ್ನು ವೃತ್ತವನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.
ದೀರ್ಘವೃತ್ತಾಕಾರದ (elliptical) ಮೋಡ್ ಏನು ಮಾಡುತ್ತದೆ?
ಇದು ಆಫ್ ಆಗಿದ್ದಾಗ, ಪ್ರತಿಯೊಂದು ಮೂಲೆಯೂ ಒಂದೇ ತ್ರಿಜ್ಯವನ್ನು ಹೊಂದಿರುವ ಕಾಲು-ವೃತ್ತವಾಗಿರುತ್ತದೆ. ಇದನ್ನು ಆನ್ ಮಾಡಿದರೆ, ಪ್ರತಿ ಮೂಲೆಗೂ ಪ್ರತ್ಯೇಕ ಅಡ್ಡ (horizontal) ಮತ್ತು ಲಂಬ (vertical) ತ್ರಿಜ್ಯಗಳು ಸಿಗುತ್ತವೆ, ಇದರ ಸಹಾಯದಿಂದ ನೀವು ಮೃದುವಾದ, ಸಾವಯವ "blob" ಆಕಾರಗಳನ್ನು ರಚಿಸಬಹುದು. ಈ ಜನರೇಟರ್ ನಿಮಗಾಗಿ ಎರಡು-ಮೌಲ್ಯಗಳ ಸ್ಲ್ಯಾಷ್ (/) ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಬರೆಯುತ್ತದೆ ಮತ್ತು ಮೂಲೆಗಳು ಮತ್ತೆ ದುಂಡಗಾದಾಗ ಸಣ್ಣ ಫಾರ್ಮ್ಯಾಟ್ಗೆ ಮರಳುತ್ತದೆ.
ಸಂಪೂರ್ಣ ವೃತ್ತ ಅಥವಾ ಪಿಲ್ ಆಕಾರವನ್ನು ಮಾಡುವುದು ಹೇಗೆ?
ಮೂಲೆಗಳನ್ನು ಲಿಂಕ್ ಮಾಡಿ, ಶೇಕಡಾವಾರು (%) ಮೋಡ್ಗೆ ಬದಲಾಯಿಸಿ ಮತ್ತು 50% ಗೆ ಹೊಂದಿಸಿ: ಚೌಕವು ವೃತ್ತವಾಗುತ್ತದೆ. ಪಿಲ್-ಆಕಾರದ ಬಟನ್ಗಾಗಿ, ಪಿಕ್ಸೆಲ್ಗಳನ್ನು (px) ಹಾಗೆಯೇ ಇರಿಸಿ ಮತ್ತು ಬಟನ್ನ ಅರ್ಧದಷ್ಟು ಎತ್ತರಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಮೂಲೆಯನ್ನು ಎಳೆಯಿರಿ — ಅಗಲ ಎಷ್ಟೇ ಇದ್ದರೂ ಬದಿಗಳು ಸಂಪೂರ್ಣವಾಗಿ ದುಂಡಗಾಗಿಯೇ ಇರುತ್ತವೆ. 'Circle' ಪ್ರಿಸೆಟ್ ಕೇವಲ ಒಂದೇ ಕ್ಲಿಕ್ನಲ್ಲಿ ಮೊದಲನೆಯ ಆಯ್ಕೆಯನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ.