Advertisement
  1. Web Design
  2. CSS
Webdesign

पूरी तरह से रोटेट और CSS3 के साथ थंबनेल मास्क करें

by
Length:LongLanguages:

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

कभी देखीं गई इमेज थंबनेल दिखाई जाने वाली वेबसाइट को थोड़ा रोटेट करते हैं? यह एक साधारण इफ़ेक्ट है जो दृश्य व्यक्तित्व की एक लेयर जोड़ता है। कह रही है कि, यदि आप CSS के साथ रोटेशन इफ़ेक्ट को प्राप्त नहीं कर रहे हैं, तो आप बहुत कठिन काम कर रहे हैं! यह कैसे सही करे ये जानें!

Republished Tutorial

हर कुछ सप्ताहों में, हम साइट के पूरे इतिहास में से कुछ हमारे पाठक की पसंदीदा पोस्ट की समीक्षा करते हैं। यह ट्यूटोरियल पहली बार अगस्त 2011 में प्रकाशित हुआ था।


परिचय

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

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

  • Angle Consistency: यदि इमेज एक ही एंगल पर घूमते नहीं हैं, तो पृष्ठ की दृश्य स्थिरता खो जाती है। इसका अर्थ है प्रत्येक व्यक्तिगत थंबनेल के एक PSD को बनाए रखने के लिए एक अनुरूप एंगल पर ठीक से घूमता हो। उदाहरण के लिए, आप अपना PSD खोल सकते हैं और महसूस कर सकते हैं कि आप अपने थंबनेल के रोटेशन एंगल को भूल गए हैं।
  • CMS Thumbnail Generation: यदि आप एक CMS (जैसे कि Wordpress) चला रहे हैं, तो संभवतः आपके थंबनेल को स्वचालित रूप से जेनरेट किया जा रहा है। ऊपर वर्णित PSD विधि का उपयोग करके, आपको अपने CMS में प्रत्येक व्यक्तिगत थंबनेल मैन्युअल रूप से बनाना और अपलोड करना होगा। इसके अलावा, यदि आपके पास पहले से मौजूद साइट है लेकिन आप अपने थंबनेल को रोटेशन इफ़ेक्ट लागू करना चाहते हैं, तो आपको Photoshop में सभी थंबनेल को फिर से बनाना होगा, फिर उन सभी को पुनः अपलोड करना होगा!
  • Long-Term Manageability: कहते हैं कि आपने अपने सभी थंबनेल को थोड़ा घूमते हुए बनाया है, लेकिन अब आप अपने गैलरी को फिर से संगठित करना या फिर से डिज़ाइन करना चाहते हैं। इसका मतलब है कि आपको अपने सभी थंबनेल को फिर से बनाना होगा। यदि आप Photoshop में अपने थंबनेल को प्रबंधित कर रहे हैं, तो इसका अर्थ है कि आपको प्रत्येक व्यक्ति के थंबनेल को फिर से समायोजित करना और पुन: सहेजना होगा। ओह।

क्या यह अच्छा नहीं होगा यदि आप कोड के एक लाइन के साथ इस छोटे से रोटेशन कर सकते हैं? ठीक है आप कर सकते हैं! चलो कैसे सीखें।


Step 1: हमारे लक्ष्य को समझना

हम क्या हासिल करने की कोशिश कर रहे हैं, इसका संक्षिप्त अवलोकन निम्न चरणों का पता चलता है:

  1. Photoshop में कोई इमेज थंबनेल बनाएं (रोटेट नहीं किया गया)
  2. img टैग का प्रयोग करके थंबनेल डालें
  3. उचित रूप से CSS का उपयोग कर मास्क (Photoshop मास्क को देखें)
  4. CSS3 के उपयोग से मास्क के भीतर थंबनेल को रोटेट करे
Example of image thumbnail and mask

यह सुनिश्चित करने के लिए कि हमारी गैलरी बेहद खराब हो, स्टेप्स 1-3 को CSS का उपयोग करके पूरा किया जाएगा। स्टेप 4 (रोटेशन इफ़ेक्ट) को CSS3 का उपयोग करके पूरा किया जाएगा।


Step 2: थंबनेल आकार और रोटेशन एंगल की वृद्धि को समझना

