सीएसएस स्प्राइट्स - वे क्या हैं और उनका उपयोग कैसे करें। सीएसएस स्प्राइट बनाएँ। उदाहरण डाउनलोड स्प्रिंग्स png

पसंद किया:
27

नापसंद: ४

कोई अनुवाद उपलब्ध नहीं।

प्रेत

इससे पहले या उपरांत"इससे पहले""उपरांत""उपरांत"

क्रोधित पक्षी angry.png। index.html

UTF-8 index.html विंडोज़ -1251 style.css क्रोधित पक्षी

http://spritecow.com

angry.png,

क्रोधित पक्षीशैली फ़ाइल style.css imgs /।यह इस तरह निकला:

कोई अनुवाद उपलब्ध नहीं।

सीएसएस स्प्राइट्स आपकी वेबसाइट के लिए ग्राफिक्स हैं, जो एक ग्राफिक फाइल में संयुक्त है। "एक फाइल क्यों?" - तुम पूछो। तथ्य यह है कि छवियों को संग्रहीत करने के लिए यह दृष्टिकोण वेब पेजों के प्रदर्शन में सुधार कर सकता है, साथ ही ग्राफिक छवियों को अधिक संगठित तरीके से संग्रहीत कर सकता है। आइए स्प्राइट्स का उपयोग करने के लिए कुछ सर्वोत्तम प्रथाओं पर एक नज़र डालें। स्प्राइट्स का बहुत नाम आपको गेम स्प्राइट्स, रेट्रो गेम कंसोल और यहां तक \u200b\u200bकि ब्राउज़र गेम की याद दिला सकता है जो आज बहुत लोकप्रिय हैं:

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

अधिकांश आधुनिक साइट स्प्राइट्स का उपयोग करते हैं, और प्रसिद्ध VKontakte कोई अपवाद नहीं है। उदाहरण के लिए, यह है कि यह एक फ़ाइल में इंटरफ़ेस के "टुकड़े" को कैसे संग्रहीत करता है - अर्थात्, परिचित आइकन:

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

यहाँ एक प्रेत का दूसरा उदाहरण है। यह एक प्रसिद्ध पश्चिमी वेबसाइट ग्राफिक तत्वों को संग्रहीत करता है:

स्प्राइट तैयार करने का सबसे अच्छा समय कब है, आप पूछ सकते हैं? इसके लिए दो अलग-अलग दृष्टिकोण हैं।

अलग-अलग दृष्टिकोण - वेबसाइट निर्माण से पहले और बाद में स्प्राइट बनाना

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

एक व्यवस्थित तरीके से स्प्राइट में चित्रों की व्यवस्था करना

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

सिद्धांत से अभ्यास करने के लिए! स्प्राइट का उपयोग करके एनिमेटेड एंग्री बर्ड बर्ड कैसे बनाएं

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

डिस्क पर कहीं निर्देशिका बनाएँ क्रोधित पक्षी- वहां हम अपने उदाहरण की फाइलें डालेंगे। इस निर्देशिका में पक्षियों के साथ स्प्राइट को सहेजें और फ़ाइल का नाम दें angry.png। अगला चरण नाम के साथ उसी निर्देशिका में एक फ़ाइल बनाना है index.html- यह हमारा एनीमेशन टेस्ट पेज होगा। इसके बाद, इस फ़ाइल को एक संपादक में खोलें और निम्नलिखित कोड वहां डालें:

मुझे थोड़ा समझाइए कि हमने अब क्या किया है। सबसे पहले, हम अपने HTML दस्तावेज़ के लिए एन्कोडिंग सेट करते हैं UTF-8, जिसका मतलब है कि हमें अपने पास रखना चाहिए index.htmlइस एन्कोडिंग में। आप एक और सेट कर सकते हैं, उदाहरण के लिए, विंडोज़ -1251, - हमारे कार्य के लिए यह महत्वपूर्ण नहीं है। अगला, हमने शैली फ़ाइल को दस्तावेज़ से जोड़ा style.css (यह अभी तक हमारी सूची में नहीं है क्रोधित पक्षी, हम इसे थोड़ी देर बाद बनाएंगे)। हमने एक बाहरी स्क्रिप्ट का लिंक भी सेट किया है और jQuery लाइब्रेरी को कनेक्ट किया है - jQuery का उपयोग करके हम गतिशील रूप से अपने पक्षी की तस्वीरों को बदल देंगे और स्प्राइट से इसके "चरण" बदल देंगे। हमने एक आंतरिक जावास्क्रिप्ट ब्लॉक भी तैयार किया, जहां हम पक्षी को एनिमेट करने के लिए कोड रखेंगे। अंत में, दस्तावेज़ के मुख्य निकाय में एक एकल हाइपरलिंक होता है, जिसके अंदर एक DIV ब्लॉक होता है, और इसकी ID को BirdImage के रूप में सेट किया जाता है, और डिफ़ॉल्ट वर्ग बर्ड-स्लीप होता है। इसका मतलब यह है कि जब पृष्ठ खुलता है, तो हमारा पक्षी "सो" जाएगा - यह स्प्राइट के अंदर निचले बाईं छवि से मेल खाती है - जहां इसकी आंखें बंद हैं। अब हमारे स्प्राइट को "काटने" का समय है, अर्थात्। इसमें से व्यक्तिगत चित्र चुनें।

SpriteCow.Com सेवा का उपयोग करते हुए स्प्राइट का छिड़काव करना

स्प्राइट को "स्लाइसिंग" करने का कार्य काफी समय लेने वाला है - इसे देखभाल की आवश्यकता होती है ताकि निर्देशांक में गलती न हो जो स्प्राइट में प्रत्येक छवि को परिभाषित करते हैं। सौभाग्य से, आज ऐसी सेवाएं हैं जो डिजाइनर और लेआउट डिजाइनर से इस सिरदर्द को पूरी तरह से हटा देती हैं। मैं स्लाइसिंग के लिए उपयोग करता हूं और आपको सेवा http://spritecow.com की सलाह देता हूं। सेवा का सार सरल और बहुत सुविधाजनक है - हम माउस के साथ प्रत्येक पक्षी चित्र का चयन करते हैं, और स्प्राइटकॉइन हमें निर्देशांक के साथ तैयार सीएसएस-कोड देता है। हमें बस इतना करना है कि प्रत्येक पक्षी चरण के लिए 4 शैलियों को निर्धारित किया जाए! साइट में प्रवेश करने के बाद, हम 2 बटन देखते हैं - "ओपन इमेज" और "उदाहरण दिखाएँ"। हमें पहला बटन चाहिए, उस पर क्लिक करें:

खुले हुए संवाद में - हमारी स्प्राइट फ़ाइल का चयन करें angry.png,जिसके बाद हम देखते हैं कि हमारा स्प्राइट साइट पर कैसे अपलोड किया गया। अगला, हमें पृष्ठभूमि रंग को परिभाषित करने की आवश्यकता है, इसके लिए "पिक बैकग्राउंड" टूलबार पर क्लिक करें और हमारे स्प्राइट के सफेद क्षेत्र को इंगित करें - यह हमें पक्षी के प्रत्येक चरण को सही ढंग से काटने की अनुमति देगा:

पहली छवि का चयन करें और स्वचालित रूप से इसके लिए CSS कोड प्राप्त करें:

अब, हमारी निर्देशिका में बनाने का समय आ गया है क्रोधित पक्षीशैली फ़ाइल style.css... वहां, हम CSS-code के 4 जनरेट किए गए टुकड़ों को सम्मिलित करेंगे, लेकिन SpriteCow द्वारा हमें दिए गए standard.sprite वर्ग के बजाय, हमारी शैलियों को और अधिक स्पष्ट रूप से कॉल करें। इसके अलावा, चूंकि स्प्राइट छवि को सीधे निर्देशिका की जड़ में संग्रहीत किया जाता है, हम पृष्ठभूमि संपत्ति से अनावश्यक पथ तत्व को हटा देंगे - imgs /।यह इस तरह निकला:

