ഓൺലൈനിൽ CSS സ്‌പ്രൈറ്റ് ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം

← എല്ലാ ബ്ലോഗ് ലേഖനങ്ങളും

ഗൈഡ് അപ്ഡേറ്റ് ചെയ്തു:

ഒരു CSS സ്പ്രൈറ്റ് ഷീറ്റിലേക്ക് ചെറിയ ചിത്രങ്ങൾ സംയോജിപ്പിച്ച് ഓൺലൈനിൽ CSS സ്ഥാനങ്ങൾ സൃഷ്ടിക്കുക.

ഡെസ്ക്ടോപ്പ്, ഫോൺ സ്ക്രീൻഷോട്ടുകൾ, ചെറിയ പ്രകടനങ്ങൾ, സാധാരണ ചോദ്യങ്ങൾക്കുള്ള ഉത്തരങ്ങൾ എന്നിവയുള്ള പ്രായോഗിക നിർദ്ദേശങ്ങൾ.

ഉപകരണം തുറക്കുക →

നിങ്ങൾ ആരംഭിക്കുന്നതിന് മുമ്പ്

ഒറിജിനൽ ഫയൽ സൂക്ഷിച്ച് താഴെ ലിങ്ക് ചെയ്‌തിരിക്കുന്ന ചെറിയ പൊതു ഡെമോൺസ്‌ട്രേഷൻ ഫയൽ ഉപയോഗിക്കുക. നിങ്ങളുടെ സ്വന്തം ഫയൽ തിരഞ്ഞെടുക്കുന്നതിന് മുമ്പ് സേവനത്തിലെ പിന്തുണയ്ക്കുന്ന ഫോർമാറ്റുകളും പരിധികളും പരിശോധിക്കുക.

ഒരു പ്രദർശന ഫയൽ ഉപയോഗിച്ച് ശ്രമിക്കുക — landscape.png

ഈ ചെറിയ ഫയലുകൾ ഈ ഗൈഡിനായി സൃഷ്‌ടിച്ചതാണ്, അതിൽ വ്യക്തിഗത ഡാറ്റയൊന്നും അടങ്ങിയിട്ടില്ല.

ഘട്ടം ഘട്ടമായുള്ള നിർദ്ദേശങ്ങൾ

  1. വീഡിയോയ്ക്ക് അടുത്തുള്ള ബട്ടൺ ഉപയോഗിച്ച് ഉപകരണം തുറക്കുക. അടുത്ത ഘട്ടത്തിൽ മറ്റൊന്ന് വ്യക്തമാക്കുന്നില്ലെങ്കിൽ ഡിഫോൾട്ട് മോഡ് നിലനിർത്തുക.
  2. പ്രദർശന ഫയൽ തിരഞ്ഞെടുക്കുക. അതിൻ്റെ പേരോ പ്രിവ്യൂവോ ദൃശ്യമാകുന്നതുവരെ കാത്തിരിക്കുക, തുടർന്ന് ലഭ്യമായ ക്രമീകരണങ്ങൾ അവലോകനം ചെയ്യുക.
  3. നിങ്ങളുടെ ടാസ്ക്കിന് ആവശ്യമായ ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കുക. വിശദീകരണങ്ങൾക്കായി ചോദ്യചിഹ്നങ്ങൾ തുറക്കുക; പ്രകടനത്തിൽ ഉപയോഗിച്ച മൂല്യങ്ങൾ ഉദാഹരണങ്ങളാണ്.
  4. മുഴുവൻ പ്രവർത്തനവും നടത്താൻ, പ്രധാന പ്രോസസ്സിംഗ് ബട്ടൺ അമർത്തുക. സേവനം നിങ്ങളോട് സൈൻ ഇൻ ചെയ്യാനോ വില സ്ഥിരീകരിക്കാനോ ആവശ്യപ്പെടുകയാണെങ്കിൽ, തുടരുന്നതിന് മുമ്പ് നിലവിലെ നിബന്ധനകൾ പരിശോധിക്കുക.
  5. ഒരു വിജയകരമായ ഫലത്തിനായി കാത്തിരിക്കുക, അത് പരിശോധിച്ച് പേജ് വിടുന്നതിന് മുമ്പ് ഔട്ട്പുട്ട് സംരക്ഷിക്കുക. ഒരു ക്രമീകരണ പ്രദർശനം പൂർത്തിയായ പ്രോസസ്സിംഗ് ഫലമല്ല.

