படங்களை மேம்படுத்தும்போது, அதை ஃபோட்டோஷாப் மூலம் தேர்வுசெய்து வலைப்பக்கத்தில் ஏற்றலாம் அல்லது பி விருப்பத்தையும் தேர்வு செய்யலாம்: கிடைக்கக்கூடிய HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் நுட்பங்களுடன் இதைச் செய்யுங்கள்.
தாவிச் சென்றபின், படங்களை மேம்படுத்த பல நுட்பங்கள் உள்ளன, அவை அனைத்தும் jQuery ஐ பிரதான தளமாக அல்லது CSS3 உடன் உருவாக்கப்பட்டன சமீபத்திய வலைத் தரங்களைப் பயன்படுத்தி, சில உலாவிகளுடன் பொருந்தக்கூடிய தன்மையை இழக்கிறோம் என்பதை நான் உங்களுக்கு நினைவூட்டுகிறேன்.
அவர்கள் ஆங்கிலத்தில் இருக்கிறார்கள், ஆனால் அவை பறக்கையில் பிடிபடுகின்றன, வாக்குறுதியளிக்கப்பட்டன :)
மூல | 1stWD
CSQ3 வட்டமான படம் jQuery உடன்
அனைத்து நவீன உலாவிகளிலும் காண்பிக்கப்படும் வட்டமான படங்களை அடைய பட உறுப்பைச் சுற்றி ஒரு ஸ்பான் குறிச்சொல்லை மடிக்க கற்றுக்கொள்ளுங்கள்.
2.
CSS உடன் பல பின்னணிகள் மற்றும் எல்லைகள் 2.1
ஒரு HTML உறுப்புக்கு 2.1 பின்னணி கேன்வாஸ்கள், 3 நிலையான அளவு விளக்கக்காட்சி படங்கள் மற்றும் பல சிக்கலான எல்லைகளை வழங்க CSS 2 போலி கூறுகளை எவ்வாறு பயன்படுத்துவது என்பதை அறிக.
3.
விரைவு உதவிக்குறிப்பு: எளிய CSS உடன் பல எல்லைகள்
உங்கள் வடிவமைப்புகளுக்கு அதிக ஆழத்தை சேர்க்கும் வகையில் எளிய CSS மூலம் பல எல்லைகளை எவ்வாறு அடைவது என்பதைக் காட்டும் விரைவான திரைக்கதை. முந்தைய டுடோரியலின் மிகவும் எளிமையான பதிப்பு.
4.
CSS2 உடன் மாறும் அளவிலான கூறுகளில் பல எல்லைகள்
இன் மூன்றாவது பதிப்பு நிக்கோலா கல்லாகர் நீங்கள் உறுப்பு அளவு இல்லை என்றால் என்ன செய்ய வேண்டும் என்பதைக் காட்டுகிறது.
5.
வேடிக்கையாக w / எல்லைகள் - பெவல்ட், அழுத்தப்பட்ட மற்றும் பல!
பல்வேறு விளைவுகளைப் பெற CSS மற்றும் சில எளிய எல்லை பாணி தந்திரங்களுடன் அழுத்தப்பட்ட விளைவை எவ்வாறு அடைவது என்பதை அறிக.
6.
CSS3 உடன் போலராய்டுகள்
படங்களின் முழுமையான பட்டியலை போலராய்டு படங்களின் முழு தொகுப்பாக மாற்ற சில அற்புதமான CSS2 மற்றும் CSS3 ஐ எவ்வாறு பயன்படுத்துவது என்பதை அறிக.
7.
சரியான முழு பக்க பின்னணி படம்
முழு பக்கத்தையும் படத்துடன் நிரப்பும் CSS உடன் பின்னணி படத்தை எவ்வாறு சேர்ப்பது என்பதை அறிக, வெள்ளை இடம் இல்லை, தேவைக்கேற்ப அளவுகோல் படம், சுருள்பட்டிகளை ஏற்படுத்தாது மற்றும் பல.
8.
CSS3 பெட்டி நிழல் மற்றும் பட ஹோவர் விளைவுகள்
ஒரு நடை தாளைத் திருத்துவதன் மூலம் துளி நிழல் விளைவுகளைச் சேர்ப்பதற்கான புதிய வழியை ஆராயுங்கள்.
9.
ஆடம்பரமான சிறு ஹோவர் விளைவு w / jQuery
CSS மற்றும் jQuery உடன் சுத்தமாக ஃபிளாஷ்-பாணி விளைவை அடையுங்கள்.
10.
எளிய CSS பட ரோல்ஓவர் விளைவை உருவாக்குவது எப்படி
இந்த டுடோரியலில், அடிப்படை HTML மற்றும் CSS ஸ்டைலிங் மூலம் எளிய CSS பட ரோல்ஓவர் விளைவை எவ்வாறு உருவாக்குவது என்பதை நீங்கள் கற்றுக் கொள்ளப் போகிறீர்கள்.
11.
மிதவை
படங்கள், துளி தொப்பிகள், அடுத்த மற்றும் பின் பொத்தான்கள், படக் காட்சியகங்கள், இன்லைன் பட்டியல்கள் மற்றும் பல நெடுவரிசை தளவமைப்புகள் போன்ற மிதக்கும் கூறுகளின் அடிப்படைகள் மூலம் மிதவை உங்களை அழைத்துச் செல்கிறது. படம் மிதப்பதற்கு அர்ப்பணிக்கப்பட்ட 4 பயிற்சிகளைப் பாருங்கள்.
12.
CSS ஐப் பயன்படுத்தி ஸ்னாஸி ஹோவர் விளைவுகள்
இந்த டுடோரியலில், நீங்கள் CSS2.1 பண்புகளைப் பயன்படுத்தி நெகிழ்வான மேம்பட்ட மிதவை நுட்பங்களை உருவாக்குவீர்கள்.
13.
இல்லாமல் வேகமாக ரோல்ஓவர்கள்
முன்னதாகவே ஏற்று
CSS பட ரோல்ஓவர்களைப் பயன்படுத்தும் போது, இரண்டு, மூன்று அல்லது அதற்கு மேற்பட்ட படங்கள் ஏற்றப்பட வேண்டும் (மேலும் பெரும்பாலும் சிறந்த முடிவுகளுக்கு முன்பே ஏற்றப்படும்). எல்லா மாநிலங்களையும் ஒரே படத்தில் வைப்பது எப்படி என்பதை அறிக, மாறும் மாற்றங்களை விரைவாக மாற்றுகிறது மற்றும் எந்த முன் ஏற்றமும் தேவையில்லை.
14.
jQuery வட்டமான மூலைகள்
வட்டமான மூலைகளுக்கு நிறைய jQuery விளைவுகள் மற்றும் பல வடிவங்கள்.
15.
JQuery ஐப் பயன்படுத்தி எளிதான உதவிக்குறிப்பு மற்றும் பட முன்னோட்டம்
JQuery ரோல்ஓவர் முன்னோட்ட ஸ்கிரிப்டைப் பயன்படுத்துவதற்கான 3 எடுத்துக்காட்டுகளைப் பார்க்கவும். இந்த எளிய ஸ்கிரிப்டை பல்வேறு நோக்கங்களுக்காக பயன்படுத்தலாம்.
16.
சூப்பர்சைஸ் - முழுத்திரை பின்னணி /
எஸ்
jQuery செருகுநிரல்
சூப்பர்சைடட் என்பது ஒரு jQuery சொருகி, இது பட பரிமாண விகிதம் மற்றும் சுழற்சிகளைப் பராமரிக்கும் போது உலாவியை நிரப்ப படங்களை மறுஅளவிடுகிறது.
17.
பி.என்.ஜி மேலடுக்கு
கிளையன்ட் கொடுத்த படங்களுடன் ஒரு தளத்தை உருவாக்கும் சிக்கலில் நீங்கள் எப்போதாவது ஓடியிருக்கிறீர்களா, அவர்கள் புகைப்படத்தை புதுப்பித்தபின்னர் அசல் தோற்றமும் உணர்வும் தக்கவைக்கப்படவில்லை என்பதைக் கண்டறிய முடியுமா? இந்த தீர்வு ஒரு வெளிப்படையான பி.என்.ஜி மேலடுக்கை உருவாக்குவதை உள்ளடக்கியது, இது வழக்கமான JPEG அல்லது GIF ஐச் சுற்றி முகமூடி / சட்டமாகப் பயன்படுத்தப்படலாம். இந்த வழியில், ஒரு பொதுவான சிஎம்எஸ் நிறுவலை உள்ளமைக்க முடியும், எனவே பயனர்கள் வடிப்பான்களைப் பயன்படுத்துவதற்கு எந்த கிராபிக்ஸ் நிரலையும் பயன்படுத்துவதைப் பற்றி கவலைப்படாமல் புகைப்படங்களை பதிவேற்றலாம்.
18.
BeZoom
லைட்வெயிட்
மற்றும் jQuery
பெரிதாக்கு செருகுநிரல்
BeZoom என்பது ஒரு எளிய மற்றும் இலகுரக மாற்றாகும் JQ ஜூம். இது இலகுவானது மற்றும் பயன்படுத்த எளிதானது.
19.
பின்னணி பட அனிமேஷன்களுக்கு jQuery ஐப் பயன்படுத்துதல்
நீங்கள் தேடும் விளைவு வகையை உருவாக்க jQuery உடன் விளையாடுங்கள் மற்றும் பின்னணி படத்தின் நிலையை மாற்றவும். "செயலில் உள்ள நிலைகளை நான் எவ்வாறு கையாள்வது?" என்று பதிலளிக்கும் புதிய கட்டுரை உள்ளது. - JQuery அனிமேஷன் பின்னணிகளுக்கான செயலில் உள்ள நிலையைக் கையாளுதல்.
20.
CSS உடன் உங்கள் படங்களை மசாலா செய்ய 5 வழிகள்
உங்கள் வழக்கமான சாதுவான படங்களுக்கு சில சுவையைச் சேர்க்க சில எளிய தந்திரங்கள் இங்கே. ஒவ்வொரு படத்தையும் ஸ்டைலுக்கு ஃபோட்டோஷாப் பயன்படுத்துவது கடினமானது மற்றும் நீண்ட காலத்திற்கு பராமரிக்க கடினமாக இருக்கும். இந்த பின்வரும் CSS நுட்பங்கள் அந்த வலியைக் குறைக்க உதவும்.
21.
எப்படி:
மறுஅளவிடத்தக்கது
பின்னணி படம்
CSS உடன் மறுஅளவிடக்கூடிய பின்னணி படத்தை எவ்வாறு அமைப்பது என்பதை அறிக. நீங்கள் தேர்வு செய்ய 3 விருப்பங்கள் உள்ளன.
22.
உங்கள் பட இணைப்புகளை உடைக்கவும்
எங்கள் வலைத்தளத்தின் குறிப்பிட்ட பகுதியைக் கிளிக் செய்ய வேண்டும் என்பதை பயனர்களுக்குத் தெரியப்படுத்துவது மவுஸ் ஓவர் எஃபெக்ட் மூலம் சிறப்பாக அடையப்படுகிறது. அந்த “கிளிக் செய்யக்கூடிய” பிரிவுகளில் நிச்சயமாக உள்ளடக்க படங்கள் அடங்கும். பட இணைப்பு என்பது உங்கள் பட இணைப்புகளுக்கு கூடுதல் ஸ்டைலிங் பயன்படுத்த உதவும் ஸ்கிரிப்ட் ஆகும்.
23.
CSS உடன் பல பின்னணி படங்கள்
சில நேரங்களில், பின்னணி படங்களை நேரடியாக பக்கத்தில் செருகுவதை விட அவற்றைப் பயன்படுத்துவது அதிக அர்த்தமுள்ளதாக இருக்கும். ஒவ்வொரு உறுப்புக்கும் - உங்கள் உடல் குறிச்சொல் போன்றது - ஒரே ஒரு பின்னணி படத்தை மட்டுமே வைத்திருக்க முடியும், அவை பல கூறுகளுக்கு பயன்படுத்தப்படலாம்.
24.
CSS உடன் பட எல்லைகள்
CSS ஐப் பயன்படுத்தி படங்களுக்கு திடமான எல்லையை எவ்வாறு சேர்ப்பது என்பதைக் காட்டும் மிகவும் எளிதான பயிற்சி.
25.
பின்னணி படங்களை பயன்படுத்தாமல் CSS ஸ்ப்ரைட்டுகள்
CSS உருவங்களைப் பற்றி நிறைய அறிவு இல்லாமல் ஹோவர் விளைவை எவ்வாறு பயன்படுத்துவது என்பதை அறிக.