हमारे थंबनेल बनाने से पहले, हमें यह निर्धारित करना होगा कि स्क्रीन पर प्रत्येक थंबनेल कितनी बड़ी दिखाई देगी।

अगर हमारा थंबनेल बहुत छोटा है और हम उन्हें बहुत ज्यादा एंगल पर घुमाते हैं, तो कुछ कोने हमें एक खाली स्थान देंगे। इस कदर:

Empyt space in the mask corners

इसलिए, ठीक से मास्क क्षेत्र को भरने के लिए, हम यह निष्कर्ष निकाल सकते हैं कि हमारा थंबनेल उस बड़े को घूमता है जिससे उसे होना चाहिए। गणितीय शब्दों में, थंबनेल बढ़ने के रोटेशन एंगल के रूप में, थंबनेल के आकार (और इसके विपरीत) भी चाहिए।

Increase in rotation means an increase in size
इस key को याद रखें: इमेज थंबनेल हमेशा इमेज मास्क (thumbnail size > mask size ) से बड़ा होगा

Math द्वारा भंग करने वालों को चेतावनी

स्टेप्स 3-6 बताते हैं कि कैसे इमेज मास्क और थंबनेल के लिए आनुपातिक आकार की गणितीय गणना करने के लिए यह समझना आवश्यक है कि CSS transform प्रॉपर्टी के साथ इमेजेज को घुमाने में सक्षम होना जरूरी नहीं है। इसके बजाय, इसका उद्देश्य आपको यह समझने में सहायता करना है कि 360 डिग्री रोटेशन की अनुमति देने के लिए अपने तत्वों को ठीक से कैसे निर्धारित करें। यह सुनिश्चित करता है कि आपको बदसूरत खाली कोनों के साथ नहीं छोड़ा जाएगा।


Step 3: आनुपातिक समान

हमारे मास्क में खाली जगह दिखाने से बचने के लिए, हमें निम्न में से एक निर्धारित करना होगा:

  • वास्तविक थंबनेल का आकार
  • इमेज मास्क का आकार (थंबनेल के देखने योग्य भाग)

क्योंकि थंबनेल और इमेज मास्क अनुपात में समान रूप से बराबर है, अगर हम किसी के आकार को सेट करते हैं तो हम दूसरे के आकार की गणना कर सकते हैं।


Step 4: डाइमेंशन्स निर्धारित करना

इस उदाहरण में, हम अपनी इमेज मास्क आकार पहले सेट करने जा रहे हैं। हमारी इमेज मास्क के आकार को सेट करके हम थंबनेल के आकार की गणना करने के लिए एक छोटे गणित का उपयोग कर सकते हैं:

  • इमेज मास्क का आकार निर्धारित करें: 180x240 पिक्सल
  • विकर्ण पक्ष की लंबाई ढूंढें
    • pythagorean theorem ( a2 + b2 = c2 ) का प्रयोग करें
      • हमारी पहली साइड (a) 180px है
      • हमारी दूसरी साइड (b) 240px है
      • तो, 1802 + 2402 = c2 (डायगोनल लंबाई)
      • 90,000 = c2
      • 300 = c (प्रत्येक पक्ष का वर्गमूल ले)
    • हमारी डायगोनल लंबाई (c) 300 के बराबर होती है
pythagorean theorem

डायगोनल लंबाई एक महत्वपूर्ण संख्या है। हमारे थंबनेल पूर्ण 360° रोटेशन की अनुमति देने के लिए, इसकी कम से कम पक्ष को इमेज मास्क की सबसे लंबी ओर के बराबर होना चाहिए। (भले ही आपको इसकी आवश्यकता न हो, 360° रोटेशन के लिए प्रोविजनिंग आपके थंबनेल का आकार बदलने के बिना आपके रोटेशन एंगल में भविष्य में परिवर्तन की अनुमति देगा)।

Thumbnails shortest side equals masks's longest side

Step 5: थंबनेल डाइमेंशन्स की गणना करना

जैसे आप देख सकते हैं, हमारा थंबनेल सबसे छोटा पक्ष हमारे मास्क के सबसे लंबे पक्ष के बराबर होना चाहिए। अगर ऐसा नहीं है, तो हमें खाली जगह के साथ छोड़ दिया जाएगा याद रखें: थंबनेल का आकार इमेज मास्क आकार से अनुपात में अधिक है।