/ * "नियमित" पक्षी। स्प्राइट में शीर्ष बाईं छवि * / .bird-normal (पृष्ठभूमि: url ("गुस्सा। Png") no-repeat -12px -16px; चौड़ाई: 97px; ऊँचाई: 94px;) / * "हैप्पी" पक्षी। स्प्राइट में टॉप-राइट इमेज * / .bird-happy (बैकग्राउंड: url ("गुस्सा.पिंग") no-repeat -118px -17px; चौड़ाई: 97px; height: 94px;) / * "स्लीपिंग" बर्ड। स्प्राइट में नीचे बाईं ओर छवि * / .bird- सो रही है (पृष्ठभूमि: url ("गुस्सा.पेंग") no-repeat -12px -120px; चौड़ाई: 97px; ऊंचाई: 94px;) / * "एंग्री" पक्षी। स्प्राइट में नीचे दाईं ओर छवि * / .bird- गुस्सा (पृष्ठभूमि: url ("गुस्सा.पेंग") no-repeat -118px -120px; चौड़ाई: 97px; ऊंचाई: 94px;)

एनीमेशन बनाने के लिए jQuery कोड लिखने के लिए अंतिम चरण है।

अब जब हमने स्प्राइट को सफलतापूर्वक स्लाइस किया है और अपनी फाइल में प्रत्येक छवि के लिए 4 शैलियों को रखा है style.cssहमें बस उस jQuery कोड को लिखना है जो हमारे हाइपरलिंक पर होवर करते समय और जब हम लिंक पर क्लिक करते हैं तो एनीमेशन जोड़ देगा। जैसा कि हम याद करते हैं, डिफ़ॉल्ट रूप से हमारे पास पक्षी-सो वर्ग है, अर्थात। दस्तावेज़ खोलने पर हमारा लाल पक्षी "सो" जाएगा :)

सभी एनीमेशन 3 jQuery के तरीकों पर आधारित होंगे:

• होवर एक लिंक पर कर्सर मँडराता है और लिंक से कर्सर को "छोड़" देता है। जब हम कर्सर घुमाते हैं, तो पक्षी "जाग" जाएगा - यानी। वर्ग पक्षी-सामान्य हो जाएगा
• मूसडाउन - एक लिंक पर बाईं माउस बटन पर क्लिक करने के लिए हैंडलर। इस मामले में, पक्षी "खुश" हो जाएगा - अर्थात। DIV ब्लॉक को पक्षी-खुश वर्ग सौंपा जाएगा
• माउसअप - बाएं माउस बटन को जारी करने के लिए हैंडलर। रिहा होने पर, पक्षी "क्रोधित" हो जाएगा - अर्थात। DIV ब्लॉक को क्लासबर्ड-गुस्सा सौंपा गया है

तो, चलिए निम्नलिखित कोड को उस जगह पर पेस्ट करते हैं, जिसे हमने पृष्ठ पर रखे आंतरिक जावास्क्रिप्ट ब्लॉक में तैयार किया है:

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () (// jQuery कोड यहाँ $ चेतन करने के लिए ("# पक्षी")। होवर (फ़ंक्शन () ($ (यह) .removeClass ("बर्ड-स्लीपिंग"); $; (यह) .removeClass ("पक्षी-गुस्सा"); $ (यह) .removeClass ("पक्षी-खुश"); $ (यह) .addClass ("पक्षी-सामान्य");), फ़ंक्शन () ($ (यह) ) .removeClass ("पक्षी-सामान्य"); $ (यह) .removeClass ("पक्षी-क्रोधित"); $ (यह) .removeClass ("पक्षी-खुश"); $ (यह) .addClass ("पक्षी-सो") ");)); $ (" # बर्डइमेज ")। मूसडाउन (फंक्शन () ($ (यह) .removeClass (" बर्ड-स्लीपिंग "); $ (यह) .removeClass (" बर्ड-नॉर्मल) ($) यह) .removeClass ("बर्ड-क्रोधित"); $ (यह) .addClass ("बर्ड-हैप्पी");); माउसअप (फंक्शन () ($ (यह) .removeClass ("बर्ड-स्लीपिंग)); $) (यह) .removeClass ("पक्षी-सामान्य"); $ (यह) .removeClass ("पक्षी-खुश")), $ (यह) .addClass ("पक्षी-गुस्सा");)););

किया हुआ! परीक्षण एनीमेशन

बस! हमारा पक्षी तैयार है और अपने एनीमेशन के साथ पेज पर जीवन लाया है! :) आप डेमो देख सकते हैं। उदाहरण के साथ एक संग्रह डाउनलोड करें - लेख के नीचे।