ഒരു കമ്പ്യൂട്ടറിൽ

ഫയൽ പിക്കർ ഉപയോഗിക്കുക അല്ലെങ്കിൽ അപ്‌ലോഡ് ഏരിയയിലേക്ക് ഡെമോൺസ്‌ട്രേഷൻ ഫയൽ വലിച്ചിടുക. ഉറവിടം തയ്യാറാകുന്നത് വരെ കാത്തിരിക്കുക, തുടർന്ന് ഓപ്ഷനുകളും പ്രധാന പ്രവർത്തനങ്ങളും അവലോകനം ചെയ്യുക.

ഒരു ഫോണിൽ

ഫയലുകളിൽ നിന്നോ നിങ്ങളുടെ ഗാലറിയിൽ നിന്നോ ഡെമോൺസ്‌ട്രേഷൻ ഫയൽ തിരഞ്ഞെടുക്കുക. ഫയൽ ലോഡുചെയ്യുന്നത് പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കുക, ക്രമീകരണങ്ങളിലേക്ക് സ്ക്രോൾ ചെയ്യുക. ജോലി ചെയ്യുമ്പോൾ ടാബ് തുറന്നിടുക.

iPhone-ലെ Safari-ൽ, പങ്കിടൽ മെനു തുറന്ന് ഫലം ഒരു പുതിയ ടാബിൽ തുറക്കുകയാണെങ്കിൽ ഫയലുകളിലേക്ക് സംരക്ഷിക്കുക തിരഞ്ഞെടുക്കുക. Android Chrome-ൽ, ഡൗൺലോഡുകൾ പരിശോധിക്കുക. പ്രോസസ്സിംഗ് പൂർത്തിയാകുന്നത് വരെ ഈ ടാബ് തുറന്ന് വയ്ക്കുക.

മികച്ച ഫലത്തിനായി

ഒരു CSS സ്പ്രൈറ്റ് ഷീറ്റിലേക്ക് ചെറിയ ചിത്രങ്ങൾ സംയോജിപ്പിച്ച് ഓൺലൈനിൽ CSS സ്ഥാനങ്ങൾ സൃഷ്ടിക്കുക. ഒരു വിജയകരമായ ഫലത്തിനായി കാത്തിരിക്കുക, അത് പരിശോധിച്ച് പേജ് വിടുന്നതിന് മുമ്പ് ഔട്ട്പുട്ട് സംരക്ഷിക്കുക. ഒരു ക്രമീകരണ പ്രദർശനം പൂർത്തിയായ പ്രോസസ്സിംഗ് ഫലമല്ല.

സ്ക്രീൻഷോട്ടുകളും വീഡിയോയും

ഡെസ്ക്ടോപ്പ് പ്രദർശനം

പ്രധാന പ്രവർത്തനത്തിന് മുമ്പ് ഈ റെക്കോർഡിംഗ് ഉറവിടവും ലഭ്യമായ ക്രമീകരണങ്ങളും കാണിക്കുന്നു. പ്രോസസ്സിംഗ് ആരംഭിക്കുന്നതിനും ഫലം സംരക്ഷിക്കുന്നതിനും മുകളിലുള്ള ഘട്ടങ്ങൾ പാലിക്കുക.

ഡെസ്ക്ടോപ്പ് പ്രദർശനം
ഓൺലൈനിൽ CSS സ്‌പ്രൈറ്റ് ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം — ഈ ഉപകരണം എങ്ങനെ ഉപയോഗിക്കാം (ഒരു കമ്പ്യൂട്ടറിൽ)
ഈ ഉപകരണം എങ്ങനെ ഉപയോഗിക്കാം
ഓൺലൈനിൽ CSS സ്‌പ്രൈറ്റ് ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം — ഉറവിടം തിരഞ്ഞെടുക്കുന്നു (ഒരു കമ്പ്യൂട്ടറിൽ)
ഉറവിടം തിരഞ്ഞെടുക്കുന്നു
ഓൺലൈനിൽ CSS സ്‌പ്രൈറ്റ് ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം — ക്രമീകരണങ്ങളും അടുത്ത പ്രവർത്തനവും (ഒരു കമ്പ്യൂട്ടറിൽ)
ക്രമീകരണങ്ങളും അടുത്ത പ്രവർത്തനവും

ഫോൺ പ്രദർശനം

പ്രധാന പ്രവർത്തനത്തിന് മുമ്പ് ഈ റെക്കോർഡിംഗ് ഉറവിടവും ലഭ്യമായ ക്രമീകരണങ്ങളും കാണിക്കുന്നു. പ്രോസസ്സിംഗ് ആരംഭിക്കുന്നതിനും ഫലം സംരക്ഷിക്കുന്നതിനും മുകളിലുള്ള ഘട്ടങ്ങൾ പാലിക്കുക.

ഫോൺ പ്രദർശനം
ഓൺലൈനിൽ CSS സ്‌പ്രൈറ്റ് ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം — ഈ ഉപകരണം എങ്ങനെ ഉപയോഗിക്കാം (ഒരു ഫോണിൽ)
ഈ ഉപകരണം എങ്ങനെ ഉപയോഗിക്കാം
ഓൺലൈനിൽ CSS സ്‌പ്രൈറ്റ് ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം — ഉറവിടം തിരഞ്ഞെടുക്കുന്നു (ഒരു ഫോണിൽ)
ഉറവിടം തിരഞ്ഞെടുക്കുന്നു
ഓൺലൈനിൽ CSS സ്‌പ്രൈറ്റ് ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം — ക്രമീകരണങ്ങളും അടുത്ത പ്രവർത്തനവും (ഒരു ഫോണിൽ)
ക്രമീകരണങ്ങളും അടുത്ത പ്രവർത്തനവും

ചോദ്യങ്ങളും ട്രബിൾഷൂട്ടിംഗും

ഈ പ്രദർശനം എൻ്റെ യഥാർത്ഥ ഡാറ്റ ഉപയോഗിക്കുന്നുണ്ടോ?

നമ്പർ. റെക്കോർഡിംഗ് ഗൈഡിനായി സൃഷ്ടിച്ച പൊതു ഉദാഹരണ മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ സ്വന്തം ബ്രൗസറിൽ നിങ്ങൾ നൽകുന്ന ഇൻപുട്ടിലാണ് സേവനം പ്രവർത്തിക്കുന്നത്.

ഫലത്തെ ആശ്രയിക്കുന്നതിന് മുമ്പ് ഞാൻ എന്താണ് പരിശോധിക്കേണ്ടത്?

ഒരു CSS സ്പ്രൈറ്റ് ഷീറ്റിലേക്ക് ചെറിയ ചിത്രങ്ങൾ സംയോജിപ്പിച്ച് ഓൺലൈനിൽ CSS സ്ഥാനങ്ങൾ സൃഷ്ടിക്കുക. ഒരു വിജയകരമായ ഫലത്തിനായി കാത്തിരിക്കുക, അത് പരിശോധിച്ച് പേജ് വിടുന്നതിന് മുമ്പ് ഔട്ട്പുട്ട് സംരക്ഷിക്കുക. ഒരു ക്രമീകരണ പ്രദർശനം പൂർത്തിയായ പ്രോസസ്സിംഗ് ഫലമല്ല.

സേവനം ഓവർലോഡ് ചെയ്തതായി ഒരു സന്ദേശം നിങ്ങൾ കാണുകയാണെങ്കിൽ, കാത്തിരുന്ന് പിന്നീട് വീണ്ടും ശ്രമിക്കുക. പരാജയപ്പെട്ട ഒരു ശ്രമം നിങ്ങളുടെ ഉറവിട ഫയൽ മാറിയെന്ന് അർത്ഥമാക്കുന്നില്ല.

ഉപകരണം തുറക്കുക →