CSS स्प्राइट जनरेटर — इमेजेज़ को CSS के साथ स्प्राइट शीट में जोड़ें

यह टूल क्या करता है

CSS स्प्राइट जनरेटर आइकन्स या छोटी इमेजेज़ के सेट को एक स्प्राइट शीट में जोड़ता है और हर एक को दिखाने के लिए CSS लिखता है। PNG, SVG, GIF या JPG फ़ाइलें जोड़ें, चुनें कि उन्हें कैसे सजाना है, और स्प्राइट PNG के साथ एक स्टाइलशीट डाउनलोड करें जिसमें हर इमेज के लिए एक क्लास हो।

क्लास के नाम फ़ाइल नामों से बनते हैं: Home Icon.png बन जाता है .icon-home-icon, और एक जैसे नामों के साथ नंबर जुड़ जाता है। पैक्ड लेआउट bin packing से अलग-अलग साइज़ की इमेजेज़ को सबसे छोटी शीट पर रखता है; वर्टिकल, हॉरिज़ॉन्टल और ग्रिड अनुमान लगाने लायक पोज़िशन देते हैं।

इसे कैसे इस्तेमाल करें

इमेजेज़ जोड़ें… दबाएँ और अपने आइकन चुनें (या उदाहरण सेट से शुरू करें)।
लेआउट और पैडिंग चुनें। थोड़ी पैडिंग से ब्राउज़र के स्केल करने पर पास-पास के आइकन एक-दूसरे में नहीं घुलते।
क्लास प्रीफ़िक्स और background-image में इस्तेमाल होने वाला स्प्राइट फ़ाइल नाम सेट करें।
अगर आपकी इमेजेज़ रेटिना स्क्रीन के लिए दोगुने साइज़ में बनी हैं तो @2x चुनें।
PNG डाउनलोड करें और CSS डाउनलोड करें दबाएँ (या स्प्राइट को किसी डिज़ाइन टूल या चैट में पेस्ट करने के लिए इमेज कॉपी करें), दोनों अपलोड करें, और क्लासेज़ इस्तेमाल करें: <span class="icon icon-home"></span>।

उदाहरण

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

सुझाव

जो आइकन साथ-साथ बदलते हैं उन्हें एक ही स्प्राइट में रखें; शीट दोबारा बनाने से हर पोज़िशन बदल जाती है।
एक रंग वाले आइकन जिनका रंग CSS से बदलना हो, उनके लिए SVG आइकन फ़ॉन्ट या इनलाइन SVG बेहतर विकल्प हो सकता है।

अक्सर पूछे जाने वाले सवाल

› CSS स्प्राइट क्या है?

एक ऐसी इमेज जिसमें कई छोटी इमेजेज़ होती हैं। हर आइकन दिखाने के लिए किसी एलिमेंट को स्प्राइट बैकग्राउंड के रूप में दिया जाता है और background-position से उसे खिसकाया जाता है, इसलिए पेज को दर्जनों की जगह सिर्फ़ एक रिक्वेस्ट चाहिए।

› क्या HTTP/2 के साथ स्प्राइट अब भी काम के हैं?

पहले से कम, लेकिन बहुत सारे छोटे आइकन, ईमेल टेम्पलेट, गेम और पुराने प्रोजेक्ट्स में ये अब भी मदद करते हैं, और आइकन के एक-एक करके लोड होने की झिलमिलाहट से बचाते हैं।

› @2x विकल्प क्या करता है?

अगर आपकी सोर्स इमेजेज़ दिखने वाले साइज़ से दोगुनी बनाई गई हैं, तो CSS हर चौड़ाई, ऊँचाई और पोज़िशन को आधा कर देता है और background-size जोड़ता है, ताकि हाई-डेंसिटी स्क्रीन पर आइकन शार्प रहें।

› क्या मेरी इमेजेज़ अपलोड होती हैं?

नहीं। स्प्राइट आपके ब्राउज़र में canvas से बनाया जाता है और CSS लोकल रूप से जनरेट होता है।