🌅CSS சாய்வு வண்ண உருவாக்கி

linear, radial, conic இடையேயான வேறுபாடு

CSS சாய்வு வண்ணங்களில், நிறம் மாறும் விதம் வேறுபட்ட மூன்று செயல்பாடுகள் உள்ளன, அனைத்தும் background பண்பில் எழுதிப் பயன்படுத்தப்படும்.

• linear-gradient：linear-gradient என்பது குறிப்பிட்ட கோணத்தின் நேர்கோட்டில் நிறம் மாறும் நேர்கோட்டு சாய்வு வண்ணமாகும்.
• radial-gradient：radial-gradient என்பது மைய இடத்திலிருந்து வெளிப்புறமாக வட்டம் அல்லது நீள்வட்ட வடிவில் நிறம் பரவும் வட்ட சாய்வு வண்ணமாகும்.
• conic-gradient：conic-gradient என்பது மைய இடத்தைச் சுற்றி கடிகார திசையில் ஒரு முறை சுற்றும்போது நிறம் மாறும் கூம்பு வடிவ சாய்வு வண்ணமாகும்.

கோணம் மற்றும் திசை முக்கிய சொற்களின் தொடர்பு

linear-gradient-இன் கோணம் 0deg-இல் கீழிருந்து மேலே செல்லும் திசையாக இருக்கும், எண் மதிப்பு அதிகரிக்க அதிகரிக்க கடிகார திசையில் சுழலும். கோணத்தை "to right" போன்ற திசை முக்கிய சொற்களாலும் எழுதலாம், 90deg என்பது "to right"-க்கும், 180deg என்பது "to bottom"-க்கும் சமமான திசையாகும்.

வண்ண நிறுத்தப் புள்ளிகளும் ஒளிஊடுருவுத்தன்மையும் எழுதும் முறை

வண்ண நிறுத்தப் புள்ளி (color stop) என்பது சாய்வு வண்ணத்தில் அந்த நிறம் தோன்றும் இடத்தைக் குறிக்கும், 0% தொடக்க புள்ளியையும் 100% முடிவுப் புள்ளியையும் குறிக்கும். எடுத்துக்காட்டாக, "#3B82F6 0%, #8B5CF6 100%" என்பது தொடக்க நீல நிறத்திலிருந்து முடிவு ஊதா நிறத்திற்கு மாறும் குறிப்பீடாகும்.

• #RRGGBB வடிவம்：#RRGGBB வடிவம் என்பது சிவப்பு, பச்சை, நீலத்தின் வலிமையை இரண்டு இலக்க ஹெக்ஸாடெசிமலில் குறிக்கும் நிற எழுத்துமுறையாகும், #FF0000 என்பது ஒளிஊடுருவாத சிவப்பு நிறத்தைக் குறிக்கும்.
• rgba வடிவம்：rgba வடிவம் என்பது சிவப்பு, பச்சை, நீல மதிப்புகளுடன் (0 முதல் 255 வரை) ஒளிஊடுருவுத்தன்மையையும் (0 முதல் 1 வரை) சேர்த்த நிற எழுத்துமுறையாகும், ஒளிஊடுருவுத்தன்மை 0.5 என்பது பாதி ஊடுருவும் நிறத்தைக் குறிக்கும்.