Proportional relationship between thumbnail and mask

थंबनेल के आकार की गणना करते हुए, जब हम इमेज मास्क के आयाम को जानते हैं तो ठीक से फिट बैठना आसान होता है। हम केवल मास्क का सबसे बड़ा पक्ष (डायगोनल) लेते हैं और इसे हमारे थंबनेल के सबसे छोटी ओर के बराबर मानते हैं।

  • मास्क का सबसे बड़ा पक्ष (300) थंबनेल की सबसे छोटी ओर (x) के बराबर है
  • थंबनेल की लंबाई को खोजने के लिए आनुपातिक संबंधों का उपयोग करें
    • 180: 300 (मास्क ऊंचाई: थंबनेल की ऊंचाई)
    • 180: 300 (मास्क ऊंचाई: थंबनेल की ऊंचाई)
  • हल करने के लिए बहुसंख्यक क्रॉस करें
    • 180y = 72,000
  • y = 400 (थंबनेल की लंबाई)
Finding y2

अब हमने अपना मास्क और थंबनेल आकार निर्धारित किया है। हमें पता है कि अगर हमारी इमेज मास्क 180x240px है, तो उस मास्क के अंदर इमेज थंबनेल 360 डिग्री रोटेशन की अनुमति के लिए 300x400px होना चाहिए।

A Happy Note: चूंकि इमेज मास्क और थंबनेल आकार समान रूप से समान हैं, यह गणित भी काम करेगा अगर हम पहले अपना थंबनेल आकार सेट करें! हम समान पायथागॉरियन प्रमेय और उचित आकारों का निर्धारण करने के लिए आनुपातिक रिश्तों का उपयोग करेंगे।


Step 6: अंत में कुछ HTML

अब हम अपने सभी आकारों को जानते हैं, चलिए कुछ मूलभूत HTML से शुरू करके हमारे घुमाए गए थंबनेल बनाते हैं।

यह मूल HTML मार्कअप निम्न सम्मिलित करता है:

  • <input> - यह उपयोगकर्ता को रोटेशन एंगल को बदलने की अनुमति देगा। साथ ही, हम अपने मूल्य विशेषता को उसी value के बराबर सेट करते हैं जो हम शुरू में हमारे सीएसएस (इस मामले में 15) में सेट करेंगे।
  • <span> - यह error संदेश व्यू से छिपा होगा। JQuery का उपयोग करके, हम यह दिखाएंगे कि उपयोगकर्ता इनपुट बॉक्स में किसी संख्या के अलावा कुछ भी कहता है।
  • <img> - ये हमारे थंबनेल हैं आप कुछ भी करते हैं उससे लिंक किया जा सकता है।
  • clear:both - हमारे चलने वाले थंबनेल को साफ करता है
  • class="mask" - हमारे इमेज मास्क के लिए क्लास
basic HTML layout

Step 7: CSS बुनियादी पृष्ठ स्टाइलिंग

आइए हमारे पृष्ठ पर कुछ बुनियादी स्टाइल लागू करें ताकि यह संरचना और सादगी दे सके।

यहां ध्यान दें कि हमने डिफ़ॉल्ट रूप से हमारी error-message छुपा दिया है क्योंकि हम इसे बाद में jQuery में दृश्यता को टॉगल कर देंगे।

कुछ CSS3 के इफ़ेक्ट जोड़ें

हमारे बुनियादी स्टाइल को बढ़ाने के लिए कुछ और विवरण जोड़ें

basic CSS styling

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


Step 8: CSS स्टाइलिंग इमेज मास्क

चलिए अपने थंबनेल के लिए इमेज मास्क को लागू करते हैं। हमारे HTML में, हमने प्रत्येक थंबनेल को एक एंकर टैग में लपेट लिया और इसे एक mask का class दिया जो हम अपने CSS में इस्तेमाल करेंगे।