स्प्राइट एक बहुत ही रोचक और सरल तकनीक है। अब मैं आपको इसके बारे में थोड़ा और बताऊंगा।

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

संक्षेप में, सीएसएस स्प्राइट एक फ़ाइल में कई चित्र हैं। केवल एक फ़ाइल है, और इसके अंदर कई चित्र हैं। इसी समय, यह आगंतुक के लिए पूरी तरह से अदृश्य है। जो कोई भी साइट देखता है, वह सोचता है कि वह कई अलग-अलग तस्वीरें देखता है।

इसकी आवश्यकता क्यों है? स्प्राइट उपयोगकर्ता से पेज अनुरोधों की संख्या को कम करते हैं और छवियों के समग्र आकार को कम करते हैं। नतीजतन, आगंतुक साइट को तेजी से देखेगा।

यह कैसे किया है? एक नियमित तस्वीर चौड़ाई और ऊंचाई में बढ़ जाती है, अर्थात, कई चित्र बस एक नियमित चित्र पर एक तरफ रखे जाते हैं। फिर इस सेट से प्रत्येक व्यक्तिगत छवि को किसी दिए गए चौड़ाई या ऊंचाई के साथ आवश्यक ब्लॉक में प्रतिस्थापित किया जाता है ताकि अन्य सभी छवियों को नहीं देखा जा सके। पूरे सेट को काट दिया गया है और केवल एक तस्वीर बनी हुई है। एक प्रेत। अन्य सभी चित्र विशिष्ट ब्लॉक के बाहर बने हुए हैं।

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

शब्दावली

भ्रमित न होने के लिए, आइए तुरंत शब्दों को परिभाषित करें:
प्रेत कई चित्रों के साथ एक फ़ाइल से एक तस्वीर है।
स्प्राइट सेट कई छवियों के साथ ही फाइल है।

स्प्राइट्स का उपयोग करने की विशेषताएं

आपको स्प्राइट का उपयोग कब करना चाहिए? सामान्य तौर पर, उत्तर एक है - स्प्राइट का उपयोग किया जाना चाहिए यदि आपके पृष्ठ पर बहुत सारी छोटी छवियां हैं। इससे कोई फर्क नहीं पड़ता कि वे किस तरह के चित्र हैं। यदि आपके पास एक ही व्यवस्था, कई बटन, कई आइकन आदि के साथ कई ग्रेडिएंट हैं। यदि किसी विशेष पृष्ठ पर बहुत सारी छोटी छवियां हैं, तो आप स्प्राइट्स का उपयोग करने के बारे में सोच सकते हैं।

एक नियम के रूप में, पेज पर तीन प्रकार के चित्र हैं - jpg, png और gif। इन सभी स्वरूपों में दो डाउनलोड मोड हैं - नियमित और प्रगतिशील डाउनलोड।

