27 ஸ்டைலான CSS பின்னணி சாய்வு உதாரணங்கள்

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

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

சிஎஸ்எஸ் பயன்படுத்தி பின்னணி சாய்வு

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

தொடக்கத்தில் உட்பட எதிர்காலத்தில் ஒரு பணி அல்லது திட்டத்தை தொடங்க அமைக்கலாம்

மூன்று வகையான சாய்வுகள் உள்ளன: நேரியல் (உடன் உருவாக்கப்பட்டது நேரியல்-சாய்வு () செயல்பாடு), ஆரம் (உடன் உருவாக்கப்பட்டது ரேடியல்-சாய்வு () செயல்பாடு), மற்றும் கூம்பு (உடன் உருவாக்கப்பட்டது கூம்பு-சாய்வு () செயல்பாடு). மேலும், நீங்கள் மீண்டும் மீண்டும் சாய்வுகளை உருவாக்கலாம் மீண்டும் மீண்டும்-நேரியல்-சாய்வு () , மீண்டும்-ரேடியல்-சாய்வு () , மற்றும் மீண்டும் மீண்டும்-கூம்பு-சாய்வு () செயல்பாடுகள்

MDN டாக்ஸ் இந்த செயல்பாடுகளை இவ்வாறு வரையறுக்கிறது:

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

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

கூம்பு-சாய்வு () : தி கூம்பு-சாய்வு () CSS செயல்பாடு ஒரு மையப் புள்ளியைச் சுற்றி சுழலும் வண்ண மாற்றங்களைக் கொண்ட ஒரு சாய்வைக் கொண்ட ஒரு படத்தை உருவாக்குகிறது (மையத்திலிருந்து கதிர்வீச்சு செய்வதற்குப் பதிலாக). உதாரண கூம்பு சாய்வுகளில் பை விளக்கப்படங்கள் மற்றும் வண்ண சக்கரங்கள் அடங்கும். இதன் விளைவு கூம்பு-சாய்வு () செயல்பாடு ஒரு பொருள் தரவு வகை, இது ஒரு சிறப்பு வகை .

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

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

மீண்டும் மீண்டும்-கூம்பு-சாய்வு () : தி மீண்டும் மீண்டும்-கூம்பு-சாய்வு () CSS செயல்பாடு ஒரு மையப் புள்ளியைச் சுற்றி (மையத்திலிருந்து கதிர்வீச்சு செய்வதை விட) சுழலும் வண்ண மாற்றங்களுடன் மீண்டும் மீண்டும் சாய்வு (ஒற்றை சாய்வை விட) கொண்ட ஒரு படத்தை உருவாக்குகிறது.

ஒவ்வொரு வகை சாய்வின் அதிகாரப்பூர்வ தொடரியல் இங்கே.

நேரியல் சாய்வுகளின் அதிகாரப்பூர்வ தொடரியல்

linear-gradient(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

ரேடியல் சாய்வுகளின் அதிகாரப்பூர்வ தொடரியல்

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

கோனிக் சாய்வுகளின் அதிகாரப்பூர்வ தொடரியல்

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

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