CSS3 के साथ 6 कूल इमेज कैप्शन

CSS3 वास्तव में शक्तिशाली है। यह हुआ करता था कि हमें सरल संक्रमण प्रभाव बनाने के लिए छवियों या जावास्क्रिप्ट कोडनों की एक गुच्छा की आवश्यकता होती है। आजकल हम केवल CSS3 के साथ ही ऐसा कर सकते हैं.

इस ट्यूटोरियल में, हम आपको दिखाएंगे कि कैसे CSS3 का उपयोग करके विभिन्न बदलावों के साथ इमेज कैप्शन बनाएं.

डेमो
स्रोत डाउनलोड करें

ब्राउज़र का समर्थन

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

निम्नलिखित ब्राउज़र हैं जो पहले से ही परिवर्तन और संक्रमण का समर्थन करते हैं:

इंटरनेट एक्सप्लोरर 10+ (अभी तक जारी नहीं)
फ़ायरफ़ॉक्स ६+
क्रोम 13+
सफ़ारी 3.2+
ओपेरा 11+

अब, ट्यूटोरियल शुरू करते हैं.

HTML संरचना

हमारे पास 6 छवियां हैं; एक अलग कैप्शन शैली के साथ प्रत्येक छवि.

     सरल कैप्शन
  
     पूर्ण कैप्शन
 लॉरेम इप्सम डोलर सिट एमेट, कंसेटेट्युर एडिपिसिंग एलीट, सेड डायम नॉनमी निब युरिस्मोड टिंसीडंट उर लोरेट डोलोर मैग्ना अलिकम एरट वुल्लेट.
  
     फीका कैप्शन
 लॉरेम इप्सम डोलर सिट एमेट, कंसेटेट्युर एडिपिसिंग एलीट, सेड डायम नॉनमी निब युरिस्मोड टिंसीडंट उर लोरेट डोलोर मैग्ना अलिकम एरट वुल्लेट.
  
     स्लाइड कैप्शन
 लॉरेम इप्सम डोलर सिट एमेट, कंसेटेट्युर एडिपिसिंग एलीट, सेड डायम नॉनमी निब युरिस्मोड टिंसीडंट उर लोरेट डोलोर मैग्ना अलिकम एरट वुल्लेट.
  
      यह रोटेट कैप्शन है
 लॉरेम इप्सम डोलर सिट एमेट, कंसेटेट्युर एडिपिसिंग एलीट, सेड डायम नॉनमी निब युरिस्मोड टिंसीडंट उर लोरेट डोलोर मैग्ना अलिकम एरट वुल्लेट.
  
 
     फ्री स्टाइल कैप्शन
 लॉरेम इप्सम डोलर सिट एमेट, कंसेटेट्युर एडिपिसिंग एलीट, सेड डायम नॉनमी निब युरिस्मोड टिंसीडंट उर लोरेट डोलोर मैग्ना अलिकम एरट वुल्लेट.

बेसिक सीएसएस

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

स्टाइल को स्टाइल में अलग किया जाएगा। फाइल, तो हमारी HTML फ़ाइल साफ-सुथरी दिखेगी। हालाँकि, फ़ाइल में स्टाइलिंग नियम लागू करने के लिए हेड टैग के अंदर एक लिंक स्टाइल जोड़ना न भूलें.

ठीक है, आइए html टैग और मुख्य आवरण आईडी से शुरू करते हुए, तत्व को स्टाइल करना शुरू करें:

 html पृष्ठभूमि-रंग: #eaea;  #mainwrapper font: 10pt normal Arial, sans-serif; ऊंचाई: ऑटो; मार्जिन: 80 पीएक्स ऑटो 0 ऑटो; पाठ-संरेखण: केंद्र; चौड़ाई: 660 पीएक्स;

छवि बॉक्स शैली

हम छवियों वाले बक्से में कुछ सामान्य शैलियों को लागू करते हैं। बक्से बाईं ओर फ्लोट का उपयोग करके प्रदर्शित किए जाएंगे। ध्यान दें कि हमने अतिप्रवाह भी जोड़ा: छिपी हुई संपत्ति; यह अंदर की सभी वस्तुओं को छिपाए जाने वाले div से होकर गुजरता है.

हम बॉक्स के अंदर हर छवि पर संक्रमण संपत्ति की घोषणा करते हैं, अगर हमें बाद में छवि संक्रमण की आवश्यकता होती है.

 # मेनवायरर। बॉक्स बॉर्डर: 5 पीएक्स सॉलिड #fff; कर्सर: सूचक; ऊंचाई: 182px; बाईंओर तैरना; मार्जिन: 5 पीएक्स; स्थिति: रिश्तेदार; छिपा हुआ सैलाब; चौड़ाई: 200px; -webkit- बॉक्स-छाया: 1px 1px 1px 1px #ccc; -मोज़-बॉक्स-छाया: 1 पीएक्स 1 पीएक्स 1 पीएक्स 1 पीएक्स # एफसीसी; बॉक्स-छाया: 1px 1px 1px 1px #ccc;  #mainwrapper .box img स्थिति: निरपेक्ष; बायां: 0; -वेबकैट-संक्रमण: सभी 300ms आसानी से बाहर; -मोज़-संक्रमण: सभी 300ms आसानी से बाहर; -ओ-संक्रमण: सभी 300ms आसानी से बाहर; -ms- संक्रमण: सभी 300ms आसानी से बाहर; संक्रमण: सभी 300ms आसानी से बाहर;

कैप्शन कॉमन स्टाइल

कैप्शन में कुछ सामान्य शैली होगी और संपत्ति का संक्रमण भी होगा। अपारदर्शिता गुण का उपयोग करने के बजाए, हम अल्फा चैनल के लिए 0.8 के साथ RGBA रंग मोड का उपयोग करते हैं, जिसमें कैप्शन को थोड़ा पारदर्शी दिखने के लिए अंदर पाठ को प्रभावित किए बिना बनाया जा सकता है।.

 # मेनवायरर। बॉक्स। कपट पृष्ठभूमि-रंग: आरजीबीए (0,0,0,0.8); स्थिति: निरपेक्ष; रंग: #fff; z-index: 100; -वेबकैट-संक्रमण: सभी 300ms आसानी से बाहर; -मोज़-संक्रमण: सभी 300ms आसानी से बाहर; -ओ-संक्रमण: सभी 300ms आसानी से बाहर; -ms- संक्रमण: सभी 300ms आसानी से बाहर; संक्रमण: सभी 300ms आसानी से बाहर; बायां: 0;

कैप्शन 1

पहले कैप्शन में एक साधारण संक्रमण प्रभाव होगा जो आमतौर पर कैप्शन के लिए उपयोग किया जाता है। जब हम चित्र पर होवर करेंगे तो कैप्शन नीचे से ऊपर आएगा। इसे संबोधित करने के लिए, कैप्शन की निश्चित ऊंचाई 30px होगी और हम इसे छवि के नीचे छिपाने के लिए इसकी निचली स्थिति -30px लागू करते हैं.

 # मेनरैपर; बॉक्स। सिम्पल-कैप्शन ऊंचाई: 30 पीएक्स; चौड़ाई: 200px; प्रदर्शन क्षेत्र; नीचे: -30 पीएक्स; लाइन-ऊँचाई: 25pt; पाठ-संरेखण: केंद्र;

कैप्शन २

दूसरे प्रकार की छवि / बॉक्स आयाम (200x200px) की पूरी चौड़ाई और ऊंचाई है और संक्रमण केवल स्लाइडिंग दरवाजा प्रभाव की तरह होगा कि यह ऊपर से नीचे तक स्लाइड करेगा.

 # मेनव्रेपर .बॉक्स .full-कैप्शन चौड़ाई: 170px; ऊंचाई: 170 पीएक्स; शीर्ष: -200 पीएक्स; पाठ-संरेखण: बायां; गद्दी: 15 पीएक्स;

कैप्शन 3

तीसरे कैप्शन में लुप्त होती प्रभाव होगा। इसलिए, हमने इसकी प्रारंभिक अवस्था के लिए अपारदर्शिता: 0 जोड़ दी.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale- कैप्शन अपारदर्शिता: 0; चौड़ाई: 170 पीएक्स; ऊंचाई: 170 पीएक्स; पाठ-संरेखण: बायां; गद्दी: 15 पीएक्स;

कैप्शन ४

चौथा कैप्शन बाईं ओर से दाईं ओर जाएगा, इसलिए हमने इसकी प्रारंभिक स्थिति के रूप में बाईं ओर 200px (बाएं: 200px) तय की.

 ** कैप्शन 4: स्लाइड ** / # मेनवॉपर .बॉक्स। स्लाइड-कैप्शन चौड़ाई: 170px; ऊंचाई: 170 पीएक्स; पाठ-संरेखण: बायां; गद्दी: 15 पीएक्स; बाएं: 200 पीएक्स;

कैप्शन 5

पांचवें कैप्शन का घूर्णन प्रभाव होगा। यह सिर्फ कैप्शन नहीं है जो घुमाएगा, बल्कि छवि भी। यह घूमने से स्थिति बदलने की तरह है.

इसलिए, जब तक आप कैप्शन को पढ़ने के लिए अपने मॉनिटर को घुमाना पसंद नहीं करते, तब तक हम -180 डिग्री रोटेशन के साथ ट्रांसफ़ॉर्म प्रॉपर्टी जोड़ देते हैं.

 # मेनवॉपर # बॉक्स-5.बॉक्स .रोटेट-कैप्शन चौड़ाई: 170 पीएक्स; ऊंचाई: 170 पीएक्स; पाठ-संरेखण: बायां; गद्दी: 15 पीएक्स; शीर्ष: 200 पीएक्स; -मोज़-ट्रांसफ़ॉर्म: रोटेट (-180deg); -ओ-परिवर्तन: घुमाव (-180deg); -webkit- परिवर्तन: घुमाएँ (-180deg); परिवर्तन: घुमाएँ (-180deg);  #mainwrapper .box .rotate चौड़ाई: 200px; ऊंचाई: 400px; -वेबकैट-संक्रमण: सभी 300ms आसानी से बाहर; -मोज़-संक्रमण: सभी 300ms आसानी से बाहर; -ओ-संक्रमण: सभी 300ms आसानी से बाहर; -ms- संक्रमण: सभी 300ms आसानी से बाहर; संक्रमण: सभी 300ms आसानी से बाहर;

कैप्शन 6

अंतिम कैप्शन में स्केल ट्रांसफॉर्मेशन होगा। हालांकि, पिछले कैप्शन में, इसके अंदर का टेक्स्ट वास्तव में .caption ट्रांज़िशन शिफ्ट के साथ दिखाई देगा। इस खंड में हम इसे थोड़ा अलग करेंगे.

संक्रमण शिफ्ट होने के बाद पाठ दिखाई देगा। तो, हम पाठ में संक्रमण-देरी जोड़ते हैं, इस मामले में h3 और p टैग.

 #mainwrapper .box; .scale-caption h3, #mainwrapper .box .scale-caption p स्थिति: रिश्तेदार; बाएं: -200 पीएक्स; चौड़ाई: 170 पीएक्स; -वेबकैट-संक्रमण: सभी 300ms आसानी से बाहर; -मोज़-संक्रमण: सभी 300ms आसानी से बाहर; -ओ-संक्रमण: सभी 300ms आसानी से बाहर; -ms- संक्रमण: सभी 300ms आसानी से बाहर; संक्रमण: सभी 300ms आसानी से बाहर;  #mainwrapper .box; .scale- कैप्शन h3 -webkit- संक्रमण-देरी: 300ms; -मोज़-संक्रमण-देरी: 300ms; -ओ-संक्रमण-देरी: 300ms; -ms- संक्रमण-विलंब: 300ms; संक्रमण-विलंब: 300ms;  #mainwrapper .box; .scale-caption p -व्बकिट-संक्रमण-विलंब: 500ms; -मोज़-संक्रमण-देरी: 500ms; -ओ-संक्रमण-देरी: 500ms; -ms- संक्रमण-देरी: 500ms; संक्रमण-विलंब: 500ms;

चलो उनका चाल चलें

निम्नलिखित अनुभाग में, हम कैप्शन के व्यवहार को परिभाषित करेंगे जब हम छवियों या बक्से पर मंडराते हैं.

कैप्शन व्यवहार 1: दिखाओ.

पहले कैप्शन के लिए, हम चाहेंगे कि जब हम बॉक्स के ऊपर मंडराने लगें (नीचे से)। इस चाल को संबोधित करने के लिए हम ट्रांसफ़ॉर्म प्रॉपर्टी का उपयोग करते हैं और नीचे दिए गए CSS कोड कैप्शन को इसके वजन के 100% को शीर्ष पर ले जाने के लिए कहते हैं.

 #mainwrapper .box: hover .simple-caption -मोज़-ट्रांसफ़ॉर्मेशन: ट्रांसलि-(-100%); -ओ-ट्रांसफॉर्म: ट्रांसली (-100%); -webkit- परिवर्तन: TranslY (-100%); रूपांतर: ट्रांस्वाय (-100%);

यदि आपको अनुवाद के लिए नकारात्मक मान होने की बात नहीं आती है, तो आप अधिक जानकारी प्राप्त करने के लिए इस ट्यूटोरियल को पढ़ना चाहते हैं.

कैप्शन व्यवहार 2: इसे नीचे ले जाएँ.

इसके विपरीत, दूसरा कैप्शन ऊपर से नीचे जाएगा। इसलिए, हमारे पास अनुवाद के लिए सकारात्मक मूल्य होगा.

 # मेनवॉपर .बॉक्स: होवर .full-कैप्शन -मोज़-ट्रांसफ़ॉर्म: ट्रांसली (100%); -ओ-ट्रांसफॉर्म: ट्रांसली (100%); -webkit- परिवर्तन: अनुवाद (100%); परिवर्तन: अनुवाद (100%);

