🏸 🅿️ 👨🏼‍💻 सीएसएस स्प्राइट्स: बुनियादी तकनीक और उपयोगी उपकरण 👨🏿‍🤝‍👨🏻 📖 🤵🏼

साइट पर सीएसएस स्प्राइट्स का उपयोग करने से आपको उत्पादकता बढ़ाने और इंटरफ़ेस तत्वों को सही ढंग से व्यवस्थित करने की अनुमति मिलती है।

स्प्राइट शीट एक साइट के छोटे ग्राफिक तत्वों की एक बड़ी छवि है, जैसे कि आइकन या बटन। और CSS के लिए धन्यवाद, आप प्रत्येक तत्व को अलग से प्रदर्शित कर सकते हैं।

दिखाई

व्यावहारिक अनुप्रयोग

स्प्राइट्स का उपयोग करने का मुख्य लाभ एक बार में एक फ़ाइल में सभी तत्वों के सर्वर द्वारा एकल लोडिंग है। कुछ लोग सोच सकते हैं कि छोटी, कम भार वाली छवियों को अपलोड करने से साइट प्रदर्शन बढ़ सकता है, लेकिन ऐसा नहीं है - व्यक्तिगत छवियों के साथ HTTP अनुरोधों की संख्या बढ़ जाती है। इसके अलावा, एकल स्प्राइट का उपयोग करने से आप ग्राफिक्स के वजन को कम कर सकते हैं। वेबसाइड टट्स पर उदाहरण स्प्राइट:

किसी पृष्ठ पर स्प्राइट्स का उपयोग करने के लिए नमूना कोड ( डेमो ):

<html> <head> <style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('img_navsprites.gif') -91px 0;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html>

इसके अलावा, स्प्राइट का उपयोग अक्सर एक सरल और क्रॉस-ब्राउज़र होवर प्रभाव ( डेमो ) बनाने के लिए किया जाता है:

 <html> <head> <style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites_hover.gif') 0 0;} #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites_hover.gif') -47px 0;} #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next{left:129px;width:43px;} #next{background:url('img_navsprites_hover.gif') -91px 0;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html>

पहले या बाद में?

स्प्राइट तैयार करने के दो दृष्टिकोण हैं: साइट विकास से पहले और बाद में। पहले मामले में, साइट निर्माण के अंतिम चरण में सभी छोटे इंटरफ़ेस चित्रों को एक फ़ाइल में संकलित किया जाता है। इस मामले में, व्यक्तिगत छवियों को संपादित करना सुविधाजनक है, और यदि आवश्यक हो, तो उन्हें अलग से भी उपयोग करें। यह विधि शुरुआती वेब डिजाइनरों के लिए अधिक उपयुक्त है।

अधिक अनुभवी डेवलपर्स प्रारंभिक चरण में स्प्राइट तैयार करते हैं, इससे आप भविष्य के डिज़ाइन के ग्राफिक्स को बेहतर ढंग से व्यवस्थित कर सकते हैं, साथ ही लेआउट के लिए PSD टेम्पलेट भी तैयार कर सकते हैं।

डिजाइन तत्वों का संगठन

स्प्राइट्स के साथ एक फ़ाइल तैयार करते समय, छवियों को जितना संभव हो उतना कॉम्पैक्ट करना उचित है, और यदि वे समान आकार (उदाहरण के लिए, आइकन) हैं, तो एक ग्रिड बनाएं, जो साइट पर स्प्राइट्स के उपयोग को सरल करेगा:

फ़ाइल को इस तरह से तैयार किया जाना चाहिए कि इसमें भविष्य के परिवर्तन मौजूदा तत्वों के स्थान को प्रभावित न करें, अन्यथा सभी सीएसएस को संपादित करना होगा। स्प्राइट्स के साथ एक PSD फ़ाइल को अच्छी तरह से चिह्नित किया जाना चाहिए: आपको स्पष्ट रूप से सभी परतों और समूहों का नाम देना चाहिए, और उन परतों को मर्ज न करने का प्रयास करें, जिन्हें भविष्य में बदला जा सकता है।

उपयोगी उपकरण

कम्पास एक महान ढांचा है जो छवियों के साथ एक फ़ोल्डर से स्प्राइट बना सकता है। इसके अलावा सैस का उपयोग करता है।

परकार

नींबू पानी एक ऐसा उपकरण है, जो आपको केवल Sass फाइलों में कोड की एक पंक्ति जोड़कर स्प्राइट्स के साथ फाइल बनाने की अनुमति देता है।

लेमनेड

SpriteMe एक बुकमार्कलेट है जो साइट पर उपयोग किए गए स्प्राइट को उत्पन्न और देख सकता है।

यहाँ बुकमार्क की कार्यशील परत क्या दिखती है:

spritemedemo

पटाखे CS6 - नवीनतम संस्करण में स्प्राइट जेनरेशन फीचर शामिल है।

उपयोगी सेवाएँ

स्प्राइटपैड - स्प्राइट बनाने के लिए ड्रैग-एंड-ड्रॉप सर्विस

spritepad

स्प्राइट गाय - स्प्राइट के साथ मैन्युअल रूप से तैयार की गई फ़ाइल को "स्लाइसिंग" के लिए एक सेवा

spritecow

गोंद - स्प्राइट पैदा करने के लिए कमांड लाइन

सीएसएस स्प्राइट्स - एक और उन्नत जनरेटर

SpriteRight - मैक ऐप जेनरेटर

प्रयुक्त सामग्री और उपयोगी लिंक:

सीएसएस स्प्राइट्स: बुनियादी तकनीक और उपयोगी उपकरण

व्यावहारिक अनुप्रयोग

पहले या बाद में?

डिजाइन तत्वों का संगठन

उपयोगी उपकरण

उपयोगी सेवाएँ

More articles: