CSS Border Radius జనరేటర్ పరిచయం
వెబ్ డిజైన్లో ఒక బాక్స్ యొక్క మూలలను గుండ్రంగా మార్చడానికి CSS border-radius ప్రాపర్టీని ఉపయోగిస్తారు. ఈ Border Radius జనరేటర్ సాధనం ద్వారా మీరు ఒక బాక్స్ యొక్క మూలల గుండ్రదనాన్ని సులభంగా సర్దుబాటు చేయవచ్చు. ఇక్కడ మీరు ప్రతి మూలను విడివిడిగా నియంత్రించవచ్చు లేదా అన్నింటినీ కలిపి లింక్ చేయవచ్చు. అలాగే, మీ డిజైన్ అవసరాలకు అనుగుణంగా పిక్సెల్ (px) లేదా శాతం (%) యూనిట్లను ఎంచుకునే సదుపాయం కూడా ఉంది.
ఈ సాధనంలో ప్రత్యేకంగా "దీర్ఘవృత్తాకార మూలలు" (elliptical mode) ఫీచర్ అందుబాటులో ఉంది. ఇది ప్రతి మూలకు విడివిడిగా క్షితిజ సమాంతర మరియు నిలువు వ్యాసార్థాలను అందించడం ద్వారా మరింత మృదువైన, సహజమైన ఆకారాలను సృష్టించడానికి సహాయపడుతుంది. మీరు చేసే మార్పులకు అనుగుణంగా ఈ సాధనం తక్షణమే CSS కోడ్ను జనరేట్ చేస్తుంది.
ఇన్పుట్ నియంత్రణలు మరియు వాటి వినియోగం
ఈ జనరేటర్ సాధనంలో డిజైన్ను సులభంగా మార్చుకోవడానికి క్రింది ఇన్పుట్ నియంత్రణలు అందించబడ్డాయి:
- స్లైడర్లు (Sliders): మూలల గుండ్రదనాన్ని సర్దుబాటు చేయడానికి ఇవి ఉపయోగపడతాయి. స్లైడర్ల పరిధి 0 నుండి 100 వరకు ఉంటుంది.
- అన్ని మూలలు లింక్ చేయబడినప్పుడు, "అన్ని మూలలు" అనే ఒకే ఒక స్లైడర్ ద్వారా నాలుగు మూలలను నియంత్రించవచ్చు.
- మూలాల లింక్ తీసివేసినప్పుడు, "ఎగువ ఎడమ", "ఎగువ కుడి", "దిగువ కుడి" మరియు "దిగువ ఎడమ" అనే నాలుగు విడివిడి స్లైడర్లు అందుబాటులోకి వస్తాయి.
- దీర్ఘవృత్తాకార మోడ్లో, ప్రతి మూలకు అదనంగా "క్షితిజ సమాంతర (Horizontal)" మరియు "నిలువు (Vertical)" స్లైడర్లు లభిస్తాయి.
- యూనిట్ సెలెక్టర్ (Unit selector): దీని ద్వారా మీరు "px" (పిక్సెల్లు) మరియు "%" (శాతం) యూనిట్ల మధ్య మారవచ్చు.
- అన్ని మూలాలను లింక్ చేయి టోగుల్ (అన్ని మూలాలను లింక్ చేయి toggle): మూలాల సర్దుబాట్లను ఒకదానితో ఒకటి లింక్ చేయడానికి లేదా అన్లింక్ చేయడానికి ఇది ఉపయోగపడుతుంది.
- దీర్ఘవృత్తాకార మూలలు టోగుల్ (దీర్ఘవృత్తాకార మూలలు toggle): దీర్ఘవృత్తాకార మోడ్ను ఆన్ లేదా ఆఫ్ చేయడానికి దీనిని ఉపయోగించాలి.
- ప్రీసెట్లు: త్వరిత డిజైన్ల కోసం ఇక్కడ కొన్ని బటన్లు ఉన్నాయి. అవి: "పదునైన", "గుండ్రని", "వృత్తం", "బ్లాబ్" మరియు "ఆకు".
అవుట్పుట్ మరియు CSS కోడ్ జనరేషన్
మీరు స్లైడర్లను సర్దుబాటు చేస్తున్నప్పుడు, ఈ సాధనం క్రింది అవుట్పుట్లను అందిస్తుంది:
- ప్రివ్యూ (Preview): మీరు వర్తింపజేసిన బోర్డర్ రేడియస్ ఆకారాన్ని దృశ్య రూపంలో చూపించే ఒక బాక్స్ ఇక్కడ కనిపిస్తుంది.
- CSS: జనరేట్ చేయబడిన CSS కోడ్ నేరుగా "CSS" హెడ్డింగ్ క్రింద ప్రదర్శించబడుతుంది.
- CSS కాపీ చేయి బటన్: ఈ కోడ్ను సులభంగా కాపీ చేయడానికి "CSS కాపీ చేయి" అనే బటన్ అందుబాటులో ఉంది.
ఈ సాధనం యొక్క ప్రారంభ స్లైడర్ విలువ 24 గా సెట్ చేయబడి ఉంటుంది, దీని వలన ప్రారంభంలో border-radius: 24px; అనే కోడ్ జనరేట్ అవుతుంది.
నియమాలు మరియు ప్రత్యేక ఆకారాల రూపకల్పన
ఈ జనరేటర్ కొన్ని నిర్దిష్ట నియమాల ఆధారంగా పనిచేస్తుంది:
- నాలుగు మూలల స్లైడర్లు గడియారం దిశలో ఎగువ-ఎడమ, ఎగువ-కుడి, దిగువ-కుడి మరియు దిగువ-ఎడమ మూలలకు మ్యాప్ చేయబడతాయి.
- పిక్సెల్ (px) యూనిట్లు: పిక్సెల్లలో మూల స్థిరమైన పరిమాణంలో గుండ్రంగా మారుతుంది.
- శాతం (%) యూనిట్లు: శాతంలో మూల యొక్క గుండ్రదనం బాక్స్ పరిమాణాన్ని బట్టి మారుతుంది. క్షితిజ సమాంతర శాతం వెడల్పును మరియు నిలువు శాతం ఎత్తును అనుసరిస్తుంది.
- ఖచ్చితమైన వృత్తం: ఒక చతురస్రాన్ని వృత్తంగా మార్చడానికి, మూలాలను లింక్ చేసి, శాతానికి (%) మార్చి, విలువను 50% కి సెట్ చేయాలి. "వృత్తం" ప్రీసెట్ కూడా అన్ని మూలలను 50% కి సెట్ చేస్తుంది.
- పిల్ ఆకారపు బటన్: పిక్సెల్ యూనిట్లను అలాగే ఉంచి, బటన్ ఎత్తులో సగానికి పైగా ఒక మూలను లాగడం ద్వారా దీనిని తయారు చేయవచ్చు. దీనివల్ల వెడల్పు ఎంత ఉన్నా వైపులా పూర్తిగా గుండ్రంగానే ఉంటాయి.
- దీర్ఘవృత్తాకార మోడ్ నియమాలు: ఈ మోడ్ ఆఫ్లో ఉన్నప్పుడు, ప్రతి మూల ఒకే వ్యాసార్థం కలిగిన వృత్తంలో నాల్గవ భాగంలా ఉంటుంది. ఇది ఆన్లో ఉన్నప్పుడు, ప్రతి మూలకు ప్రత్యేక క్షితిజ సమాంతర మరియు నిలువు వ్యాసార్థం లభిస్తుంది. ఈ సమయంలో జనరేటర్ CSS కోసం రెండు విలువల స్లాష్ (/) ఫార్మాట్ను రాస్తుంది. మూలలు మళ్లీ సాధారణ గుండ్రని ఆకారానికి మారినప్పుడు ఇది షార్ట్ ఫార్మాట్కి మారుతుంది.
ఈ సాధనం ఎవరికి ఉపయోగపడుతుంది?
ఈ బోర్డర్ రేడియస్ జనరేటర్ క్రింది అవసరాలు ఉన్నవారికి ఉపయోగపడుతుంది:
- వెబ్ డిజైన్ కోసం బాక్స్ యొక్క మూలలను త్వరగా గుండ్రంగా మార్చాలనుకునే వారికి.
- చతురస్ర మూలకం నుండి ఖచ్చితమైన వృత్తాన్ని సృష్టించాలనుకునే వారికి.
- పిల్ ఆకారపు బటన్ను డిజైన్ చేయాలనుకునే వారికి.
- తమ డిజైన్ కోసం మృదువైన, సహజమైన "blob" ఆకారాలను సృష్టించాలనుకునే వారికి.
- కస్టమ్ బోర్డర్ రేడియస్ కోసం తక్షణమే CSS కోడ్ను జనరేట్ చేయాలనుకునే వారికి.
గోప్యత మరియు డేటా ప్రాసెసింగ్ విధానం
ఈ సాధనాన్ని ఉపయోగిస్తున్నప్పుడు మీ గోప్యతకు ఎటువంటి భంగం కలగదు. ప్రతి మూల నేరుగా మీ బ్రౌజర్లోనే డ్రా చేయబడుతుంది. మీ సమాచారం లేదా డిజైన్ సెట్టింగ్లు ఏవీ BroBroGo కి అప్లోడ్ చేయబడవు.
తరచుగా అడిగే ప్రశ్నలు (FAQ)
నాలుగు మూలలు మరియు px వర్సెస్ % ఎలా పనిచేస్తాయి?
నాలుగు స్లైడర్లు గడియారం దిశలో ఎగువ-ఎడమ, ఎగువ-కుడి, దిగువ-కుడి మరియు దిగువ-ఎడమ మూలలకు మ్యాప్ చేయబడతాయి. పిక్సెల్లలో మూల స్థిరమైన పరిమాణంలో గుండ్రంగా మారుతుంది; శాతంలో (percent) ఇది బాక్స్ పరిమాణాన్ని బట్టి మారుతుంది — క్షితిజ సమాంతర శాతం వెడల్పును మరియు నిలువు శాతం ఎత్తును అనుసరిస్తుంది, కాబట్టి 50% ఒక చతురస్రాన్ని వృత్తంగా మారుస్తుంది.
దీర్ఘవృత్తాకార (elliptical) మోడ్ ఏం చేస్తుంది?
ఆఫ్లో ఉన్నప్పుడు, ప్రతి మూల ఒకే వ్యాసార్థం కలిగిన వృత్తంలో నాల్గవ భాగంలా ఉంటుంది. దీన్ని ఆన్ చేస్తే, ప్రతి మూలకు ప్రత్యేక క్షితిజ సమాంతర (horizontal) మరియు నిలువు (vertical) వ్యాసార్థం లభిస్తుంది, దీని ద్వారా మీరు మృదువైన, సహజమైన "blob" ఆకారాలను సృష్టించవచ్చు. జనరేటర్ మీ కోసం రెండు విలువల స్లాష్ ఫార్మాట్ను రాస్తుంది మరియు మూలలు మళ్లీ గుండ్రంగా మారినప్పుడు షార్ట్ ఫార్మాట్కి మారుతుంది.
నేను ఖచ్చితమైన వృత్తాన్ని లేదా పిల్ ఆకారాన్ని ఎలా తయారు చేయాలి?
మూలాలను లింక్ చేసి, శాతానికి (percent) మార్చండి మరియు 50% కి సెట్ చేయండి: చతురస్రం కాస్తా వృత్తంగా మారుతుంది. పిల్ ఆకారపు బటన్ కోసం, పిక్సెల్లను అలాగే ఉంచి, బటన్ ఎత్తులో సగానికి పైగా ఒక మూలను లాగండి — వెడల్పు ఎంత ఉన్నా వైపులా పూర్తిగా గుండ్రంగానే ఉంటాయి. Circle (వృత్తం) ప్రీసెట్ కేవలం ఒక క్లిక్తో మొదటి కేస్ను సెట్ చేస్తుంది.