04 இன் 01
CSS3 கொண்டு குறுக்கு உலாவி லீனியர் சரிவுகள் உருவாக்குதல்
நேரியல் சரிவுகள்
நீங்கள் பார்க்கும் சாய்வு மிக பொதுவான வகை இரண்டு வண்ணங்கள் ஒரு நேர்கோட்டு சாய்வு உள்ளது. இதன் அர்த்தம், சாய்வு முதல் வரிசையில் இருந்து படிப்படியாக, அந்த வரிசையுடன் இரண்டாம் நிலைக்கு மாறி மாறும். இந்தப் பக்கத்தில் உள்ள படம் # 999 (அடர் சாம்பல்) #ff (வெள்ளை) க்கு ஒரு எளிய இடது-வலது-வலது gradient ஐக் காட்டுகிறது.
லீனியர் சாய்வுகளை வரையறுக்க எளிதானது, மற்றும் உலாவிகளில் அதிக ஆதரவு உள்ளது. அண்ட்ராய்டு 2.3+, குரோம் 1+, பயர்பாக்ஸ் 3.6+, ஓபரா 11.1+ மற்றும் சபாரி 4+ ஆகியவற்றில் CSS3 நேர்கோட்டு சாய்வு அம்சங்கள் துணைபுரிகின்றன. இன்டர்நெட் எக்ஸ்ப்ளோரர் ஒரு வடிப்பான் பயன்படுத்தி சாய்வுகளை சேர்க்க முடியும் மற்றும் IE 5.5 ஐ மீண்டும் ஆதரிக்கிறது. இது CSS3 அல்ல, ஆனால் அது குறுக்கு உலாவி இணக்கத்தன்மைக்கு ஒரு விருப்பமாகும்.
நீங்கள் ஒரு சாய்வு வரையறுக்க போது நீங்கள் பல்வேறு விஷயங்களை வரையறுக்க வேண்டும்:
- என்ன வகை சாய்வு இது- நேர்கோட்டு அல்லது ரேடியல்
- சாய்வு தொடங்க வேண்டும் எங்கே
- சாய்வு நிறுத்தப்பட வேண்டும்
- என்ன நிறங்கள் சாய்வு மற்றும் எங்கே அவர்கள் தொடங்க மற்றும் நிறுத்த வேண்டும்
CSS3 பயன்படுத்தி நேரியல் சாய்வுகளை வரையறுக்க, நீங்கள் எழுதுங்கள்:
நேர்கோட்டு-சாய்வு ( கோணம் அல்லது பக்க அல்லது மூலையில் , வண்ண ஸ்டாப் , வண்ண நிறுத்த )
- முதல் நீங்கள் பெயர் நேரியல்- முனை கொண்ட சாய்வு வகை வரையறுக்க.
- பின்னர், நீங்கள் இரண்டு வழிகளில் ஒன்றில் சாய்வு தொடக்க மற்றும் நிறுத்த புள்ளிகளை வரையறுக்க: 0 முதல் 359 டிகிரி கோணத்தின் கோணம், 0 டிகிரி நேராக சுட்டிக்காட்டி. அல்லது "பக்க அல்லது மூலையில்" செயல்பாடு, இடது, வலது, கீழ் மற்றும் மேல் போன்ற. அடுத்த பக்கத்தில் மேலும் விவரிக்கப்படுவார்கள். நீங்கள் இதை வெளியே விட்டால், சாய்வு மேலே இருந்து உறுப்பு கீழே வரை ஓடும்.
- பின்னர் நீங்கள் நிறம் நிறுத்தங்கள் வரையறுக்க. நீங்கள் வண்ண குறியீடு மற்றும் ஒரு விருப்ப சதவிகிதம் வண்ண நிற்கிறது வரையறுக்க. சதவீதம் அந்த நிறத்தை தொடங்கும் அல்லது முடிவடையும் என்று உலாவி சொல்கிறது. இயல்புநிலை வரிகளுடன் சமமாக நிறங்கள் வைக்க வேண்டும். பக்கம் 3 இல் வண்ணத் தட்டுகளைப் பற்றி மேலும் அறிந்து கொள்வீர்கள்.
எனவே, CSS3 உடன் மேலே சாய்வு வரையறுக்க, நீங்கள் எழுத:
நேரியல்-சாய்வு (இடது, # 999999 0%, #ffffff 100%);
நீங்கள் ஒரு DIV பின்னணியாக அதை அமைக்க நீங்கள் எழுது:
div {
பின்னணி-படம்: நேரியல்-சாய்வு (இடது, # 999999 0%, #ffffff 100%;
}
CSS3 லீனியர் சரிவிகளுக்கான உலாவி நீட்டிப்புகள்
குறுக்கு-உலாவியில் வேலை செய்ய உங்கள் சாய்வு பெற, நீங்கள் பெரும்பாலான உலாவிகளுக்கு உலாவி நீட்டிப்புகளையும் Internet Explorer 9 மற்றும் குறைந்த (உண்மையில் 2 வடிப்பான்கள்) க்கான வடிப்பான் பயன்படுத்த வேண்டும். இந்த அனைத்து உங்கள் சாய்வு வரையறுக்க அதே உறுப்புகள் எடுத்து (நீங்கள் மட்டும் IE உள்ள 2 வண்ண சாய்வு வரையறுக்க முடியாது தவிர).
மைக்ரோசாப்ட் வடிகட்டிகள் மற்றும் நீட்டிப்பு - இன்டர்நெட் எக்ஸ்ப்ளோரர் ஆதரவுக்கு மிகவும் சவாலானது, ஏனென்றால் வெவ்வேறு உலாவி பதிப்பை ஆதரிக்க நீங்கள் மூன்று வெவ்வேறு கோடுகள் வேண்டும். மேலே சாம்பல் வெள்ளை சாய்வு பெற நீங்கள் எழுத வேண்டும்:
/ * IE 5.5-7 * /
வடிகட்டி: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (இடது, # 999999 0%, #ffffff 100%);
மொஸில்லா நீட்டிப்பு -moz- நீட்டிப்பு -moz- நீட்டிப்புடன், CSS3 சொத்து போன்ற வேலைகள். ஃபயர்பாக்ஸின் மேலே சாய்வு பெற, எழுது:
-மோஸ்-லேசர்-சாய்வு (இடது, # 999999 0%, #ffffff 100%);
ஓபரா நீட்டிப்பு -ஓ-நீட்டிப்பு ஓபரா 11.1 க்கு சாய்வுகளை சேர்க்கிறது. மேலே சாய்வு பெற, எழுது:
-ஓ-நேரியல்-சாய்வு (இடது, # 999999 0%, #ffffff 100%);
வெப்கிட் நீட்டிப்பு -வெப்கிட்- நீட்டிப்பு CSS3 சொத்து போன்ற நிறைய வேலை செய்கிறது. சஃபாரி 5.1+ அல்லது Chrome 10 க்கு மேலேயுள்ள சாய்வு வரையறுக்க நீங்கள் எழுதுவீர்கள்:
-webkit-linear-gradient (இடது, # 999999 0%, #ffffff 100%);
Chrome 2+ மற்றும் Safari 4+ உடன் வேலை செய்யும் வெப்கிட் நீட்டிப்பின் பழைய பதிப்பும் உள்ளது. அதில் நீங்கள் சொத்து மதிப்பு பெயரைக் காட்டிலும் ஒரு மதிப்பாக சாய்வு வகையை வரையறுக்கலாம். இந்த நீட்டிப்புடன் சாம்பல் வெள்ளை சாய்வுக்கு எழுத, எழுதவும்:
-வெப்கிட்-சாய்வு (நேரியல், இடது மேல், வலது மேல், வண்ண-நிறுத்த (0%, # 999999), வண்ண-நிறுத்த (100%, # ffffff));
முழு CSS3 லைனர் சரிவு CSS கோட்
முழு குறுக்கு உலாவி ஆதரவு நீங்கள் மேலே வெள்ளை சாய்வு சாம்பல் பெற சாய்வு ஆதரவு இல்லை என்று உலாவிகளில் ஒரு குறைவடையும் திட வண்ண சேர்க்க வேண்டும், மற்றும் கடைசி உருப்படியை முழுமையாக இணக்கம் என்று உலாவிகளில் CSS3 பாணி இருக்க வேண்டும். எனவே, நீங்கள் எழுதுவீர்கள்:
பின்னணி: # 999999;
பின்னணி: -எம்ஓஸ்-லேசர்-சாய்வு (இடது, # 999999 0%, #ffffff 100%);
பின்புலம்: -வெப்கிட்-சாய்வு (நேர்கோட்டு, இடது மேல், வலது மேல், வண்ண-நிறுத்த (0%, # 999999), வண்ண-நிறுத்த (100%, # ffffff));
பின்புலம்: -வெப்கிட்-நேரியல்-சாய்வு (இடது, # 999999 0%, #ffffff 100%);
பின்புலம்: -ஓ-லீனார்-சாய்வு (இடது, # 999999 0%, #ffffff 100%);
பின்புலம்: -ms-linear-gradient (இடது, # 999999 0%, #ffffff 100%);
வடிகட்டி: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
பின்புலம்: நேரியல்-சாய்வு (இடது, # 999999 0%, #ffffff 100%);
இந்த டுடோரியலில் அடுத்த பக்கங்களை மேலும் விரிவாக ஒரு சாய்வு பகுதியை விளக்குங்கள், மற்றும் கடைசி பக்கம் நீங்கள் தானாக CSS3 சாய்வுகளை உருவாக்க ஒரு சிறந்த வழி என்று ஒரு கருவி சுட்டிக்காட்டுகிறது.
வெறும் CSS ஐப் பயன்படுத்தி செயல்பாட்டில் இந்த நேரியல் சாய்வு பார்க்கவும்.
04 இன் 02
மூலைவிட்ட சரிவுகள் உருவாக்குதல் - சரிவுகளின் கோணம்
தொடக்க மற்றும் நிறுத்த புள்ளிகள் சாய்வுக் கோணத்தை தீர்மானிக்கின்றன. பெரும்பாலான நேர்கோட்டு சாய்வுகளானது மேலே இருந்து கீழே அல்லது இடமிருந்து வலமாக இருக்கும். ஆனால் ஒரு மூலைவிட்ட கோட்டில் நகரும் ஒரு சாய்வு உருவாக்க முடியும். இந்தப் பக்கத்தில் உள்ள படம், வலதுபுறமாக இருந்து படத்தில் 45 டிகிரி கோணத்தில் நகரும் ஒரு எளிய சாய்வு காட்டுகிறது.
சரிவு வரி வரையறுக்க கோணங்கள்
கோணம் உறுப்பு மையத்தில் ஒரு கற்பனை வட்டம் ஒரு வரி. 0deg புள்ளிகள் வரை, 90deg புள்ளிகள் வலது, 180deg புள்ளிகள் கீழே, மற்றும் 270deg இடது புள்ளிகள். நீங்கள் 0 முதல் 359 டிகிரி வரை எந்த கோணத்தையும் வரையறுக்கலாம்.
ஒரு சதுரத்தில், 45 டிகிரி கோணம் மேல் இடது மூலையில் இருந்து கீழே வலதுபுறமாக நகர்கிறது, ஆனால் ஒரு செவ்வக வடிவத்தில் தொடக்க மற்றும் இறுதி புள்ளிகள் வடிவத்தில் வெளியே உள்ளன, நீங்கள் படத்தில் பார்க்க முடியும்.
ஒரு குறுக்கு சாய்வு வரையறுக்க மிகவும் பொதுவான வழி, மேல் வலது மற்றும் சாய்வு அந்த மூலையிலிருந்து எதிர் மூலையில் செல்ல வேண்டும் போன்ற ஒரு மூலையில் வரையறுக்க உள்ளது. பின்வரும் முக்கிய வார்த்தைகளுடன் ஆரம்ப இடுகையை வரையறுக்கலாம்:
- மேல்
- வலது
- கீழே
- விட்டு
- சென்டர்
அவர்கள் மேலும் குறிப்பிட்ட வகையில் இருக்க வேண்டும், இது போன்றது:
- மேல் வலது
- மேல் இடது
- மேல் மையம்
- கீழ் வலது
- கீழே உள்ளது
- கீழே மையம்
- வலது சென்டர்
- இடது மையம்
இங்கே மேலே வலது மேல் மூலையில் இருந்து கீழே இடது வெள்ளை நகரும் சிவப்பு, படம் ஒரு சாய்வு ஒரு CSS உள்ளது:
பின்னணி: ## 901A1C;
பின்னணி-படம்: -எம்ஓஸ்-லேசர்-சாய்வு (வலது மேல், # 901A1C 0%, # FFFFFF 100%);
பின்னணி-படம்: -வெப்கிட்-சாய்வு (நேரியல், வலது மேல், இடது கீழ், வண்ண-நிறுத்த (0, # 901A1C), வண்ண-நிறுத்த (1, #FFFFFF));
பின்புலம்: -வெப்கிட்-லேசர்-சாய்வு (வலது மேல், # 901A1C 0%, #ffffff 100%);
பின்னணி: -ஓ-லீனார்-சாய்வு (வலது மேல், # 901A1C 0%, #ffffff 100%);
பின்புலம்: -ms-linear-gradient (வலது மேல், # 901A1C 0%, #ffffff 100%);
பின்னணி: நேரியல்-சாய்வு (வலது மேல், # 901A1C 0%, #ffffff 100%);
இந்த எடுத்துக்காட்டில் IE வடிகட்டிகள் இல்லை என்பதை நீங்கள் கவனித்திருக்கலாம். ஏனென்றால் IE ஆனது இரண்டு வகையான வடிகட்டிகளை மட்டுமே அனுமதிக்கிறது: மேலே இருந்து (இயல்புநிலை) மற்றும் இடமிருந்து வலம் (GradientType = 1 சுவிட்சுடன்).
இந்த குறுக்குவெட்டு நேரியல் சாய்வு செயல்திறன் ஒரு CSS ஐப் பயன்படுத்தி பார்க்கவும்.
04 இன் 03
வண்ண நிறுத்தங்கள்
CSS3 நேரியல் சாய்வுகளுடன், நீங்கள் கூட ரசிகர் விளைவுகளை உருவாக்க உங்கள் சாய்வு பல வண்ணங்கள் சேர்க்க முடியும். இந்த நிறங்களைச் சேர்க்க, உங்கள் சொத்தின் இறுதியில் கூடுதல் வண்ணங்களைக் கொண்டு, காற்புள்ளிகளால் பிரிக்கப்பட்ட. வண்ணங்களில் தொடங்கும் அல்லது முடிக்க வேண்டிய வரிசையில் நீங்கள் சேர்க்க வேண்டும்.
இண்டர்நெட் எக்ஸ்ப்ளோரர் வடிகட்டிகள் இரண்டு வண்ண நிறுத்தங்களை மட்டுமே ஆதரிக்கின்றன, எனவே இந்த சாய்வு உருவாக்கும்போது, நீங்கள் காட்ட விரும்பும் முதல் மற்றும் இரண்டாவது வண்ணங்களை மட்டும் நீங்கள் சேர்க்க வேண்டும்.
மேலே உள்ள 3-வண்ண சாய்விற்கான CSS இங்கே உள்ளது:
பின்புலம்: #ffffff;
பின்னணி: -எம்ஓஸ்-லேசர்-சாய்வு (இடது, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
பின்னணி: -வெப்கிட்-சாய்வு (நேர்கோட்டு, இடது மேல், வலது மேல், வண்ண-நிறுத்த (0%, # ffffff), வண்ண-நிறுத்த (51%, # 901A1C), வண்ண-நிறுத்த (100%, # ffffff));
பின்புலம்: -வெப்கிட்-லேசர்-சாய்வு (இடது, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
பின்புலம்: -ஓ-லீனார்-சாய்வு (இடது, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
பின்புலம்: -ms-linear-gradient (இடது, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
பின்புலம்: நேரியல்-சாய்வு (இடது, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
வெறும் CSS ஐ பயன்படுத்தி மூன்று வண்ணத் தட்டுகளுடன் இந்த நேரியல் சாய்வு பார்க்கவும்.
04 இல் 04
கட்டிடம் சரிவுகளை எளிதாக்குங்கள்
நீங்கள் சாய்வுகளை உருவாக்க உதவுவதற்காக பரிந்துரைக்கப்படும் இரண்டு தளங்கள் உள்ளன, அவை ஒவ்வொன்றும் நன்மைகள் மற்றும் குறைபாடுகளைக் கொண்டிருக்கின்றன, இன்னும் அனைத்தையும் செய்யும் சாய்வு கட்டடம் நான் இல்லை.
அல்டிமேட் CSS சரிவு ஜெனரேட்டர்
இந்த சாய்வு ஜெனரேட்டர் மிகவும் பிரபலமாக உள்ளது, ஏனெனில் அது ஃபோட்டோஷாப் போன்ற திட்டங்களில் சாய்வு பில்டர்களுடனான அதே முறையில் செயல்படுகிறது. இது உங்களுக்கு பிடிக்கும், ஏனெனில் இது உங்களுக்கு அனைத்து CSS நீட்டிப்புகளையும், வெப்கிட் மற்றும் மொஸில்லா மட்டும் அல்ல. இந்த ஜெனரேட்டரில் உள்ள பிரச்சினை, கிடைமட்ட மற்றும் செங்குத்து சாய்வுகளுக்கு மட்டுமே ஆதாரமாக உள்ளது. நீங்கள் மூலைவிட்ட சாய்வுகளை செய்ய விரும்பினால், நான் பரிந்துரைக்கும் பிற ஜெனரேட்டருக்கு செல்ல வேண்டும்.
CSS3 சரிவு ஜெனரேட்டர்
இந்த ஜெனரேட்டர் முதல் ஒரு விட என்னை புரிந்து கொள்ள சிறிது நேரம் எடுத்து, ஆனால் அது திசையில் மாற்ற திசை மாறும் ஆதரிக்கிறது.
நீங்கள் இதை விட சிறப்பாக விரும்பும் மற்றொரு CSS சரிவு ஜெனரேட்டரை அறிந்தால், எங்களுக்கு தெரியப்படுத்துங்கள் .