CSS स्प्राइट जनरेटर

यह कैसे काम करता है

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

बनाए गए CSS कोड का उपयोग कैसे करें?

PNG डाउनलोड करें, उसे अपनी स्टाइलशीट के बगल में sprite.png नाम से रखें (या CSS में URL बदल दें), बनाया गया CSS कोड अपनी फ़ाइल में कॉपी करें, फिर संबंधित क्लास (उदाहरण के लिए class="icon icon-mon-icone") को किसी HTML एलिमेंट, जैसे span, पर लगाएँ।

CSS क्लास के नाम कहाँ से आते हैं?

हर क्लास का नाम आइकन के फ़ाइल-नाम से अपने आप बनता है (छोटे अक्षरों में, स्पेस और विशेष वर्ण हाइफ़न से बदले जाते हैं)। नाम दोहराए जाने पर नामों को अनूठा रखने के लिए एक संख्या जोड़ दी जाती है।

स्प्राइट और CSS का निर्माण पूरी तरह आपके ब्राउज़र में होता है: आपके आइकन कभी किसी सर्वर पर नहीं भेजे जाते।