CSS border-radius பண்பைப் புரிந்துகொள்ளுதல்
வலை வடிவமைப்பில் ஒரு பெட்டியின் மூலைகளை வளைப்பதற்கு CSS border-radius பண்பு பயன்படுத்தப்படுகிறது. இந்த பண்பு, கூர்மையான மூலைகளைக் கொண்ட சாதாரண வலை உறுப்புகளை மென்மையான மற்றும் நவீன வடிவங்களாக மாற்ற உதவுகிறது. இந்த பார்டர் ரேடியஸ் உருவாக்கி கருவியானது, நீங்கள் விரும்பும் வடிவத்தை ஸ்லைடர்கள் மூலம் எளிதாக வடிவமைத்து, அதற்கான CSS குறியீட்டை உடனடியாகப் பெற வழிவகை செய்கிறது.
இக்கருவியின் இயல்புநிலை ஸ்லைடர் மதிப்பு 24 ஆக அமைக்கப்பட்டுள்ளது, இதனால் தொடக்கத்தில் border-radius: 24px; என்ற CSS குறியீடு உருவாக்கப்படுகிறது. நான்கு ஸ்லைடர்கள், கடிகார திசையில், மேல்-இடது, மேல்-வலது, கீழ்-வலது மற்றும் கீழ்-இடது மூலைகளுடன் பொருந்துகின்றன.
பிக்சல் மற்றும் சதவீத அலகுகளுக்கு இடையே உள்ள வேறுபாடு
மூலைகளின் வளைவை அளவிடுவதற்கு இக்கருவியில் "px" (பிக்சல்கள்) மற்றும் "%" (சதவீதம்) ஆகிய இரண்டு அலகுகள் வழங்கப்பட்டுள்ளன. இந்த அலகுகள் செயல்படும் விதம் பின்வருமாறு:
- பிக்சல் (px) அலகு: பிக்சல் அலகில், ஒரு மூலை நிலையான அளவில் வளைகிறது. பெட்டியின் அளவு மாறினாலும், வளைவின் ஆரம் மாறாமல் நிலையாக இருக்கும்.
- சதவீத (%) அலகு: சதவீத அலகில், ஒரு மூலை பெட்டியின் அளவிற்கு ஏற்ப வளைகிறது. இதில் கிடைமட்ட சதவீதம் பெட்டியின் அகலத்தையும், செங்குத்து சதவீதம் பெட்டியின் உயரத்தையும் பின்பற்றுகிறது. இது பதிலளிக்கக்கூடிய வலை வடிவமைப்பிற்கு (responsive design) மிகவும் பயனுள்ளதாக இருக்கும்.
அடிப்படை மற்றும் மேம்பட்ட வடிவங்களை உருவாக்குதல்
இக்கருவியின் மூலம் எளிய வட்ட வடிவ மூலைகள் முதல் சிக்கலான நீள்வட்ட வடிவங்கள் வரை அனைத்தையும் உருவாக்க முடியும்.
ஒற்றை ஆரம் கொண்ட எளிய மூலைகள்
நீள்வட்ட மூலைகள் முடக்கப்பட்டிருக்கும் போது, ஒவ்வொரு மூலையும் ஒற்றை ஆரத்தைக் கொண்ட கால் வட்டமாக இருக்கும். அனைத்து மூலைகளையும் இணைக்கும் போது, "அனைத்து மூலைகளும்" என்ற ஒற்றை ஸ்லைடர் மூலம் நான்கு மூலைகளையும் ஒரே நேரத்தில் கட்டுப்படுத்தலாம். மூலைகளின் இணைப்பை நீக்கும் போது, "மேல் இடது", "மேல் வலது", "கீழ் வலது", மற்றும் "கீழ் இடது" ஆகிய நான்கு தனித்தனி ஸ்லைடர்கள் மூலம் ஒவ்வொரு மூலையையும் தனித்தனியாக மாற்றியமைக்கலாம்.
நீள்வட்ட (Elliptical) பயன்முறை
"நீள்வட்ட மூலைகள்" தேர்வை இயக்கும் போது, ஒவ்வொரு மூலைக்கும் தனித்தனி "கிடைமட்டம்" (கிடைமட்டம்) மற்றும் "செங்குத்து" (செங்குத்து) ஸ்லைடர்கள் கிடைக்கின்றன. இதன் மூலம் ஒவ்வொரு மூலைக்கும் தனித்தனி கிடைமட்ட மற்றும் செங்குத்து ஆரம் வழங்கப்பட்டு, மென்மையான மற்றும் இயற்கையான "blob" வடிவங்களை உருவாக்க முடியும்.
இந்த பயன்முறையில், ஜெனரேட்டர் CSS-க்கான இரண்டு-மதிப்பு ஸ்லாஷ் (slash) வடிவ குறியீட்டை எழுதுகிறது. மூலைகள் மீண்டும் வட்டமாகும்போது, இது தானாகவே குறுகிய வடிவத்திற்குத் திரும்புகிறது.
வட்டம் மற்றும் மாத்திரை வடிவங்களை வடிவமைக்கும் முறைகள்
வலை வடிவமைப்பில் அடிக்கடி பயன்படுத்தப்படும் இரண்டு முக்கிய வடிவங்களை இக்கருவி மூலம் எளிதாக உருவாக்கலாம்:
- சரியான வட்டம் (Perfect வட்டம்): ஒரு சதுர உறுப்பை சரியான வட்டமாக மாற்ற, மூலைகளை இணைத்து, சதவீத (percent) அலகுக்கு மாறி, ஸ்லைடரை 50% என அமைக்க வேண்டும்.
- மாத்திரை வடிவம் (Pill Shape): ஒரு மாத்திரை வடிவ பொத்தானை உருவாக்க, பிக்சல் (pixels) அலகைப் பயன்படுத்தி, பொத்தானின் உயரத்தில் பாதிக்கு மேல் ஒரு மூலையை இழுக்க வேண்டும். இவ்வாறு செய்யும்போது, பொத்தான் எவ்வளவு அகலமாக இருந்தாலும் அதன் பக்கங்கள் முழுமையாக வளைந்தே இருக்கும்.
முன்னமைவுகளின் பயன்பாடு
வடிவமைப்பை விரைவுபடுத்த இக்கருவியில் சில முக்கிய முன்னமைவு பொத்தான்கள் வழங்கப்பட்டுள்ளன. அவை:
- கூர்மையான: மூலைகளின் வளைவை நீக்கி கூர்மையாக்குகிறது.
- வட்டவடிவமுனை: சீரான வட்டவடிவ மூலைகளை உருவாக்குகிறது.
- வட்டம்: அனைத்து மூலைகளையும் 50% ஆக அமைத்து சரியான வட்டத்தை உருவாக்குகிறது.
- பிளாப்: இயற்கையான மற்றும் ஒழுங்கற்ற மென்மையான வடிவத்தை உருவாக்குகிறது.
- இலை: இலை போன்ற வடிவத்தை உருவாக்குகிறது.
தரவு செயலாக்கம் மற்றும் தனியுரிமை
இக்கருவியைப் பயன்படுத்தும் போது தனியுரிமை முழுமையாகப் பாதுகாக்கப்படுகிறது. ஒவ்வொரு மூலையும் உங்கள் உலாவியிலேயே நேரடியாக வரையப்படுகிறது. நீங்கள் இங்கு அமைக்கும் மதிப்புகள் அல்லது வடிவமைப்புத் தரவுகள் எதுவும் BroBroGo-விற்கு பதிவேற்றப்படாது.
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
நான்கு மூலைகளும் px vs % எவ்வாறு செயல்படுகின்றன?
நான்கு ஸ்லைடர்கள், கடிகார திசையில், மேல்-இடது, மேல்-வலது, கீழ்-வலது மற்றும் கீழ்-இடது மூலைகளுடன் பொருந்துகின்றன. பிக்சல்களில் (px) ஒரு மூலை நிலையான அளவில் வளைகிறது; சதவீதத்தில் (%) அது பெட்டியின் அளவிற்கு ஏற்ப வளைகிறது — கிடைமட்ட சதவீதம் அகலத்தையும், செங்குத்து சதவீதம் உயரத்தையும் பின்பற்றுகிறது, எனவே 50% என்பது ஒரு சதுரத்தை வட்டமாக மாற்றுகிறது.
நீள்வட்ட (elliptical) பயன்முறை என்ன செய்கிறது?
இது முடக்கப்பட்டிருந்தால், ஒவ்வொரு மூலையும் ஒற்றை ஆரத்தைக் கொண்ட கால் வட்டமாக இருக்கும். இதை இயக்கினால், ஒவ்வொரு மூலைக்கும் தனித்தனி கிடைமட்ட மற்றும் செங்குத்து ஆரம் கிடைக்கும், இதன் மூலம் நீங்கள் மென்மையான, இயற்கையான "blob" வடிவங்களை உருவாக்கலாம். இந்த ஜெனரேட்டர் உங்களுக்காக இரண்டு-மதிப்பு ஸ்லாஷ் (slash) வடிவத்தை எழுதுகிறது, மேலும் மூலைகள் மீண்டும் வட்டமாகும்போது குறுகிய வடிவத்திற்குத் திரும்புகிறது.
ஒரு சரியான வட்டம் அல்லது மாத்திரை வடிவத்தை நான் எவ்வாறு உருவாக்குவது?
மூலைகளை இணைத்து, சதவீதத்திற்கு (percent) மாற்றி, 50% என அமைக்கவும்: ஒரு சதுரம் வட்டமாக மாறும். ஒரு மாத்திரை வடிவ (pill) பொத்தானுக்கு, பிக்சல்களைப் (pixels) பயன்படுத்தி, பொத்தானின் உயரத்தில் பாதிக்கு மேல் ஒரு மூலையை இழுக்கவும் — பக்கங்கள் எந்த அகலத்திலும் முழுமையாக வளைந்திருக்கும். வட்டம் முன்னமைவு (preset) ஒரே கிளிக்கில் முதல் அமைப்பை உருவாக்குகிறது.
உருவாக்கப்பட்ட CSS குறியீட்டை எவ்வாறு பயன்படுத்துவது?
இக்கருவியின் கீழ் உள்ள "CSS" பிரிவில் குறியீடு உடனடியாக உருவாக்கப்படும். அங்குள்ள "CSS-ஐ நகலெடு" பொத்தானைக் கிளிக் செய்வதன் மூலம் குறியீட்டை நகலெடுத்து, உங்கள் வலைப்பக்கத்தின் ஸ்டைல்ஷீட்டில் (Stylesheet) நேரடியாகப் பயன்படுத்தலாம்.