कैप्शन व्यवहार 3: में फीका.

तीसरा कैप्शन वास्तव में सबसे आसान है। जब बॉक्स होवर पर होता है तो कैप्शन अपारदर्शिता 1 को दिखाई देगा, और चूंकि हमने कैप्शन क्लास में संक्रमण गुण जोड़ा है, इसलिए संक्रमण सुचारू रूप से चलना चाहिए.

 #mainwrapper .box: hover .fade-caption अपारदर्शिता: 1;

कैप्शन व्यवहार 4: इसे बाईं ओर स्लाइड करें.

जैसा कि हम पहले उल्लेख करते हैं, यह कैप्शन स्लाइड को बाईं ओर बनाएगा, हालांकि, छवि दाईं ओर स्लाइड भी करेगी। तो, यहां हमारे पास 2 सीएसएस घोषणाएं हैं.

नीचे दिए गए सीएसएस कोड से संकेत मिलता है कि जब हम बॉक्स पर मंडराते हैं तो कैप्शन इसकी चौड़ाई का 100% बाईं ओर स्लाइड करेगा। ध्यान दें कि अब हम ट्रांसलेक्स का उपयोग करते हैं, क्योंकि हम चाहते हैं कि स्लाइड क्षैतिज रूप से दाईं ओर से बाईं ओर जाए.

 #mainwrapper .box: hover .slide-कैप्शन बैकग्राउंड-कलर: rgba (0,0,0,1) - महत्वपूर्ण; -मोज़-ट्रांसफ़ॉर्म: ट्रांसलेक्स (-100%); -ओ-परिवर्तन: TranslX (-100%); -webkit- परिवर्तन: TranslX (-100%); अपारदर्शिता: 1; रूपांतर: TranslX (-100%);

जब हम बॉक्स पर होवर करेंगे तो इमेज बाईं ओर स्लाइड हो जाएगी.

 #mainwrapper .box: hover img # image-4 -moz-transform: TranslateX (-100%); -ओ-परिवर्तन: TranslX (-100%); -webkit- परिवर्तन: TranslX (-100%); रूपांतर: TranslX (-100%);

कैप्शन व्यवहार 5: इसे घुमाएँ.

यह कैप्शन बाकियों से अलग है, क्योंकि यह दाएं या बाएं से नहीं चलेगा, बल्कि घूमेगा। जब बॉक्स होवर पर होता है, तो छवि और कैप्शन वाली div -180 प्रतिघंटे को घुमाएगी, जिससे छवि छिपी होगी और कैप्शन दिखाएगा.

 / ** रोटेट कैप्शन: हॉवर बिहेवियर ** / # मेनवॉपर .बॉक्स: हॉवर .वरोट करें बैकग्राउंड-कलर: आरजीबीए (0,0,0,1)! महत्वपूर्ण! -मोज़-ट्रांसफ़ॉर्म: रोटेट (-180deg); -ओ-परिवर्तन: घुमाव (-180deg); -webkit- परिवर्तन: घुमाएँ (-180deg); परिवर्तन: घुमाएँ (-180deg);

कैप्शन बिहेवियर 6: इसे स्केल करें.

यह कैप्शन कई परिवर्तन प्रभावों को मिलाएगा। जब बॉक्स होवर पर होगा तो छवि अपने प्रारंभिक आयाम से 140% (1.4) तक बढ़ जाएगी.

 #mainwrapper .box: होवर # छवि -6 -मोज़-ट्रांसफ़ॉर्म: स्केल (1.4); -ओ-परिवर्तन: स्केल (1.4); -वेबकैट-ट्रांसफॉर्म: स्केल (1.4); रूपांतर: स्केल (1.4);

और अगर आपने नीचे CSS को देखा है कैप्शन 6 शीर्षक, हमने पाठ को बाईं ओर 200px तक छिपाया है। नीचे यह CSS कोड पाठ को उनकी प्रारंभिक स्थिति में ले जाने के लिए कहता है। तो, पाठ बाईं ओर से दाईं ओर एक साथ स्लाइड होगा.

 #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box:: hover .scale-caption p -मोज़-ट्रांसफ़ॉर्म: ट्रांसलेशनएक्स (200px); -ओ-ट्रांसफॉर्म: ट्रांसलेक्स (200 पीएक्स); -webkit- परिवर्तन: TranslX (200px); रूपांतर: TranslX (200px);

डेमो
स्रोत डाउनलोड करें

सारांश

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

क्रेडिट

ट्यूटोरियल में छवि थंबनेल निम्न वेबसाइटों (स्क्रीनशॉट) से लिए गए हैं:

एक किताब के अलावा
Archiduchesse
Vlog
Hongkiat
ग्रीटिंग फार्म
मार्क एको