வலை பக்கங்களை மேம்படுத்த CSS உருவங்களை எவ்வாறு செயல்படுத்துவது

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

• ஒரு ஸ்ப்ரைட் என்றால் என்ன?
• CSS ஸ்ப்ரைட் என்றால் என்ன - விரைவான கண்ணோட்டம்?
• வலை அபிவிருத்திக்கு இது எவ்வாறு உதவுகிறது என்பதற்கான எடுத்துக்காட்டு?
• CSS ஸ்ப்ரைட்டுகளைப் பயன்படுத்துவதன் நன்மைகள்
• CSS ஸ்ப்ரைட்டுகளுடன் பணிபுரியும் போது ஒரு டெவலப்பர் என்ன செய்ய வேண்டும்?
• ஒரு CSS ஸ்ப்ரைட் தாளை எவ்வாறு உருவாக்குவது?
• CSS ஸ்ப்ரைட்டுகளுடன் எவ்வாறு செயல்படுவது?
• CSS ஸ்ப்ரைட்டுகளைப் பயன்படுத்தும் நிறுவனங்கள்

ஒரு ஸ்ப்ரைட் என்றால் என்ன?

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

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

CSS ஸ்ப்ரைட் என்றால் என்ன: விரைவான கண்ணோட்டம்?

ஒரு CSS ஸ்பிரிட் என்பது ஒரு நுட்பமாகும், இது வலைப்பக்கங்களின் செயல்திறனை மேம்படுத்த வலை உருவாக்குநர்களால் பெரும்பாலும் பயன்படுத்தப்படுகிறது. இந்த நுட்பத்தில், பொதுவாக ஒரே பரிமாணங்களைக் கொண்ட பல சிறிய படங்கள் a எனப்படும் ஒற்றை பெரிய படமாக இணைக்கப்படுகின்றன ஸ்பிரிட் தாள் அல்லது ஓடு தொகுப்பு . இந்த ஸ்பிரிட் தாள் பின்னர் தனிம உறுப்புகள் நமக்குத் தேவையான இடங்களில் காண்பிக்கப் பயன்படுகிறது.

வழக்கமாக, லோகோக்கள், வழிசெலுத்தல் அம்புகள், பொத்தான்கள் போன்ற கூறுகள் ஸ்பிரிட் தாளில் சேர்க்கப்படுகின்றன, ஏனெனில் அவை கிட்டத்தட்ட ஒரே பரிமாணங்களைக் கொண்டவை மற்றும் அவை பெரும்பாலும் வலைப்பக்கத்தில் பயன்படுத்தப்படுகின்றன.

வலை அபிவிருத்திக்கு இது எவ்வாறு உதவுகிறது என்பதற்கான எடுத்துக்காட்டு?

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

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

CSS ஸ்ப்ரைட்டுகளைப் பயன்படுத்துவதன் நன்மைகள்

சாதாரண படங்களை விட CSS உருவங்களை பயன்படுத்துவதில் இரண்டு முக்கிய நன்மைகள் உள்ளன:

• விரைவான பக்க ஏற்றுதல்: தாள் பதிவிறக்கம் செய்யப்பட்டவுடன் வலைப்பக்கத்தில் பயன்படுத்தப்படும் படங்கள் தோன்றும் என்பதால் பக்கம் ஏற்றும் நேரத்தை மேம்படுத்துகிறது.

• சிறந்த செயல்திறன் மற்றும் குறைந்த வள பயன்பாடு: இந்த நுட்பம் பக்கத்தை விரைவாக ஏற்றுவதன் மூலம் இறுதி பயனர் அனுபவத்தை மேம்படுத்துகிறது என்பது மட்டுமல்ல,ஆனால் குறைந்த எண்ணிக்கையிலான HTTP கோரிக்கைகள் செய்யப்படுவதால் இது பிணைய நெரிசலையும் குறைக்கிறது.

CSS ஸ்ப்ரைட்டுகளுடன் பணிபுரியும் போது ஒரு டெவலப்பர் என்ன செய்ய வேண்டும்?

தனிப்பட்ட படங்களுடன் பணிபுரியும் போது, ​​டெவலப்பர் வெறுமனே HTML குறிச்சொல்லுடன் வேலை செய்யலாம் தேவைப்பட்டால் அதை CSS இல் பாணி. ஆனால் CSS Sprites உடன் பணிபுரியும் போது, ​​ஒரு டெவலப்பர் இரண்டு குறிப்பிட்ட விஷயங்களைச் செய்ய வேண்டும்:

• ஸ்ப்ரைட் தாள் உருவாக்கம்

டெவலப்பர் CSS ஸ்ப்ரைட்டுகளைப் பயன்படுத்த முடிவு செய்தால் ஒரு வலைப்பக்கத்தை உருவாக்கும் போது, ​​அவன் / அவள் முதலில் கட்டம் போன்ற வடிவத்தில் பொத்தான்கள், லோகோக்கள் போன்ற அனைத்து விரும்பிய கூறுகளையும் ஒன்றிணைத்து ஸ்பிரிட் தாளை உருவாக்க வேண்டும். ஃபோட்டோஷாப் அல்லது ஜிம்ப் போன்ற எந்த பட எடிட்டிங் நிரலையும் பயன்படுத்தி இதைச் செய்யலாம். ஸ்பிரிட் தாளை உருவாக்க உதவும் பல ஆன்லைன் கருவிகளும் கிடைக்கின்றன. இந்த கருவிகள் இந்த கட்டுரையில் பின்னர் விவாதிக்கப்படுகின்றன.

• பயன்படுத்தி மனிதனின் ஒரு குறிப்பிட்ட உறுப்பை அணுகவும் CSS பின்னணி-நிலை சொத்து

ஸ்பிரிட் தாள் தயாரானதும், டெவலப்பர் தாளின் வெவ்வேறு பகுதிகளை அணுக CSS பண்புகளைப் பயன்படுத்த வேண்டும்.

• அகலம்: மனிதனின் அகலம்
• உயரம்: மனிதனின் உயரம்
• பின்னணி: ஸ்பிரிட் தாள் பற்றிய குறிப்பு
• பின்னணி-நிலை: ஸ்பிரிட் தாளின் தேவையான பகுதியை மட்டும் அணுக ஆஃப்செட் மதிப்புகள் (பிக்சல்களில்)

ஒரு CSS ஸ்ப்ரைட் தாளை எவ்வாறு உருவாக்குவது?

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

1. ஆன்லைன் ஸ்ப்ரைட் தாள் உருவாக்கும் கருவி

இணைப்பு: toptal.com/developers/css/sprite-generator/

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

2. ஸ்பிரிட்டியுடன் ஸ்ப்ரைட் ஷீட்டை உருவாக்குதல்

நீங்கள் கிரண்ட், நோட் அல்லது கல்பைப் பயன்படுத்துகிறீர்கள் என்றால், நீங்கள் ஸ்பிரிட்டி எனப்படும் ஒரு தொகுப்பை நிறுவலாம், இது பி.என்.ஜி, ஜே.பி.ஜி போன்ற பல்வேறு வடிவங்களில் ஒரு ஸ்பிரிட் தாளை உருவாக்க உதவும்.

முதலில், நீங்கள் இதைப் பயன்படுத்தி ஸ்பிரிட்டியை நிறுவ வேண்டும்:

npm நிறுவல் sprity -g

பின்னர், ஸ்பிரிட் தாளை உருவாக்க, பின்வரும் கட்டளையைப் பயன்படுத்தவும்:

sprity ./output-directory/ ./input-directory/*.png

CSS ஸ்ப்ரைட்டுகளுடன் எவ்வாறு செயல்படுவது?

இந்த எடுத்துக்காட்டில், நாங்கள் பின்வரும் ஸ்பிரிட் தாளைப் பயன்படுத்துவோம்:

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

நாங்கள் மேலே விவாதித்த கருவிகளைப் பயன்படுத்தி நீங்கள் ஸ்பிரிட் தாளை உருவாக்கியிருந்தால், நீங்கள் ஏற்கனவே CSS இல் தேவைப்படும் ஆஃப்செட்களை அறிந்திருக்கிறீர்கள், ஆனால் நீங்கள் வேறு ஏதேனும் கருவியைப் பயன்படுத்தினால் அல்லது உங்களுக்கு சில ஸ்பிரிட் ஷீட் வழங்கப்பட்டிருந்தால் கவலைப்பட வேண்டாம், நாங்கள் ஒரு முறையைப் பற்றி விவாதிப்போம் தேவையான உறுப்புக்கான ஆஃப்செட்களைப் பெற உதவும்.

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

முதலில், உங்கள் ஸ்பிரிட் தாள் படத்தைத் திறந்து (அனைத்து சிறிய படங்களையும் கொண்ட கட்டம்) மற்றும் நீங்கள் பிடிக்க விரும்பும் ஸ்பிரிட்டின் மேல் இடது மூலையில் உங்கள் மவுஸ் கர்சரைக் கொண்டு வாருங்கள்.

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

பின்னணி: url ('img_sprites.png')
பின்னணி-நிலை: 0 0
அகலம்: 125px
உயரம்: 125px

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

பின்னணி: url ('img_sprites.png')
பின்னணி-நிலை: -128px 0px
அகலம்: 125px
உயரம்: 125px

மேலே உள்ள துணுக்கில் பின்னணி-நிலை பண்புக்கூறு கவனியுங்கள். (-128px, 0) அதாவது, எங்கள் ஸ்பிரிட் தாளை இடதுபுறமாக 128 பிக்சல்கள் (உறுப்புகளுக்கு இடையில் திணிப்பை எடுத்துக்கொள்வது) மற்றும் ஒய்-ஆக்சிஸில் 0 பிக்சல்கள் மூலம் ஈடுசெய்கிறோம். நாங்கள் ட்விட்டர் ஹோவர் ஐகானை அணுகினால், எங்கள் பின்னணி-நிலை பண்புக்கூறு:

பின்னணி-நிலை: -128px -128px

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

படி 1: தேவையான HTML குறியீட்டை எழுதுதல்

கீழேயுள்ள குறியீட்டில், நாங்கள் மூன்று இணைப்புகளைச் சேர்க்கிறோம். மேலும், எங்கள் HTML ஐ நடைதாள் (screen.css) உடன் இணைப்போம்.

வர்க்கம்='இன்ஸ்டாகிராம் ஐகான்'> href='#'>Instagram

வர்க்கம்='ட்விட்டர் ஐகான்'> href='#'>ட்விட்டர்

வர்க்கம்='ஃபேஸ்புக் ஐகான்'> href='#'>முகநூல்

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

c ++ எண்களை ஏறுவரிசையில் வரிசைப்படுத்துங்கள்

/ * பகிரப்பட்ட ஐகான் வகுப்பு * /

span.icon a: இணைப்பு,

span.icon ஒரு: பார்வையிட்டார்{

காட்சி:தொகுதி

உரை-உள்தள்ளல்:-9999px

பின்னணி-படம்: url (./ img_sprites.png)

பின்னணி-மீண்டும்:இல்லை மீண்டும்

}

படி 3: ஆஃப்செட்களைப் பயன்படுத்தி ஸ்பிரைட் தாளில் இருந்து தனிப்பட்ட ஐகான்களைப் பெறுதல்.

/ * Instagram ஐகான் * /

span.instagram a: இணைப்பு,

span.instagram ஒரு: பார்வையிட்டார்{

அகலம்:125px

உயரம்:125px

பின்னணி-நிலை:0 0

}

/ * ட்விட்டர் ஐகான் * /

span.twitter a: இணைப்பு,

span.twitter ஒரு: பார்வையிட்டார்{

அகலம்:125px

உயரம்:125px

பின்னணி-நிலை:-128px 0

}

/ * பேஸ்புக் ஐகான் * /

span.facebook a: இணைப்பு,

span.facebook ஒரு: பார்வையிட்டார்{

அகலம்:125px

உயரம்:125px

பின்னணி-நிலை:-257px 0

}

படி 4: ஆஃப்செட்களைப் பயன்படுத்தி ஸ்பிரிட் தாளில் இருந்து ஹோவர் ஐகான்களைப் பெறுதல்.

span.instagram ஒரு: மிதவை{பின்னணி-நிலை:0 -128px}

span.twitter ஒரு: மிதவை{பின்னணி-நிலை:-128px -128px}

span.facebook ஒரு: மிதவை{பின்னணி-நிலை:-255px -128px}

CSS ஸ்ப்ரைட்டுகளைப் பயன்படுத்தும் நிறுவனங்கள்

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

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

எங்கள் பாருங்கள் இது பயிற்றுவிப்பாளர் தலைமையிலான நேரடி பயிற்சி மற்றும் நிஜ வாழ்க்கை திட்ட அனுபவத்துடன் வருகிறது. இந்த பயிற்சி பின்-முனை மற்றும் முன்-வலை வலை தொழில்நுட்பங்களுடன் பணிபுரியும் திறன்களில் நீங்கள் தேர்ச்சி பெறுகிறது. வலை அபிவிருத்தி, jQuery, கோணல், நோட்ஜெஸ், எக்ஸ்பிரஸ்ஜேஎஸ் மற்றும் மோங்கோடிபி பற்றிய பயிற்சி இதில் அடங்கும்.

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'HTML படங்கள்' வலைப்பதிவின் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.