Home-theater-designers
நீங்கள் சில நிமிடங்களுக்கு மேல் இணையத்தில் இருந்திருந்தால், நீங்கள் ஒரு CSS சாய்வைக் காண வாய்ப்புள்ளது. CSS பின்னணி சொத்து பல்வேறு பாணிகளின் வரம்பை உருவாக்க பயன்படுகிறது, மேலும் சாய்வு மதிப்பில் என்ன செய்ய முடியும் என்பது மிகவும் புதிரான வகைகளில் ஒன்றாகும்.
வெவ்வேறு சிஎஸ்எஸ் சாய்வுகளை எவ்வாறு வடிவமைப்பது மற்றும் உருவாக்குவது என்பது எந்த மென்பொருள் வடிவமைப்பாளருக்கும் அல்லது டெவலப்பருக்கும் ஒரு சொத்து. இந்த கட்டுரையிலிருந்து, உங்கள் திட்டங்களில் CSS சாய்வுகளை இணைக்கத் தொடங்க நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தையும் கற்றுக்கொள்வீர்கள்.
CSS சாய்வு என்றால் என்ன?
ஒரு CSS சாய்வு என்பது இரண்டு அல்லது அதற்கு மேற்பட்ட வண்ணங்களின் கலவையாகும், அவை ஒன்றிலிருந்து மற்றொன்றுக்கு சீராக மாறுகின்றன. ஒரு CSS சாய்வின் இடைநிலை நிலை பயன்படுத்தப்படும் சாய்வு வகையைப் பொறுத்தது. மென்பொருள் வடிவமைப்பில் பொதுவாக பயன்படுத்தப்படும் இரண்டு முக்கிய சாய்வு வகைகள் உள்ளன: நேரியல் மற்றும் ரேடியல்.
இருப்பினும், மூன்றாவது வகை சாய்வு குறைவாக பிரபலமானது மற்றும் கூம்பு சாய்வு என்று அழைக்கப்படுகிறது.
CSS சாய்வு தொடரியல்
Background-image: gradient-type (direction, color1, color2);
CSS சாய்வு பின்னணி-பட CSS சொத்துக்கு ஒதுக்கப்பட வேண்டும். சாய்வு வகை பலவற்றில் ஒன்றாக இருக்கலாம்; நேரியல்-சாய்வு, ரேடியல்-சாய்வு அல்லது கூம்பு-சாய்வு. சாய்வு வகை சாய்வின் இடைநிலை திசையையும், சாய்வில் சேர்க்கப்பட வேண்டிய வண்ணங்களையும் கொண்டிருக்கும் அடைப்புக்குறிகளைத் திறந்து மூடுவதைத் தொடர்ந்து வருகிறது.
தொடர்புடையது: CSS இல் பின்னணி படத்தை எப்படி அமைப்பது
மேலே உள்ள உதாரணம் இரண்டு வண்ணங்களைக் காட்டுகிறது, ஆனால் ஒரு சாய்வு பல்வேறு வண்ணங்களைக் கொண்டிருக்கலாம். பட்டியலில் உள்ள ஒவ்வொரு நிறமும் கமாவால் பிரிக்கப்படுவது மட்டுமே தேவை.
நேரியல் சாய்வு என்றால் என்ன?
நேரியல் சாய்வு மிகவும் பிரபலமான CSS சாய்வு ஆகும். இது இரண்டு அல்லது அதற்கு மேற்பட்ட வண்ணங்களைப் பயன்படுத்தி ஒரு கிடைமட்ட, செங்குத்து அல்லது மூலைவிட்ட மாற்றும் சாய்வை உருவாக்குகிறது.
CSS நேரியல் சாய்வு உதாரணம்
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
மேலே உள்ள குறியீடு பின்வரும் CSS சாய்வை உருவாக்கும்:
மேலே உள்ள உதாரணத்திலிருந்து தவிர்க்கப்பட்ட சாய்வு தொடரியலின் ஒரு முக்கிய கூறு உள்ளது. இந்த கூறு சாய்வின் இடைநிலை திசையாகும், மேலும் நேரியல் சாய்வின் இயல்புநிலை சீரமைப்பு செங்குத்தாக இருப்பதால் (இது மேலிருந்து கீழாக); இந்த எடுத்துக்காட்டில் விரும்பிய வெளியீடு.
மேலே உள்ள குறியீடு பின்வரும் குறியீட்டின் அதே முடிவை உருவாக்குகிறது. இரண்டிற்கும் உள்ள ஒரே வித்தியாசம் குறியீட்டின் திசை பிரிவு.
கீழ் நேரியல் சாய்வு உதாரணத்தைப் பயன்படுத்துதல்
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
வெளியீட்டில் இருந்து பார்க்க முடிந்தால் மேலே உள்ள குறியீடு மேலே நீல நிறத்தில் தொடங்கும் சாய்வை உருவாக்குகிறது, பின்னர் கீழே உள்ள ஆரஞ்சுக்கு மெதுவாக மாறும். நீங்கள் வண்ணங்களின் வரிசையை மாற்றியமைக்க விரும்பினால், நீங்கள் அதை மாற்றலாம் கீழே உடன் மேல் நோக்கி இது சாய்வின் திசையை மாற்றியமைத்து, பின்வரும் வெளியீட்டை உருவாக்கும்:
செங்குத்து சீரமைப்பைப் போலவே, இரண்டு செட் திசைச் சொற்களைப் பயன்படுத்தி ஒரு சாய்வின் கிடைமட்ட சீரமைப்பை அடைய முடியும்: இடது மற்றும் வலதுபுறம் , முறையே பின்வரும் வெளியீடுகளை உருவாக்கும்.
அநாமதேய பேஸ்புக் கணக்கை உருவாக்குவது எப்படி
மூலைவிட்ட நேரியல் சாய்வு
ஒரு நேரியல் சாய்வின் எந்த திசையிலும் ஒரு மூலைவிட்ட நேரியல் சாய்வு மாற்றத்தை அடைய முடியும். இதைச் செய்ய நீங்கள் தெரிந்து கொள்ள வேண்டிய முக்கிய வார்த்தைகளின் நான்கு குறிப்பிட்ட பட்டியல்கள் உள்ளன.
- கீழ் வலதுபுறம்
- கீழே இடதுபுறம்
- மேல் வலதுபுறம்
- மேல் இடதுபுறம்
மூலைவிட்ட நேரியல் சாய்வு உதாரணத்தைப் பயன்படுத்துதல்
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
மேலே உள்ள உதாரணம் பின்வரும் வெளியீட்டை உருவாக்குகிறது:
மேலே உள்ள வெளியீட்டில் இருந்து நீங்கள் பார்க்க முடியும் என, நேர்கோட்டு சாய்வு அதன் மேல் இடதுபுறத்தில் இருந்து கீழ் வலது பகுதிக்குச் செல்லும் ஒரு குறுக்கு திசையில் அதன் மாற்றத்தை செய்கிறது.
பல வண்ண நேரியல் சாய்வு
ஒரு நேரியல் சாய்வு இரண்டு அல்லது அதற்கு மேற்பட்ட வண்ணங்களைக் கொண்டிருக்கலாம், ஆனால் ஒரு சாய்வில் அதிக வண்ணங்கள் எப்படி இருக்கும்? பல வண்ண நேரியல் சாய்வு வண்ண அமைப்பு அதன் திசையைப் பொறுத்தது. நேர்கோட்டு சாய்வின் சரியான திசையைப் பொறுத்து, கிடைமட்ட திசையில் மாற்றும் ஒவ்வொரு புதிய நிறமும் நேரியல் சாய்வின் இடது அல்லது வலது பக்கம் தோன்றும்.
பல வண்ண நேரியல் சாய்வு உதாரணம்
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
மேலே உள்ள குறியீட்டின் வரி பின்வரும் வெளியீட்டை உருவாக்கும்:
நீங்கள் பார்க்கிறபடி ஒவ்வொரு புதிய நிறமும் சாய்வின் வலதுபுறத்தில் சேர்க்கப்பட்டு, இறுதியில் ஒரு வானவில்லாக உருவெடுக்கிறது. அதே வெளியீட்டை செங்குத்து திசையில் அடையலாம்; இருப்பினும், நேரியல் சாய்வில் குறிப்பிட்ட வண்ண அமைப்பு செங்குத்து திசை முக்கிய வார்த்தையைப் பொறுத்தது (மேல் அல்லது கீழ்).
ரேடியல் சாய்வு என்றால் என்ன?
ரேடியல் சாய்வு இயல்பாக மையத்திலிருந்து தொடங்கும் இரண்டு நிறங்களின் சுழல் சாய்வை உருவாக்குகிறது. நேரியல் சாய்வு செங்குத்தாக அல்லது கிடைமட்டமாக பாயும் நேரான சாய்வை உருவாக்கும் இடத்தில், ரேடியல் சாய்வு மையத்திலிருந்து வெளிப்புற விளிம்புகளுக்கு பாயும் வட்ட சாய்வை உருவாக்குகிறது.
ரேடியல் சாய்வு உதாரணத்தைப் பயன்படுத்துதல்
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
மேலே உள்ள குறியீட்டின் வரி பின்வரும் வெளியீட்டை உருவாக்கும்:
ரேடியல் சாய்வு மையத்தை மாற்றுதல்
இயல்பாக ஒரு ரேடியல் சாய்வு சாய்வின் மையத்தில் தொடங்குகிறது; இருப்பினும், சில முக்கிய வார்த்தைகளை அறிமுகப்படுத்துவதன் மூலம் தோற்றத்தின் புள்ளியை மாற்ற முடியும்.
குரோம் குறைவான நினைவகத்தை எவ்வாறு பயன்படுத்துவது?
ரேடியல் சாய்வு தொடக்க நிலை உதாரணத்தை மாற்றுதல்
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
மேலே உள்ள குறியீட்டின் வரி பின்வரும் வெளியீட்டை உருவாக்கும்:
சாய்வின் மேலே உள்ள வெளியீட்டில் இருந்து நீங்கள் பார்க்க முடியும் என இப்போது மையத்திற்கு பதிலாக மேல் வலது மூலையில் இருந்து தொடங்குகிறது. முக்கிய சொல் சேர்க்கப்படுவதால் இந்த மாற்றம் சாத்தியமாகும் மேல் வலது மேலே உள்ள குறியீட்டில். ரேடியல் சாய்வின் தோற்ற புள்ளியை மாற்ற பின்வரும் முக்கிய வார்த்தைகளின் பட்டியலையும் பயன்படுத்தலாம்:
- மேல் இடது
- கீழ் வலது
- கீழே இடது
பல வண்ண ரேடியல் சாய்வு
நேரியல் சாய்வு போல, ரேடியல் சாய்வு இரண்டு வண்ணங்களைப் பயன்படுத்தலாம், முக்கிய வேறுபாடு என்னவென்றால், நேரியல் சாய்வு ஒரு நேர் கோட்டில் சாய்வைச் சேர்க்கிறது, ரேடியல் சாய்வு வெளிப்புற விளிம்பில் புதிய வண்ணங்களைச் சேர்க்கிறது.
பல வண்ண ரேடியல் சாய்வு உதாரணம்
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
மேலே உள்ள குறியீட்டின் வரி பின்வரும் வெளியீட்டை உருவாக்கும்:
தனிப்பயனாக்குதல் சாய்வு
ஒரு சாய்வின் திசையையும் மையப் புள்ளியையும் எப்படி மாற்றுவது என்பதை இதுவரை நீங்கள் பார்த்திருக்கிறீர்கள், ஆனால் ஒரு சாய்வை எவ்வாறு தனிப்பயனாக்குவது என்பதை நீங்கள் பார்க்கவில்லை. ஒரு சாய்வைத் தனிப்பயனாக்குவது நிறைய வேலை போல் தோன்றலாம், ஆனால் ஒரு CSS பின்னணி சாய்வை உருவாக்குவதற்கான அடிப்படைகளை நீங்கள் புரிந்துகொண்டவுடன் அடுத்த தெளிவான படி உங்கள் CSS சாய்வுகளை எவ்வாறு தனித்துவமாக்குவது என்பதைக் கற்றுக்கொள்வது.
க்ரூட்டன் இல்லாமல் Chromebook இல் லினக்ஸை நிறுவவும்
இயல்பாக, ஒரு சாய்வில் உள்ள நிறங்கள் சமமாக விநியோகிக்கப்பட்ட இடத்தை ஆக்கிரமித்து ஒவ்வொரு நிறமும் அதன் பின் நிறத்திற்கு சீராக மாற்றப்படும். எனவே இரண்டு நிறங்கள் இணைக்கப்பட்டால் ஒரு சாய்வு உருவாகிறது, ஒவ்வொரு நிறமும் ஒன்றிலிருந்து மற்றொன்றுக்கு மாறும்போது கிடைக்கும் இடத்தின் பாதியை ஆக்கிரமிக்கும். மூன்று வண்ணங்கள் இணைந்தால், ஒவ்வொரு நிறமும் கிடைக்கும் இடத்தின் மூன்றில் ஒரு பகுதியை ஆக்கிரமிக்கும்.
தனிப்பயனாக்கப்பட்ட சாய்வு மூலம், ஒரு வண்ணத்தை ஒரு சாய்வில் ஆக்கிரமிக்கும் இடத்தை நீங்கள் வெளிப்படையாக ஒதுக்குவதன் மூலம் வரையறுக்கலாம் வண்ண நிறுத்த நிலை .
நேரியல் சாய்வு எடுத்துக்காட்டு 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
மேலே உள்ள குறியீட்டின் வரி பின்வரும் வெளியீட்டை உருவாக்கும்:
மேலே உள்ள வெளியீடு நேரியல் சாய்வின் இரண்டாவது நிறத்தை அதன் வழக்கமான நிலைக்கு பதிலாக, முதல் நிறத்தின் 30% புள்ளியில் நிறுத்துவதைக் காட்டுகிறது, மேலும் இரண்டாவது நிறமும் சாய்வில் இறுதி நிறமாக இருப்பதால் அது இயற்கையாகவே இறுதி வரை நீட்டிக்கப்படுகிறது .
முதல் வண்ணத்தின் முடிவில் மேலே உள்ள குறியீட்டில் 30% ஐ நீங்கள் வைக்க விரும்பினால், விஷயங்கள் தெளிவாக இருக்க வேண்டும்.
நேரியல் சாய்வு எடுத்துக்காட்டு 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
மேலே உள்ள குறியீடு பின்வரும் வெளியீட்டை உருவாக்கும்.
மேலே உள்ள வெளியீடு சாய்வு முதல் நிறத்தை சாய்வில் இரண்டாவது நிறத்தின் 30% புள்ளியில் நிறுத்துவதை தெளிவாக காட்டுகிறது. இந்த உதாரணம் மேலே உள்ளவற்றுடன் வண்ண-நிறுத்த தனிப்பயனாக்கத்தை உங்களுக்கு எளிதாகப் புரிந்துகொள்ள உதவும்.
ஒரு ரேடியல் சாய்வைத் தனிப்பயனாக்குவது ஒரு நேரியல் சாய்வு போலவே செய்யப்படுகிறது. ரேடியல் சாய்வில் மேலே உள்ள அதே முடிவுகளை அடைய நீங்கள் செய்ய வேண்டிய ஒரே விஷயம், சாய்வு வகை மற்றும் திசையை மாற்றுவதுதான்.
CSS சாய்வுகளை உருவாக்குவது எளிதாக இருந்ததில்லை
இந்த டுடோரியல் கட்டுரை நேரியல் மற்றும் ரேடியல் சாய்வுகளை அடையாளம் கண்டு உருவாக்க கருவிகளை வழங்குகிறது. இந்த நிலைக்கு நீங்கள் சென்றிருந்தால், ஒரு சாய்வின் திசையையும் மையத்தையும் எப்படி மாற்றுவது என்பதை நீங்கள் கற்றுக்கொண்டீர்கள். கூடுதலாக, நீங்கள் இப்போது CSS சாய்வுகளைத் தனிப்பயனாக்க மற்றும் தனித்துவமான பின்னணி சாய்வுகளை உருவாக்கும் திறன்களைக் கொண்டுள்ளீர்கள்.
இருப்பினும், புதிய மற்றும் தனித்துவமான சாய்வுகளை உருவாக்க நீங்கள் நேராக செல்ல விரும்பவில்லை என்றால், முன்பே இருக்கும் சில சிறந்த தோற்றங்களை உருவாக்குவதன் மூலம் நீங்கள் தொடங்கலாம்.
பகிர் பகிர் ட்வீட் மின்னஞ்சல் 27 ஸ்டைலான CSS பின்னணி சாய்வு உதாரணங்கள்கடந்த ஆண்டு திட நிறங்கள். சாய்வுகள் உள்ளன! ஆனால் CSS இல் அவற்றை எவ்வாறு உருவாக்குவது?
அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்- நிரலாக்க
- இணைய மேம்பாடு
- வலை வடிவமைப்பு
- CSS
கதீஷா கீன் ஒரு முழு அடுக்கு மென்பொருள் டெவலப்பர் மற்றும் தொழில்நுட்ப/தொழில்நுட்ப எழுத்தாளர். மிகவும் சிக்கலான சில தொழில்நுட்பக் கருத்துகளை எளிமையாக்கும் தனித்துவமான திறமை அவளிடம் உள்ளது; எந்தவொரு தொழில்நுட்ப புதியவராலும் எளிதில் புரிந்துகொள்ளக்கூடிய பொருள் உற்பத்தி. அவர் எழுதுவது, சுவாரஸ்யமான மென்பொருளை உருவாக்குவது மற்றும் உலகம் முழுவதும் (ஆவணப்படங்கள் மூலம்) பயணம் செய்வதில் ஆர்வம் கொண்டவர்.
கதீஷா கீனிடமிருந்து மேலும்எங்கள் செய்திமடலுக்கு குழுசேரவும்
தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!
குழுசேர இங்கே சொடுக்கவும்