Jpg प्रारूप नियमित (मूल) और प्रगतिशील (प्रगतिशील) हो सकता है। सामान्य मोड में, चित्र को लाइन द्वारा प्रदर्शित किया जाना शुरू हो जाता है क्योंकि यह लोड होता है और तुरंत अच्छी गुणवत्ता में होता है। प्रगतिशील मोड में, संपूर्ण jpg छवि एक ही बार में लोड की जाती है, लेकिन खराब गुणवत्ता में और गुणवत्ता बढ़ने पर यह लोड होती है।

Gif और png का व्यवहार समान है। जीआईएफ नियमित या इंटरलेस हो सकता है। पीएनजी नियमित या इंटरलेस हो सकती है। Interlaced gifs और pngs प्रगतिशील jpg के समान व्यवहार करते हैं। यह व्यवहार फ़ाइल आकार को थोड़ा बढ़ाता है।

संपूर्ण। छवि तुरंत पृष्ठ पर दिखाई दे सकती है, या देरी से दिखाई दे सकती है। स्प्राइट्स के बारे में जानना जरूरी है। स्प्राइट्स को इंटरलेस्ड या प्रगतिशील बनाना वांछनीय है। उपयोगकर्ता को खराब गुणवत्ता में, जितनी जल्दी हो सके चित्रों को देखना चाहिए।

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

30 किलोबाइट से अधिक की फाइलें मुझे बड़ी लगती हैं। यह व्यक्तिपरक है। फ़ाइल के आकार के बारे में आपके कुछ विचार हो सकते हैं। एक 30 किलोबाइट फ़ाइल 56.6 kbps की इंटरनेट गति पर लगभग 7 सेकंड में डाउनलोड होगी।

स्प्राइट्स का उपयोग करने के उदाहरण

माउस के साथ स्प्राइट

एक स्प्राइट में मेरे पास आइकन होंगे:

1. सूची - एक आइकन
2. लिंक - तीन आइकन
3. खोज प्रपत्र - एक आइकन

यही है, मेरे स्प्राइट के पहले सेट में पांच चित्र होंगे। मेरे सभी चित्र समान आकार के होंगे - 16 बाय 16 पिक्सेल। आप स्प्राइट्स के साथ विभिन्न प्रस्तावों के साथ चित्र बना सकते हैं, यह आवश्यक नहीं है कि सभी छवियों का संकल्प समान हो। चित्रों के विभिन्न प्रस्तावों पर, इन चित्रों को एक फ़ाइल में संयोजित करना थोड़ा अधिक कठिन हो जाता है।

परिणामस्वरूप, पहला उदाहरण इस तरह दिखेगा:

मुझे पाँच आइकन मिले। फिर मैंने बस उन सभी को एक फाइल में जोड़ दिया। यहाँ मैं के साथ समाप्त फ़ाइल है:

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

एक और बात। सूची के लिए अंतिम आइकन हरा तीर है। वह आखिर क्यों है? हम चित्र में शेष आइकन के स्थान की परवाह नहीं करते हैं, लेकिन सूची में कोई भी आइटम कई पंक्तियों को ले सकता है, और यदि हरे रंग का तीर कहीं बीच में है, तो अन्य चित्र अगली पंक्तियों पर चिपक जाएंगे। उपरोक्त सूची चित्र पर एक नज़र डालें कि मैं किस बारे में बात कर रहा हूँ।

इसलिए। मुझे पांच आइकन मिले, उन्हें एक फाइल में मिलाया। हम अगला क्या करें? बेशक, हम कोड लिखते हैं:

• सामग्री सूचीबद्ध करें
• सूची में एक और आइटम
• सामग्री सूचीबद्ध करें
• सूची में एक और आइटम,
  लेकिन दो लाइनों में
• सामग्री सूचीबद्ध करें
• सूची में एक और आइटम

यह सूची का HTML कोड है। अब इसे करने के लिए हमारे स्प्राइट लागू करते हैं:

उल ली (गद्दी: 0 0 0 21px; पृष्ठभूमि: url ("sprites.png") 0 -94-शून्य no-repeat.net;)

हमने यहाँ क्या किया है? प्रत्येक को इंडेंट करें