ऑनलाइन CSS स्प्राइट जनरेटर कसे वापरावे

← सर्व ब्लॉग लेख

मार्गदर्शक अद्यतनित:

छोट्या प्रतिमांना CSS स्प्राईट शीटमध्ये एकत्र करा आणि ऑनलाइन CSS पोझिशन्स तयार करा.

डेस्कटॉप आणि फोन स्क्रीनशॉटसह व्यावहारिक सूचना, लहान प्रात्यक्षिके आणि सामान्य प्रश्नांची उत्तरे.

साधन उघडा →

आपण सुरू करण्यापूर्वी

मूळ फाइल ठेवा आणि खाली लिंक केलेली छोटी सार्वजनिक प्रात्यक्षिक फाइल वापरा. तुमची स्वतःची फाईल निवडण्यापूर्वी सेवेतील सपोर्टेड फॉरमॅट आणि मर्यादा तपासा.

प्रात्यक्षिक फाइलसह प्रयत्न करा — landscape.png

या मार्गदर्शकासाठी या लहान फायली तयार केल्या होत्या आणि त्यात कोणताही वैयक्तिक डेटा नाही.

चरण-दर-चरण सूचना

  1. व्हिडिओच्या पुढील बटण वापरून टूल उघडा. जोपर्यंत पुढील पायरी भिन्न निर्दिष्ट करत नाही तोपर्यंत डीफॉल्ट मोड ठेवा.
  2. प्रात्यक्षिक फाइल निवडा. त्याचे नाव किंवा पूर्वावलोकन दिसेपर्यंत प्रतीक्षा करा, नंतर उपलब्ध सेटिंग्जचे पुनरावलोकन करा.
  3. तुमच्या कार्यासाठी आवश्यक असलेले पर्याय निवडा. स्पष्टीकरणासाठी प्रश्नचिन्ह उघडा; प्रात्यक्षिकात वापरलेली मूल्ये उदाहरणे आहेत.
  4. पूर्ण ऑपरेशन करण्यासाठी, मुख्य प्रक्रिया बटण दाबा. सेवेने तुम्हाला साइन इन करण्यास किंवा किंमतीची पुष्टी करण्यास सांगितले असल्यास, सुरू ठेवण्यापूर्वी वर्तमान अटी तपासा.
  5. यशस्वी परिणामाची प्रतीक्षा करा, त्याची तपासणी करा आणि पृष्ठ सोडण्यापूर्वी आउटपुट जतन करा. सेटिंग्ज प्रात्यक्षिक पूर्ण प्रक्रिया परिणाम नाही.

संगणकावर

फाइल पिकर वापरा किंवा प्रात्यक्षिक फाइल अपलोड क्षेत्रात ड्रॅग करा. स्त्रोत तयार होईपर्यंत प्रतीक्षा करा, नंतर पर्याय आणि मुख्य कृतीचे पुनरावलोकन करा.

फोनवर

फाइल्स किंवा तुमच्या गॅलरीमधून प्रात्यक्षिक फाइल निवडा. फाइल लोड करणे पूर्ण होईपर्यंत प्रतीक्षा करा आणि सेटिंग्जवर स्क्रोल करा. काम करताना टॅब उघडा ठेवा.

आयफोनवरील सफारीमध्ये, शेअरिंग मेनू उघडा आणि नवीन टॅबमध्ये निकाल उघडल्यास फाइल्समध्ये सेव्ह करा निवडा. Android Chrome मध्ये, डाउनलोड तपासा. प्रक्रिया पूर्ण होईपर्यंत हा टॅब उघडा ठेवा.

चांगल्या परिणामासाठी

छोट्या प्रतिमांना CSS स्प्राईट शीटमध्ये एकत्र करा आणि ऑनलाइन CSS पोझिशन्स तयार करा. यशस्वी परिणामाची प्रतीक्षा करा, त्याची तपासणी करा आणि पृष्ठ सोडण्यापूर्वी आउटपुट जतन करा. सेटिंग्ज प्रात्यक्षिक पूर्ण प्रक्रिया परिणाम नाही.

स्क्रीनशॉट आणि व्हिडिओ

डेस्कटॉप प्रात्यक्षिक

हे रेकॉर्डिंग मुख्य क्रियेपूर्वी स्त्रोत आणि उपलब्ध सेटिंग्ज दर्शवते. प्रक्रिया सुरू करण्यासाठी आणि निकाल जतन करण्यासाठी वरील चरणांचे अनुसरण करा.

डेस्कटॉप प्रात्यक्षिक
ऑनलाइन CSS स्प्राइट जनरेटर कसे वापरावे — हे साधन कसे वापरावे (संगणकावर)
हे साधन कसे वापरावे
ऑनलाइन CSS स्प्राइट जनरेटर कसे वापरावे — स्रोत निवडत आहे (संगणकावर)
स्रोत निवडत आहे
ऑनलाइन CSS स्प्राइट जनरेटर कसे वापरावे — सेटिंग्ज आणि पुढील क्रिया (संगणकावर)
सेटिंग्ज आणि पुढील क्रिया

फोन प्रात्यक्षिक

हे रेकॉर्डिंग मुख्य क्रियेपूर्वी स्त्रोत आणि उपलब्ध सेटिंग्ज दर्शवते. प्रक्रिया सुरू करण्यासाठी आणि निकाल जतन करण्यासाठी वरील चरणांचे अनुसरण करा.

फोन प्रात्यक्षिक
ऑनलाइन CSS स्प्राइट जनरेटर कसे वापरावे — हे साधन कसे वापरावे (फोनवर)
हे साधन कसे वापरावे
ऑनलाइन CSS स्प्राइट जनरेटर कसे वापरावे — स्रोत निवडत आहे (फोनवर)
स्रोत निवडत आहे
ऑनलाइन CSS स्प्राइट जनरेटर कसे वापरावे — सेटिंग्ज आणि पुढील क्रिया (फोनवर)
सेटिंग्ज आणि पुढील क्रिया

प्रश्न आणि समस्यानिवारण

हे प्रात्यक्षिक माझा वास्तविक डेटा वापरते का?

नाही. रेकॉर्डिंग मार्गदर्शकासाठी तयार केलेली सार्वजनिक उदाहरण मूल्ये वापरते. सेवा तुम्ही तुमच्या स्वतःच्या ब्राउझरमध्ये प्रविष्ट केलेल्या इनपुटवर चालते.

निकालावर अवलंबून राहण्यापूर्वी मी काय तपासले पाहिजे?

छोट्या प्रतिमांना CSS स्प्राईट शीटमध्ये एकत्र करा आणि ऑनलाइन CSS पोझिशन्स तयार करा. यशस्वी परिणामाची प्रतीक्षा करा, त्याची तपासणी करा आणि पृष्ठ सोडण्यापूर्वी आउटपुट जतन करा. सेटिंग्ज प्रात्यक्षिक पूर्ण प्रक्रिया परिणाम नाही.

सेवा ओव्हरलोड झाल्याचा संदेश तुम्हाला दिसल्यास, प्रतीक्षा करा आणि नंतर पुन्हा प्रयत्न करा. अयशस्वी प्रयत्नाचा अर्थ असा नाही की तुमची स्त्रोत फाइल बदलली आहे.

साधन उघडा →