यहां हमने CSS गुणों का विवरण दिया है (और हम उन्हें क्यों इस्तेमाल करते हैं):

  • position:relative - हमारे img टैग पूरी तरह से हमारे इमेज मास्क के अंदर स्थित होंगे
  • height,width - इससे पहले हमने हमारे इमेज मास्क के डाइमेंशन्स निर्धारित किए है। यह वह जगह है जहां हम उन आकारों को रखते हैं।
  • flot:left - हमारी इमेजेज को फ़्लोट करता है ताकि वे एक गैलरी फॉर्म में दिखाई दें।
  • overflow:hidden - पहले की गणना के अनुसार, हमारे थंबनेल 300x400px होंगे। हालांकि, हम केवल उनमें से एक हिस्सा (180x240px) दिखाएंगे। यह प्रॉपर्टी मास्क के रूप में काम करती है, जो हमारे थंबनेल के हिस्से को छुपाता है जो 180x240 डाइमेंशन्स के बाहर फैली हुई है।
  • margin - हमारे इमेजेज को बाहर निकालें
  • border, box-shadow - यह हमें एक दोहरी सीमा प्रदान करता है (समर्थन ब्राउज़र में)। border प्रॉपर्टी हमें इमेज के चारों ओर एक मोटी, ऑफ-व्हाइट border देती है, जबकि box-shadow हमें अपनी मोटी, ऑफ-व्हाइट बॉर्डर के चारों ओर एक पतली, काली सीमा देती है।
thumbnails not rotated

Step 9: CSS साइजिंग थंबनेल

स्टेप 5 में दिए गए डाइमेंशन्स के अनुसार हमारे थंबनेल आकार सेट करें।


Step 10: CSS केंद्रित थंबनेल

अभी, हमारे थंबनेल अपेक्षाकृत (शीर्ष बाएं कोने से) स्थित हैं।

thumbnail positioned in the top left

हम चाहते हैं कि हमारा थंबनेल मास्क के भीतर हॉरिज़ॉन्टली और वर्टिकली रूप से केंद्रित हो।

thumbnail positioned in the center

इसे पूरा करने के लिए, हम निम्नलिखित CSS नियमों का उपयोग करते हैं:

यहां बताया गया है कि हमने क्या किया:

  • position:absolute - यह पूरी तरह से इमेज मास्क के भीतर थंबनेल स्थित है
  • margin - हमने negative मार्जिन सेट किए हैं जो इमेज की ऊंचाई और चौड़ाई (300x400) के बराबर आधा है, फिर हमारे पोजिशनिंग गुणों को top और left सेट करें और शेष जो तत्व को वापस सही केंद्र में खींचते हैं।
thumbnails centered positioning

Step 11: CSS थंबनेल रोटेशन

हम अपने तत्वों को घुमाने के लिए CSS3 प्रॉपर्टी transform का प्रयोग करेंगे। इसलिए, हमारे CSS में सभी ब्राउज़र उपसर्ग शामिल होंगे

CSS यहाँ बहुत आसान है। हम "deg" के बाद अपने कोष्ठक के रोटेशन के एंगल को स्थानांतरित करते हैं।

इस उदाहरण में हम 15 को रोटेशन मान के रूप में इस्तेमाल किया था, लेकिन आप वहां एक अलग वैल्यू डाल सकते हैं। चूंकि हमने हमारे मास्क के आकारों की ठीक से थंबनेल की गणना की है, इसलिए हमने पूर्ण 360° रोटेशन के लिए कमरे में प्रावधान किया है! एक सकारात्मक पूर्णांक इमेज को दाईं ओर घूमता है, एक नकारात्मक पूर्णांक इमेज को बाईं ओर घुमाता है।

thumbnails rotated

Step 12: CSS इमेज हॉवर इफ़ेक्ट

एक अतिरिक्त इफ़ेक्ट के रूप में, हम CSS की एक सरल रेखा जोड़ते हैं जो उपयोगकर्ता के आकार और इमेज को बदलते समय हमारे सीमा रंग को बदलता है।


Step 13: jQuery बदलते रोटेशन मान गतिशील रूप से

थोड़ा बोनस के रूप में, हम उपयोगकर्ता को हमारे इनपुट बॉक्स में मान दर्ज करने की अनुमति दे रहे हैं जो CSS रोटेशन एंगल को बदलता है। तो पहले, हमारे कस्टम स्क्रिप्ट के लिंक के साथ समापन body टैग से पहले हमारे पेज के अंत में jQuery जोड़ें।


