வண்ணச்சரிவு உருவாக்கி

CSS வண்ணச் சாய்வுகளின் அடிப்படைகள்

வண்ணச் சாய்வுகளை உருவாக்குவதில் மூன்று முக்கிய கூறுகள் உள்ளன: சாய்வின் வகை, அதன் திசை அல்லது வடிவம், மற்றும் வண்ண நிறுத்தங்கள். இந்த கூறுகளைத் துல்லியமாகக் கட்டுப்படுத்துவதன் மூலம், எளிய பின்னணிகள் முதல் சிக்கலான வண்ண வடிவமைப்புகள் வரை அனைத்தையும் உருவாக்க முடியும்.

நேரியல் சாய்வுகள்: திசை மற்றும் வண்ண நிறுத்தங்கள்

நேரியல் சாய்வு என்பது வண்ணங்களை ஒரு நேர்க்கோட்டில் இணைக்கும் ஒரு அமைப்பாகும். இந்த நேர்க்கோட்டின் திசையை ஒரு குறிப்பிட்ட கோணத்தின் மூலம் தீர்மானிக்கலாம்.

• கோணம்: நேரியல் சாய்வுக்கான கோண ஸ்லைடர் அதன் திசையை அமைக்கிறது. இதில் 0° என்பது மேல்நோக்கியும், 90° என்பது வலப்புறமும் திசையைக் குறிக்கும்.
• வண்ணங்களின் பரவல்: வண்ணங்கள் தொடக்கப் புள்ளியிலிருந்து இறுதிப் புள்ளி வரை கோணத்தின் திசையில் சீராகக் கலக்கின்றன.

இக்கருவியைப் பயன்படுத்தும் போது, தொடக்க அமைப்பாக (Initial gradient) #6366f1 0% மற்றும் #ec4899 100% ஆகிய இரண்டு வண்ண நிறுத்தங்கள் வழங்கப்படுகின்றன.

---

ஆரவடிவ மற்றும் கூம்பு வடிவ சாய்வுகள்

வண்ணங்களை நேர்க்கோட்டில் மட்டுமே பரப்ப வேண்டும் என்ற அவசியமில்லை. வட்ட வடிவிலோ அல்லது சுழற்சி முறையிலோ வண்ணங்களைப் பரப்புவதற்கு ஆரவடிவ மற்றும் கூம்பு வடிவ சாய்வுகள் பயன்படுகின்றன.

ஆரவடிவ சாய்வுகள் (Radial Gradients)

ஆரவடிவ சாய்வு என்பது மையத்திலிருந்து வெளிப்புறமாக வண்ணங்களை வட்டம் அல்லது நீள்வட்ட வடிவில் பரப்புகிறது. இந்த வகைக்குக் கோண அமைப்புகள் எதுவும் தேவைப்படுவதில்லை. அதற்குப் பதிலாக, பின்வரும் வடிவங்களைத் தேர்ந்தெடுக்கலாம்:

• நீள்வட்டம் (Ellipse): கொள்கலனின் அகலம் மற்றும் உயரத்திற்கு ஏற்ப நீள்வட்ட வடிவில் வண்ணங்கள் பரவும்.
• வட்டம் (Circle): சமச்சீரான வட்ட வடிவில் மையத்திலிருந்து வெளிப்புறமாக வண்ணங்கள் பரவும்.

கூம்பு வடிவ சாய்வுகள் (Conic Gradients)

கூம்பு வடிவ சாய்வு என்பது ஒரு வண்ணச் சக்கரத்தைப் போல, மையப் புள்ளியை அச்சாகக் கொண்டு வண்ணங்களைச் சுழற்றி அமைக்கிறது. நேரியல் சாய்வைப் போலவே, இதற்கும் கோண ஸ்லைடரைப் பயன்படுத்தி வண்ணச் சுழற்சியின் தொடக்கத் திசையை அமைக்கலாம். இதில் 0° என்பது மேல்நோக்கியும், 90° என்பது வலப்புறமும் சுழற்சியின் தொடக்கத்தைக் குறிக்கும்.

---

வண்ண நிறுத்தங்களின் பங்கு

வண்ண நிறுத்தங்கள் என்பது சாய்வுப் பாதையில் ஒரு குறிப்பிட்ட நிலையில் பொருத்தப்பட்ட வண்ண மதிப்புகள் ஆகும். சாய்வின் வடிவமைப்பைத் தீர்மானிப்பதில் இவை முக்கியப் பங்கு வகிக்கின்றன.

• நிலை: ஒவ்வொரு வண்ண நிறுத்தமும் 0% முதல் 100% வரையிலான ஒரு குறிப்பிட்ட நிலையில் பொருத்தப்படும். இதில் 0% என்பது சாய்வின் தொடக்கத்தையும், 100% என்பது அதன் முடிவையும் குறிக்கும்.
• நிறுத்தங்களின் எண்ணிக்கை: இக்கருவியில் நீங்கள் அதிகபட்சமாக எட்டு வண்ண நிறுத்தங்கள் வரை சேர்க்கலாம்.
• இயல்புநிலை அமைப்புகள்: புதிதாகச் சேர்க்கப்படும் வண்ண நிறுத்தங்கள் இயல்பாக 50% நிலையில் அமையும்.
• வரம்பு: நீங்கள் அதிகபட்ச வரம்பான எட்டு வண்ண நிறுத்தங்களைச் சேர்த்தவுடன், மேலும் நிறுத்தங்களைச் சேர்க்க அனுமதிக்கும் "நிறுத்தத்தைச் சேர்" பொத்தான் செயலிழக்கப்படும்.

