CSS कमांड लाइन स्प्राइट

हाँ, CSS स्प्राइट बनाने के उपकरण मौजूद हैं। मैंने भी ऐसी ही एक सेवा की । लेकिन वे समय-समय पर (अब, मेरा) तोड़ते हैं। लेकिन टीम एक बहुत लायक है, और इमेजमैजिक है । आइए देखें कि हम कमांड लाइन से केवल सीएसएस स्प्राइट कैसे बना सकते हैं।

एक चित्र बनाएँ

शुरू करने के लिए, हमारे पास अलग-अलग फ़ाइलों की एक सूची है:

$ ls
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  1.पिंग करें 2.gif dot.png phoney.gif tw.gif 

• - 1.पंग
• - 2.गफ
• - dot.png
• - phoney.gif
• - tw.gif

चलो उनमें से एक स्प्राइट बनाते हैं:

 $ convert *png *gif -append result/result-sprite.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हाँ, वह सब है। हम परिणाम को देखते हैं।

अधिक जानकारी

Imagemagick कमांड आमतौर पर इस तरह दिखता है:

 $ convert image1.png image2.png image3.png -append result/result-sprite.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हम तारांकन के साथ चित्रों की सूची को बदल सकते हैं:

 $ convert * -append result-sprite.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

या पिछले मामले में, मुखौटा * .gif और * .png।

एक क्षैतिज स्प्राइट के बारे में क्या? आपको केवल प्रतिस्थापन करने की आवश्यकता है + परिशिष्ट के साथ:

 $ convert *png *gif +append result/result-sprite-horizon.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

परिणाम:





यह भी ध्यान दें कि स्रोत चित्र किसी भी प्रारूप के हो सकते हैं - GIF, PNG, JPEG, आउटपुट PNG है। मैं PNG8 से शुरू करने की सलाह दूंगा:

 $ convert *png *gif -append PNG8:result/result-sprite-horizon.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सीएसएस

चूंकि ये सभी मैनुअल ऑपरेशन हैं, सीएसएस स्वचालित रूप से उत्पन्न नहीं होता है। लेकिन यह भी काफी सरल है। एक ऊर्ध्वाधर स्प्राइट लें:





सभी छवियों की पृष्ठभूमि-स्थिति-x संपत्ति 0px पर सेट होगी।

पहले 16x16 चित्र में बैकग्राउंड-पोजिशन-y समन्वय भी 0px है। तब:

 .first { width: 16px; height: 16px; background: url(result/result-sprite.png) 0 0; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

... जहाँ निर्देशांक 0 0 वैकल्पिक हैं और छोड़ा जा सकता है।

दूसरी तस्वीर भी 16x16 है, इसलिए यह अधिक सुविधाजनक है। इसका एक्स कोऑर्डिनेट 0 है, और वाई पिछली तस्वीर की ऊँचाई पर विपरीत चिन्ह के साथ है:

 .second { width: 16px; height: 16px; background: url(result/result-sprite.png) 0 -16px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और इसी तरह। Y समन्वित = पिछले तत्व का Y - पिछले वाले की ऊंचाई।

लेकिन ... लेकिन ... हर बार आकारों का पता लगाने और ऊंचाई को ट्रैक करने के लिए? क्या तुम मजाक कर रहे हो?

Imagemagick बचाव के लिए आता है। 'पहचान' आपको चित्र के बारे में बुनियादी जानकारी प्राप्त करने की अनुमति देता है:

 $ identify 1.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  पीएनजी 16x16 16x16 + 0 + 0 DirectClass 8-बिट 260 बी 

'पहचान' के पास '-फॉर्म' का विकल्प भी है और मास्क * का समर्थन करता है। इसलिए, सभी जानकारी को सुखद तरीके से प्राप्त करना आसान है:

 $ identify -format "%g - %f\n" *
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  16x16 + 0 + 0 - 1. पीएनजी
 16x16 + 0 + 0 - 2. जीआईएफ
 6x6 + 0 + 0 - dot.png
 10x16 + 0 + 0 - phoney.gif
 16x16 + 0 + 0 - tw.gif 

% f फ़ाइल नाम है,% g ज्यामिति है।

\ n - आसान प्रदर्शन के लिए लाइन ब्रेक।

इसलिए, यदि आप 5 तत्वों का Y समन्वय प्राप्त करना चाहते हैं, तो पिछले वाले की ऊँचाई: 16 + 16 + 6 + 16

 .last { width: 16px; height: 16px; background: url(result-sprite.png) 0 -54px }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

कुछ अनुकूलन

Imagemagick अनुकूलित PNGs उत्पन्न नहीं करता है, इसलिए कुछ अनुकूलन आवश्यक हैं। आप pngout, Optipng, आदि का उपयोग कर सकते हैं । या smush.it या punypng.com जैसे वेब टूल।

या किस बारे में ... कमांड लाइन पर smush.it:

 $ curl http://www.smushit.com/ysmush.it/ws.php?img=http://www.phpied.com/files/sprt/result/result-sprite.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

परिणाम - JSON ऑब्जेक्ट:

  {"src": "http: \ / \ / www.phpied.com \ / files \ / sprt \ / result \ /result-sprite.png"
  "src_size": 1759,
  "dest": "http: \ / \ / smushit.zenfs.com \ / results \ / 5a737623 \ / smush \ /% 2Ffiles% 2Fsprt% 2Fresult% 2Fresult-sprite.png",
  "dest_size": 1052,
  "प्रतिशत": "40.19",
  "आईडी": ""} 

लगभग दो बार बचत। "भाग्य" फ़ील्ड की प्रतिलिपि बनाएँ

 $ curl http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png > result/smushed-sprite.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

वह सब है।

संक्षेप में कहना

1. स्प्राइट बनाएँ:

 $ convert *png *gif -append PNG8:result/result-sprite.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. हम आकार:

 $ identify -format "%g - %f\n" *png *gif
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3. और अनुकूलित करें:

 $ curl http://www.smushit.com/ysmush.it/ws.php?img=http://url...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Stoyan Stefanov के लेख कमांड-लाइन सीएसएस स्प्रिट का अनुवाद ।



PS द इमेजमैजिक थीम पहले से ही एक हब पर उल्लिखित थी, लेकिन इस लेख का दूसरा भाग मुझे उपयोगी लगा और मैंने इसका संपूर्ण रूप से अनुवाद करने का निर्णय लिया।