Step 14: jQuery के दस्तावेज़ तैयार

अब सेट करें जब jQuery के लिए तैयार किया गया दस्तावेज़:


Step 15: jQuery का प्रारंभिक फ़ंक्शन

हम कभी भी हमारे "update" बटन को क्लिक करने के लिए फ़ंक्शन बनाते हैं।


Step 16: jQuery के वर्तमान रोटेशन वैल्यू को संग्रहीत करना

हम एक वेरिएबल में रोटेशन के वर्तमान एंगल के लिए CSS न्यूमेरिक वैल्यू स्टोर करना चाहते हैं।

इस कोड को rotation_amount id (जो हमने input को सौंपा है) पाता है और इसका वर्तमान मूल्य मिलता है। यदि आपको याद है, तो हम प्रारंभिक value को 15 के बराबर सेट (रोटेशन एंगल के लिए हमारे सीएसएस कोड के समान)।


Step 17: jQuery का उपयोग करना isNaN () फ़ंक्शन

हम उपयोगकर्ता के इनपुट मूल्य को हमारे नए एंगल के रोटेशन बनाना चाहते हैं। हालांकि, हम यह सुनिश्चित करना चाहते हैं कि उपयोगकर्ता गलती से एक गैर-संख्यात्मक मान दर्ज नहीं करता है। ऐसा है जहां isNaN() javascript फ़ंक्शन आता है। IsNa() का अर्थ है "is not a number"। यह फ़ंक्शन ठीक उसी प्रकार करता है कि इसके नामों का क्या अर्थ है: यह देखने के लिए जांचता है कि आप जिस मूल्य को पास करते हैं वह "is not a number"।

इसलिए, हम isNaN() फ़ंक्शन का उपयोग करेंगे और हमारे रोटेशन एंगल वैल्यू (जैसा उपयोगकर्ता द्वारा दर्ज किया गया है) को पास करेंगे। यदि यह कोई संख्या नहीं है, तो हम अपने एरर संदेश को प्रदर्शित करेंगे।


Step 18: jQuery नई रोटेशन एंगल को अपडेट कर रहा है

यदि उपयोगकर्ता का नया प्रवेश किया हुआ मान संख्या नहीं है, तो हमने एक एरर संदेश प्रदर्शित किया है। अब हम एक else स्टेटमेंट का उपयोग करेंगे, जब उन्होंने एक संख्यात्मक मूल्य दर्ज कर लिया गया है । सबसे पहले हम एरर संदेश को छिपाते हैं।

क्योंकि हमारे CSS (विभिन्न ब्राउज़र उपसर्गों के कारण) में रोटेशन एंगल को कई बार संग्रहीत किया जाता है, इसलिए हमें jQuery के साथ उन सभी मानों को अपडेट करना होगा। तो, हम क्या करेंगे जो एक वैरिएबल (नया एंगल मान के साथ) में CSS मूल्य का वाक्यविन्यास स्टोर करेंगे। मूलतः, हम rotate(15deg) लिख रहे हैं और '15' के मान को उपयोगकर्ता इनपुट के साथ बदलते हैं।

similar CSS values

फिर हम संबंधपरक मानों के साथ एक CSS ऑब्जेक्ट बनाते हैं। हम अपनी प्रत्येक CSS प्रॉपर्टीयों (परिवर्तन के लिए ब्राउज़र उपसर्गों) को परिभाषित करते हैं, फिर वैल्यू को वैरिएबल में डालें, जो हम सिर्फ परिभाषित करते हैं।

अब हम बस हमारे CSS को अपडेट करने के लिए हमारे CSS गुणों और मूल्यों को संग्रहीत करने के लिए jQuery को पास करते हैं।


Step 19: jQuery अंतिम jQuery कोड

यह है कि हमारे सभी jQuery की तरह दिखता है:


निष्कर्ष

मुझे आशा है कि आपने कुछ सीखा है, जो कि Photoshop में गैर-लचीली डिज़ाइनों के लिए खुद को करने के लिए अक्सर ब्राउज़र में CSS तकनीक का प्रयोग करके निषिद्ध है। निम्नलिखित के लिए धन्यवाद!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.