---

வண்ணச்சரிவு உருவாக்கி கருவியைப் பயன்படுத்தும் முறை

இந்தக் கருவியானது இணைய வடிவமைப்பாளர்கள் மற்றும் மென்பொருள் உருவாக்குநர்கள் தங்களுக்குத் தேவையான வண்ணச் சாய்வுகளை எளிதாக வடிவமைக்க உதவுகிறது. இக்கருவியை எவ்வாறு திறம்படப் பயன்படுத்தலாம் என்பதற்கான வழிமுறைகள் கீழே கொடுக்கப்பட்டுள்ளன:

1. சாய்வு வகை தேர்வு: முதலில் "நேரியல்", "ஆரவடிவ" அல்லது "கூம்பு வடிவ" ஆகியவற்றில் ஒன்றைத் தேர்ந்தெடுக்கவும்.
2. திசை அல்லது வடிவம் அமைத்தல்:
   • நேரியல் அல்லது கூம்பு வடிவத்திற்கு, "கோணம்" ஸ்லைடரை நகர்த்தி திசையை அமைக்கவும்.
   • ஆரவடிவ சாய்வுக்கு, "நீள்வட்டம் (Ellipse)" அல்லது "வட்டம் (Circle)" வடிவத்தைத் தேர்ந்தெடுக்கவும்.
3. வண்ண நிறுத்தங்களை நிர்வகித்தல்:
   • புதிய வண்ணங்களைச் சேர்க்க "நிறுத்தத்தைச் சேர்" பொத்தானைப் பயன்படுத்தவும்.
   • தேவையற்ற வண்ணங்களை நீக்க "நிறுத்தத்தை நீக்கு" பொத்தானைப் பயன்படுத்தவும்.
   • ஒவ்வொரு நிறுத்தத்திற்கும் "நிறுத்த வண்ணம்" மற்றும் அதன் "நிலை" சதவீதத்தை மாற்றியமைக்கவும்.
4. முன்னோட்டம் மற்றும் குறியீடு: நீங்கள் மாற்றங்களைச் செய்யும்போது நேரடி முன்னோட்டத்தைக் காண முடியும். வடிவமைப்பு திருப்திகரமாக அமைந்ததும், "CSS-ஐ நகலெடு" பொத்தானைக் கிளிக் செய்யவும். கிளிக் செய்தவுடன் அந்தப் பொத்தான் "நகலெடுக்கப்பட்டது" என்று மாறும், இப்போது குறியீடு உங்கள் கிளிப்போர்டில் நகலெடுக்கப்பட்டிருக்கும்.

---

தனியுரிமை மற்றும் தரவு செயலாக்கம்

நீங்கள் உருவாக்கும் ஒவ்வொரு வண்ணச் சாய்வும் நேரடியாக உங்கள் இணைய உலாவியிலேயே (Browser) ரெண்டர் செய்யப்படுகிறது. நீங்கள் இங்கு அமைக்கும் எந்தவொரு வண்ண அமைப்போ, குறியீடோ அல்லது தரவோ BroBroGo-விற்கு பதிவேற்றப்படாது.

---

அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)

linear, radial மற்றும் conic சாய்வுகளுக்கு இடையே உள்ள வேறுபாடு என்ன?

ஒரு நேரியல் (linear) சாய்வு நீங்கள் கோணத்தைக் கொண்டு அமைக்கும் நேர்க்கோட்டில் வண்ணங்களை இணைக்கிறது. ஒரு ரேடியல் (radial) சாய்வு மையத்திலிருந்து வெளிப்புறமாக வட்டம் அல்லது நீள்வட்ட வடிவில் அவற்றை பரப்புகிறது. ஒரு கூம்பு (conic) சாய்வு வண்ணச் சக்கரத்தைப் போல மையத்தைச் சுற்றி வண்ணங்களைச் சுழற்றுகிறது.

வண்ண நிறுத்தங்கள் (color stops) என்றால் என்ன?

ஒவ்வொரு வண்ண நிறுத்தமும் சாய்வுப் பாதையில் ஒரு குறிப்பிட்ட நிலையில் பொருத்தப்பட்ட வண்ணமாகும் — தொடக்கத்தில் 0%, முடிவில் 100%. அதன் வண்ணம் எங்கு அதிகமாக இருக்க வேண்டும் என்பதை மாற்ற ஒரு நிறுத்தத்தை நகர்த்தவும், அல்லது பணக்கார கலவையைப் பெற கூடுதல் நிறுத்தங்களைச் சேர்க்கவும். நீங்கள் எட்டு நிறுத்தங்கள் வரை பயன்படுத்தலாம்.

திசையை நான் எவ்வாறு கட்டுப்படுத்துவது?

ஒரு நேரியல் (linear) அல்லது கூம்பு (conic) சாய்வுக்கு, கோண ஸ்லைடர் திசையை அமைக்கிறது — 0° மேல்நோக்கியும், 90° வலப்புறமும் குறிக்கும். ரேடியல் (radial) சாய்வுக்கு கோணம் இல்லை; அது பரவும் முறையை மாற்ற அதற்குப் பதிலாக வட்டம் அல்லது நீள்வட்ட வடிவத்தைத் தேர்ந்தெடுக்கவும்.