सीएसएस होवर प्रभाव - छवियों, बटनों के लिए, लिंक, ब्लॉक आदि पर होवर करते समय। CSS3 एनीमेशन के नौ सरल उदाहरण किसी ब्लॉक पर होवर करते समय सीएसएस प्रभाव

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

ये समूह बहुत मनमाने हैं, क्योंकि कई उदाहरण ओवरलैप होते हैं और सार्वभौमिक होते हैं, यानी, उन्हें विभिन्न वस्तुओं को डिजाइन करते समय पाया जा सकता है।

सीएसएस शैलियों में होवर प्रभाव को तत्व के दाईं ओर निम्नानुसार जोड़ा जाता है:

ए: होवर (रंग: लाल;)

ए: होवर (रंग: लाल;)

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

बटन: होवर (पृष्ठभूमि: आरजीबीए (0, 0, 0, 0); रंग: लाल; .मेरी तस्वीर: होवर (अपारदर्शिता: 0.5; फ़िल्टर: अल्फा (अपारदर्शिता = 50);)

बटन: होवर (पृष्ठभूमि: आरजीबीए(0,0,0,0); रंग: लाल; ) .माय-पिक्चर: होवर (अस्पष्टता: 0.5; फिल्टर: अल्फा(अस्पष्टता=50); )

आधुनिक ब्राउज़र होवर पर सीएसएस होवर प्रभाव को समान रूप से सही ढंग से समझते हैं, हालांकि IE 6 और उससे नीचे के पुराने संस्करणों में यह केवल लिंक के लिए काम करता है। साथ ही, कुछ सूत्रों ने कहा कि इसे कोड में निर्दिष्ट किया जाना चाहिए.

वैसे, लिंक शैलियों को सेट करते समय, चयनकर्ताओं का अतिरिक्त उपयोग भी किया जा सकता है: लिंक - उन पृष्ठों के लिए जो अभी तक नहीं देखे गए हैं, :visited - उन लोगों के लिए जहां आप पहले ही जा चुके हैं + :active वर्तमान में सक्रिय पता निर्धारित करता है। यदि वे मौजूद हैं तो :link और :visited के बाद होवर प्रभाव को CSS में रखना महत्वपूर्ण है।

आइए सिद्धांत से अभ्यास की ओर बढ़ें। नीचे उपयोगी सामग्रियों और स्निपेट्स की एक सूची है - स्रोतों को देखने के लिए लिंक का अनुसरण करें।

बटन और लिंक के लिए होवर प्रभाव

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

बटनों के लिए सरल उदाहरण

सुलिवान बटन

चाल यह है कि जब आप विभिन्न बटनों पर होवर करते हैं, तो पृष्ठभूमि का रंग बदलने के अलावा, आइकन (प्रत्येक अपने स्वयं के) के साथ एक छोटा एनीमेशन भी लॉन्च होता है।

होवर पर सीएसएस चिह्न

कार्य को लागू करने के लिए 5 सरल विकल्पों का चयन। सभी मामलों में, अतिरिक्त आइकन का उपयोग किया जाता है जो पाठ के दाईं/बाईं ओर दिखाई देते हैं या इसे प्रतिस्थापित करते हैं।

बटन होवर प्रभाव

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

नव होवर

कई विशेषताएं जो आपको मूल पाठ-सजावट संपत्ति की तुलना में कुछ अधिक असामान्य करने की अनुमति देती हैं। बटन पृष्ठभूमि अतिरिक्त रूप से विभिन्न दृश्य प्रभावों से भरी हुई है।

होवर पर जानकारी

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

मन बटन

ब्लॉकों में होवर प्रभाव के सबसे मूल प्रकारों में से एक - होवर करते समय, यह इसे तरल से भरने जैसा होता है। कार्यान्वयन सीएसएस, एचटीएमएल और एसवीजी का उपयोग करता है। कुछ वेबसाइट विषयों के लिए, यह स्निपेट निश्चित रूप से एक वरदान साबित होगा।

छवियों के लिए होवर प्रभाव

15 बुनियादी तकनीकें

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

सुंदर होवर प्रभाव छवियाँ

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

बार्बरपोल होवर एनिमेशन

एनीमेशन पहली नज़र में जटिल नहीं है, लेकिन अंत में यह बहुत अच्छा और असामान्य दिखता है।

दिशा का पता लगाने के साथ सीएसएस होवर प्रभाव

विषय पर स्निपेट और कोड का उत्कृष्ट चयन css-tricks.com के लेख में पाया जा सकता है। ये सभी उदाहरण इस तथ्य से एकजुट हैं कि ऑपरेशन के दौरान कर्सर की गति का स्थान और दिशा निर्धारित की जाती है। बदले में, यह आपको पृष्ठ तत्वों पर मँडराते समय काफी मौलिक प्रतिक्रियाएँ बनाने की अनुमति देता है:

कई जटिल समाधानों में, होवर प्रभावों के लिए जावास्क्रिप्ट और jQuery महत्वपूर्ण रूप से विविधता ला सकते हैं और परिणाम में सुधार कर सकते हैं।

दिशा जागरूक होवर अच्छाई

क्लिप-पाथ प्योर सीएसएस का उपयोग करते हुए डायरेक्शन अवेयर टाइल्स

बाकी तरकीबें मूल लेख में खोजें।

चेतनवाद

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

लिंक में 7 CSS3 होवर हेडर प्रभाव शामिल हैं - किसी छवि पर होवर करने पर, उपयोगकर्ता को शीर्षक, संक्षिप्त विवरण और नेविगेट करने के लिए एक लिंक के साथ एक सूचना ब्लॉक दिखाई देगा। इसका मतलब यह नहीं है कि उदाहरण बहुत मौलिक हैं, लेकिन वे निश्चित रूप से एक स्थिर सामग्री परियोजना में विविधता लाने में मदद करेंगे।

सीएसएस होवर लाइब्रेरीज़

होवर.सीएसएस

प्रोजेक्ट, जिसे केवल Hover.css नाम दिया गया है, में लिंक, बटन, ब्लॉक आदि के लिए CSS3 प्रभावों का एक संग्रह शामिल है। आप तैयार कोड का उपयोग कर सकते हैं और/या इसमें अपने स्वयं के संशोधन जोड़ सकते हैं। यहां बहुत सारी दिलचस्प चीजें हैं: 2डी/3डी रूपांतरण, पृष्ठभूमि और फ्रेम, छाया, आइकन के साथ काम करना। समाधान CSS, LESS और Sass प्रारूपों में उपलब्ध है।

Imagehover.css

एक अन्य लाइब्रेरी जो चित्रों के लिए होवर प्रभाव सेट करती है - मुफ़्त संस्करण में आपको 44 परिवर्तन विकल्प मिलेंगे (प्रीमियम सेट में 5 गुना अधिक है)। यहां LESS और SCSS भी समर्थित हैं, इस फ़ाइल का वजन केवल 19kb है। साइट पर सभी कामकाजी उदाहरणों को प्रदर्शित करने वाला एक पृष्ठ है। ऐसी कई अनूठी विशेषताएं हैं जिन्हें ऊपर नहीं देखा गया है।

इस परियोजना में गोल और चौकोर वस्तुओं के लिए 30 से अधिक विभिन्न तकनीकें शामिल हैं। वे सभी काफी मौलिक हैं; नियमित ज़ूम/फ़्लाई आउट के रूप में व्यावहारिक रूप से कोई सरल "एकल-तत्व" क्रियाएं नहीं हैं। कार्य को शुद्ध CSS3 + HTML (प्लस Scss फ़ाइलें शामिल) का उपयोग करके कार्यान्वित किया गया था। बूटस्ट्रैप 3 के साथ उत्कृष्ट अनुकूलता, दस्तावेज़ीकरण उपलब्ध।

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

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

• अनुवाद

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

कृपया ध्यान दें कि ये उदाहरण केवल उन आधुनिक ब्राउज़रों में सही ढंग से काम करेंगे जो CSS3 गुणों का समर्थन करते हैं।

HTML मार्कअप

मार्कअप संरचना बहुत सरल और सहज है। एक कंटेनर बनाएं जिसमें छवि और कोई अन्य जानकारी जैसे शीर्षक, विवरण आदि शामिल होंगे।

व्यू क्लास वाले ब्लॉक के अंदर हम मास्क क्लास के साथ एक तत्व डालेंगे, जो हमारे CSS3 प्रभावों के लिए जिम्मेदार होगा, इसके अंदर हम शीर्षक, विवरण और पूरी छवि का लिंक रखेंगे। (कुछ उदाहरणों के लिए, हमें मास्क को एक अलग तत्व के रूप में जोड़ना होगा और विवरण को सामग्री वर्ग के साथ div में लपेटना होगा।)

सीएसएस

मार्कअप बनाने के बाद, हम अपनी शैलियाँ बनाएंगे।

हम अपनी शैलियों के लिए सामान्य नियम निर्धारित करेंगे, और फिर हम अपने इच्छित प्रभावों के साथ विशेष कक्षाएं जोड़ेंगे। इस लेख में हम विभिन्न ब्राउज़रों के लिए सीएसएस उपसर्गों को छोड़ देंगे, लेकिन आप उन्हें स्रोत कोड में देख सकते हैं।
.देखें (चौड़ाई: 300px; ऊंचाई: 200px; मार्जिन: 10px; फ्लोट: बाएँ; सीमा: 10px ठोस #fff; अतिप्रवाह: छिपा हुआ; स्थिति: सापेक्ष; पाठ-संरेखण: केंद्र; बॉक्स-छाया: 1px 1px 2px #e6e6e6; कर्सर: डिफ़ॉल्ट; पृष्ठभूमि: #fff url(../images/bgimg.jpg) नो-रिपीट सेंटर सेंटर) .view .mask, .view .content (चौड़ाई: 300px; ऊंचाई: 200px; स्थिति: पूर्ण; अतिप्रवाह: छिपा हुआ ; शीर्ष: 0; बाएं: 0) .व्यू आईएमजी (डिस्प्ले: ब्लॉक; स्थिति: सापेक्ष) .व्यू एच2 (टेक्स्ट-ट्रांसफॉर्म: अपरकेस; रंग: #एफएफएफ; टेक्स्ट-एलाइन: सेंटर; स्थिति: सापेक्ष; फ़ॉन्ट-आकार: 17px; पैडिंग: 10px; पृष्ठभूमि: rgba(0, 0, 0, 0.8); मार्जिन: 20px 0 0 0 ) .view p (फ़ॉन्ट-फ़ैमिली: जॉर्जिया, सेरिफ़; फ़ॉन्ट-शैली: इटैलिक; फ़ॉन्ट-आकार: 12px; स्थिति: सापेक्ष; रंग: #fff; पैडिंग: 10px 20px 20px; पाठ-संरेखण: केंद्र) .a.info देखें (प्रदर्शन: इनलाइन-ब्लॉक; पाठ-सजावट: कोई नहीं; पैडिंग: 7px 14px; पृष्ठभूमि: #000; रंग) : #fff; टेक्स्ट-ट्रांसफ़ॉर्म: अपरकेस; बॉक्स-शैडो: 0 0 1px #000 ) .view a.info:hover ( बॉक्स-शैडो: 0 0 5px #000 )
अब हम दस प्रभावों पर नजर डालेंगे।

उदाहरण 1

आइए इस आशय के लिए दृश्य वर्ग के साथ तत्व में एक विशेष दृश्य-प्रथम वर्ग जोड़ें। हम दृश्य तत्व के प्रत्येक उदाहरण के लिए एक विशेष वर्ग जोड़ेंगे (दृश्य-प्रथम, दृश्य-दूसरा, दृश्य-तीसरा, आदि)।

पहले उदाहरण में, हम एक अच्छा होवर प्रभाव बनाने के लिए कुछ बुनियादी बदलावों का उपयोग करेंगे:
.व्यू-प्रथम आईएमजी (संक्रमण: सभी 0.2 एस रैखिक;) .व्यू-फर्स्ट एच2 ( ट्रांसफॉर्म: ट्रांसलेशनवाई(-100पीएक्स); अपारदर्शिता: 0; ट्रांजिशन: सभी 0.2एस आसानी से अंदर-बाहर; ) .व्यू-फर्स्ट पी ( ट्रांसफॉर्म: ट्रांसलेशनवाई(100पीएक्स); अपारदर्शिता: 0; ट्रांजिशन: सभी 0.2 एस रैखिक; ) .व्यू-फर्स्ट ए.इन्फो (अस्पष्टता: 0; संक्रमण: सभी 0.2 एस आसानी से अंदर-बाहर;)
और अब हमारे प्रभाव का सबसे दिलचस्प हिस्सा। जब हम किसी छवि पर कर्सर ले जाते हैं, तो हम एक साधारण एनीमेशन का अनुकरण करने के लिए विलंब गुण का उपयोग कर सकते हैं। होवर पर हम जिस संक्रमण-विलंब का उपयोग करते हैं उसे सामान्य वर्ग से भिन्न किया जा सकता है। इस उदाहरण में, हमने सामान्य वर्ग में किसी विलंब का उपयोग नहीं किया है, लेकिन हमने होवर में विलंब जोड़ा है जिससे संक्रमण प्रभाव में थोड़ी देरी होगी।
.व्यू-फर्स्ट: होवर आईएमजी ( ट्रांसफॉर्म: स्केल(1.1); ) .व्यू-फर्स्ट: होवर .मास्क ( अपारदर्शिता: 1; ) .व्यू-फर्स्ट: होवर एच2, .व्यू-फर्स्ट: होवर पी, .व्यू-फर्स्ट :hover a.info ( अस्पष्टता: 1; परिवर्तन: TranslateY(0px); ) .view-first:hover p (transition-delay: 0.1s; ) .view-first:hover a.info (transition-delay: 0.2s) ; )

उदाहरण 2

दूसरे उदाहरण में, हम एक विशेष दृश्य-द्वितीय वर्ग जोड़ेंगे, लेकिन हम मास्क वर्ग वाले तत्व को खाली छोड़ देंगे और विवरण को सामग्री वर्ग के साथ div में लपेट देंगे।

यहां मास्क क्लास में विभिन्न विशेषताएं होंगी, विशेष रूप से हम ट्रांसफॉर्म प्रॉपर्टी (अनुवाद और घुमाएँ) को लागू करने जा रहे हैं। विवरण तत्वों को स्थानांतरित किया जाएगा ताकि हम उन्हें होवर पर एक साथ ले जा सकें:
.व्यू-सेकेंड आईएमजी (संक्रमण: सभी 0.2एस आसानी से;) .व्यू-सेकंड .मास्क (पृष्ठभूमि-रंग: आरजीबीए(115,146,184, 0.7); चौड़ाई: 300पीएक्स; पैडिंग: 60पीएक्स; ऊंचाई: 300पीएक्स; अस्पष्टता: 0; परिवर्तन: अनुवाद (265px, 145px) घुमाएँ (45डिग्री); संक्रमण: सभी 0.2s आसानी से अंदर-बाहर; ) .व्यू-सेकंड h2 (बॉर्डर-बॉटम: 1px सॉलिड आरजीबीए(0, 0, 0, 0.3); पृष्ठभूमि: पारदर्शी; मार्जिन: 20px 40px 0px 40px; परिवर्तन: अनुवाद (200px, -200px); संक्रमण: सभी 0.2s आसानी से अंदर-बाहर; ) .व्यू-सेकंड पी (परिवर्तन: अनुवाद (-200px, 200px); संक्रमण: सभी 0.2s आसानी से अंदर-बाहर; ) .व्यू-सेकेंड a.info (परिवर्तन: अनुवाद (0px, 100px); संक्रमण: सभी 0.2s 0.1s आसानी से अंदर-बाहर;)
अपने होवर प्रभाव के लिए, हम अपने तत्वों को स्थान पर ले जाने के लिए अनुवाद परिवर्तन का उपयोग करते हैं। मास्क भी घूमेगा. विवरण तत्व थोड़े विलंब से आगे बढ़ेंगे:
.व्यू-सेकेंड: होवर .मास्क ( अपारदर्शिता:1; ट्रांसफॉर्म: ट्रांसलेशन(-80पीएक्स, -125पीएक्स) रोटेट(45डिग्री); ) .व्यू-सेकंड:होवर एच2 ( ट्रांसफॉर्म: ट्रांसलेशन(0पीएक्स,0पीएक्स); ट्रांजिशन-देरी: 0.3 सेकेंड; ) .व्यू-सेकेंड: होवर पी ( ट्रांसफॉर्म: ट्रांसलेशन(0पीएक्स,0पीएक्स); ट्रांजिशन-डिले: 0.4 सेकेंड; ) .व्यू-सेकंड: होवर ए.इंफो ( ट्रांसफॉर्म: ट्रांसलेशन(0पीएक्स,0पीएक्स); ट्रांजिशन- विलंब: 0.5 सेकेंड; )

उदाहरण 3

तीसरे उदाहरण में हम ट्रांसलेशन और रोटेट ट्रांसफॉर्मेशन का उपयोग करेंगे:
.व्यू-थर्ड आईएमजी (ट्रांज़िशन: सभी 0.2 एस आसानी से; ) .व्यू-थर्ड .मास्क (बैकग्राउंड-रंग: आरजीबीए(0,0,0,0.6); अपारदर्शिता: 0; ट्रांसफॉर्म: ट्रांसलेशन(460पीएक्स, -100पीएक्स) ) रोटेट (180डिग्री); ट्रांज़िशन: सभी 0.2s 0.4s आसानी से अंदर-बाहर; ) .व्यू-थर्ड h2( ट्रांसफ़ॉर्म: ट्रांसलेशनY(-100px); ट्रांज़िशन: सभी 0.2s इज़ी-इन-आउट; ) .व्यू-थर्ड पी (परिवर्तन: ट्रांसलेशनएक्स(300पीएक्स) रोटेट(90डिग्री); संक्रमण: सभी 0.2एस आसानी से अंदर-बाहर; ) .व्यू-थर्ड ए.जानकारी (परिवर्तन: अनुवादवाई(-200पीएक्स); संक्रमण: सभी 0.2एस आसानी से अंदर-बाहर- बाहर; )
ये सरल निर्देश हैं जिन्हें मँडराते समय लागू किया जाएगा। अब हम तदनुसार ट्रांज़िशन-विलंब सेट करके तत्व विवरण को फ़्लिप करेंगे:
.व्यू-थर्ड: होवर .मास्क (अस्पष्टता: 1; ट्रांज़िशन-देरी: 0एस; ट्रांसफॉर्म: ट्रांसलेशन(0पीएक्स, 0पीएक्स); ) .व्यू-थर्ड:होवर एच2 ( ट्रांसफॉर्म: ट्रांसलेशनवाई(0पीएक्स); ट्रांजिशन-डिले: 0.5एस ; ) .व्यू-थर्ड:होवर पी ( ट्रांसफॉर्म: ट्रांसलेशनएक्स(0पीएक्स) रोटेट(0डिग्री); ट्रांजिशन-डिले: 0.4एस; ) .व्यू-थर्ड:होवर ए.इन्फो ( ट्रांसफॉर्म: ट्रांसलेशनवाई(0पीएक्स); ट्रांजिशन-डिले: 0.3s; )

उदाहरण 4

चौथे उदाहरण में, हम अपनी सामग्री की एक सरल छवि कटौती और रोटेशन करेंगे, यह सब स्केल परिवर्तन के लिए धन्यवाद है। हम छवि शैलियों के लिए संक्रमण-विलंब को 0.2 पर सेट करेंगे, लेकिन होवर पर हम इसे 0s में बदल देंगे। यह माउस घुमाने पर तुरंत एनीमेशन शुरू कर देगा, लेकिन कर्सर दूर जाने पर इसमें देरी हो जाएगी।
.व्यू-चौथा आईएमजी (संक्रमण: सभी 0.4एस आसानी से अंदर-बाहर 0.2एस; अपारदर्शिता: 1; ) .व्यू-चौथा .मास्क (पृष्ठभूमि-रंग: आरजीबीए(0,0,0,0.8); अपारदर्शिता: 0; परिवर्तन: स्केल(0) रोटेट(-180डिग्री); संक्रमण: सभी 0.4एस आसानी से अंदर; सीमा-त्रिज्या: 0px; ) .दृश्य-चौथा h2( अस्पष्टता: 0; सीमा-तल: 1px ठोस आरजीबीए(0, 0, 0, 0.3); पृष्ठभूमि: पारदर्शी; मार्जिन: 20px 40px 0px 40px; संक्रमण: सभी 0.5s आसानी से अंदर-बाहर; ) .दृश्य-चौथा पी (अपारदर्शिता: 0; संक्रमण: सभी 0.5s आसानी से अंदर-बाहर;) .व्यू-चौथा ए.जानकारी (अपारदर्शिता: 0; संक्रमण: सभी 0.5 आसानी से अंदर-बाहर;)
इस प्रभाव को प्राप्त करने के लिए ये निर्देश हैं - आप CSS3 के साथ कुछ भी कर सकते हैं :)।
.व्यू-फोर्थ: होवर .मास्क ( अपारदर्शिता: 1; ट्रांसफॉर्म: स्केल (1) रोटेट (0डिग्री); ट्रांजिशन-विलंब: 0.2 सेकेंड; ) .व्यू-फोर्थ: होवर आईएमजी ( ट्रांसफॉर्म: स्केल (0); अपारदर्शिता: 0 ; संक्रमण-विलंब: 0s; ) .व्यू-चौथा: होवर h2, .व्यू-चौथा: होवर p, .व्यू-चौथा: होवर a.जानकारी (अस्पष्टता: 1; संक्रमण-विलंब: 0.5s; )

उदाहरण 5

इस पांचवें उदाहरण में, हम सामग्री को बाईं ओर ले जाने के लिए ट्रांज़िशन-टाइमिंग-फ़ंक्शन ईज़-इन-आउट के साथ ट्रांसलेशन प्रॉपर्टी का उपयोग करेंगे।
.व्यू-पांचवां आईएमजी (संक्रमण: सभी 0.3 एस आसानी से अंदर-बाहर;) .व्यू-पांचवां .मास्क (पृष्ठभूमि-रंग: आरजीबीए (146,96,91,0.3); ट्रांसफॉर्म: ट्रांसलेशनएक्स (-300पीएक्स); अस्पष्टता: 1; संक्रमण: सभी 0.4s आसानी से अंदर-बाहर; ) .व्यू-पांचवां h2 (पृष्ठभूमि: आरजीबीए (255, 255, 255, 0.5); रंग: #000; बॉक्स-छाया: 0px 1px 3px आरजीबीए (159, 141) , 140, 0.5); ) .व्यू-पांचवां पी (अस्पष्टता: 0; रंग: #333; संक्रमण: सभी 0.2 एस रैखिक;)
होवर प्रभाव छवि को दाईं ओर स्थानांतरित कर देगा और विवरण बाईं ओर दिखाई देगा, जैसे कि इसने छवि को स्थानांतरित कर दिया हो:
.व्यू-फिफ्थ: होवर .मास्क ( ट्रांसफॉर्म: ट्रांसलेशनएक्स(0पीएक्स); ) .व्यू-फिफ्थ: होवर आईएमजी ( ट्रांसफॉर्म: ट्रांसलेशनएक्स(300पीएक्स); ट्रांजिशन-डिले: 0.1एस; ) .व्यू-फिफ्थ: होवर पी( अपारदर्शिता: 1; संक्रमण-विलंब: 0.4 सेकंड; )

उदाहरण 6

इस उदाहरण में, हम विवरण को सामने लाएंगे, और छवि को उसके मूल आकार (स्केल 10 से 1) तक कम कर देंगे। नीचे एक "और पढ़ें" बटन दिखाई देगा (अनुवाद करें)।
.व्यू-छठा आईएमजी (संक्रमण: सभी 0.4 एस आसानी से अंदर-बाहर 0.5 एस;) .व्यू-छठा .मास्क (पृष्ठभूमि-रंग: आरजीबीए (146,96,91,0.5); अस्पष्टता: 0; संक्रमण: सभी 0.3 0.4s में आसानी; ) .व्यू-छठा h2 (अस्पष्टता: 0; सीमा-नीचे: 1px ठोस आरजीबीए (0, 0, 0, 0.3); पृष्ठभूमि: पारदर्शी; मार्जिन: 20px 40px 0px 40px; परिवर्तन: स्केल ( 10); ट्रांज़िशन: सभी 0.3 एस आसानी से अंदर-बाहर 0.1 एस; ) .व्यू-छठा पी (अस्पष्टता: 0; ट्रांसफॉर्म: स्केल (10); ट्रांज़िशन: सभी 0.3 एस ईज़ी-इन-आउट 0.2 एस; ) .व्यू -छठा a.जानकारी (अस्पष्टता:0; परिवर्तन: TranslateY(100px); संक्रमण: सभी 0.3s आसानी से अंदर-बाहर 0.1s;)
रिटर्न ट्रांज़िशन में देरी होगी ताकि यह सुचारू दिखे:
.व्यू-छठा: होवर .मास्क (अपारदर्शिता:1; ट्रांज़िशन-विलंब: 0एस; ) .व्यू-छठा:होवर आईएमजी (ट्रांज़िशन-विलंब: 0एस; ) .व्यू-छठा:होवर एच2 (अपारदर्शिता: 1; ट्रांसफॉर्म: स्केल (1); संक्रमण-विलंब: 0.1 सेकंड; ) .व्यू-छठा: होवर पी (अस्पष्टता: 1; परिवर्तन: स्केल (1); संक्रमण-विलंब: 0.2 सेकंड; ) .व्यू-छठा: होवर ए.जानकारी (अस्पष्टता: 1); :1; परिवर्तन: TranslateY(0px); संक्रमण-विलंब: 0.3s; )

उदाहरण 7

सातवें उदाहरण में, विचार छवि को केंद्र में घुमाने और दूरी में ले जाने का है। फिर विवरण दिखाई देगा, जिसके पीछे घूमती हुई छवि छुपी होगी।
.व्यू-सातवां आईएमजी (संक्रमण: सभी 0.5 आसानी से बाहर; अस्पष्टता: 1; ) .व्यू-सातवां .मास्क (पृष्ठभूमि-रंग: आरजीबीए(77,44,35,0.5); परिवर्तन: घुमाएँ(0डिग्री) स्केल( 1); अपारदर्शिता: 0; संक्रमण: सभी 0.3s आसानी से बाहर; परिवर्तन: TranslateY(-200px) रोटेट(180deg); ) .व्यू-सातवां h2( परिवर्तन: TranslateY(-200px); संक्रमण: सभी 0.2s आसानी से- इन-आउट; ) .व्यू-सातवां पी ( ट्रांसफॉर्म: ट्रांसलेशनवाई(-200पीएक्स); ट्रांजिशन: सभी 0.2एस आसानी से इन-आउट; ) .व्यू-सातवां ए.जानकारी ( ट्रांसफॉर्म: ट्रांसलेशनवाई(-200पीएक्स); ट्रांजिशन: सभी 0.2s आसानी से अंदर-बाहर; )
होवर पर हम विवरण तत्वों में विलंब जोड़ देंगे। यह हमें विवरण में छवि छिपाने से पहले घूमती हुई छवि देखने की अनुमति देगा। विपरीत संक्रमण में, सब कुछ तुरंत गायब हो जाएगा, और हम छवि को विपरीत दिशा में घूमते हुए देखेंगे:
.व्यू-सातवां: होवर आईएमजी (ट्रांसफॉर्म: रोटेट (720 डिग्री) स्केल (0); अपारदर्शिता: 0; ) .व्यू-सातवां: होवर .मास्क ( अपारदर्शिता: 1; ट्रांसफॉर्म: ट्रांसलेशन वाई (0 पीएक्स) रोटेट (0 डिग्री); ट्रांजिशन- विलंब: 0.4 सेकेंड; ) .व्यू-सातवां: होवर एच2 ( ट्रांसफॉर्म: ट्रांसलेशनवाई(0पीएक्स); ट्रांजिशन-डिले: 0.7 सेकेंड; ) .व्यू-सेवेंथ: होवर पी ( ट्रांसफॉर्म: ट्रांसलेशनवाई(0पीएक्स); ट्रांजिशन-डिले: 0.6 सेकेंड ; ) .व्यू-सातवां: होवर ए.इन्फो (परिवर्तन: TranslateY(0px); संक्रमण-विलंब: 0.5s; )

उदाहरण 8

आठवें उदाहरण में हम एनीमेशन का उपयोग करेंगे और बाउंस प्रभाव को फिर से बनाएंगे। विवरण नीचे से उतरेगा और नीचे की सीमा से उछलेगा।
.दृश्य-आठवां .मास्क (पृष्ठभूमि-रंग: आरजीबीए(255, 255, 255, 0.7); शीर्ष: -200पीएक्स; अस्पष्टता: 0; संक्रमण: सभी 0.3एस आसानी से बाहर 0.5एस; ) .दृश्य-आठवां एच2( परिवर्तन : TranslateY(-200px); संक्रमण: सभी 0.2s आसानी से अंदर-बाहर 0.1s; ) .व्यू-आठवां पी (रंग: #333; परिवर्तन: TranslateY(-200px); संक्रमण: सभी 0.2s आसानी से अंदर-बाहर 0.2s; ) .व्यू-आठवां a.info (परिवर्तन: TranslateY(-200px); संक्रमण: सभी 0.2s आसानी से अंदर-बाहर 0.3s;)
हम मास्क तत्व में एक एनीमेशन जोड़ेंगे और विवरण तत्वों के लिए कुछ विलंब सेटिंग्स परिभाषित करेंगे:
.व्यू-आठवां: होवर .मास्क (अस्पष्टता: 1; शीर्ष: 0px; ट्रांज़िशन-विलंब: 0s; एनीमेशन: बाउंसY 0.9s रैखिक; ) .व्यू-आठवां: होवर h2 ( ट्रांसफ़ॉर्म: ट्रांसलेशनY(0px); ट्रांज़िशन-विलंब: 0.4 सेकंड; ) .व्यू-आठवां: होवर पी ( ट्रांसफॉर्म: ट्रांसलेशनवाई(0पीएक्स); ट्रांजिशन-डिले: 0.2एस; ) .व्यू-आठवां: होवर ए.इन्फो ( ट्रांसफॉर्म: ट्रांसलेशनवाई(0पीएक्स); ट्रांजिशन-डिले: 0एस; )
वास्तविक बाउंस प्रभाव को फिर से बनाने के लिए हम TranslateY का उपयोग करेंगे, जैसा कि आप देख सकते हैं कि कई फ़्रेम हैं जो इस प्रभाव को बनाते हैं:
@कीफ्रेम बाउंसवाई ( 0% ( ट्रांसफॉर्म: ट्रांसलेशनवाई(-205पीएक्स);) 40% ( ट्रांसफॉर्म: ट्रांसलेशनवाई(-100पीएक्स);) 65% ( ट्रांसफॉर्म: ट्रांसलेशनवाई(-52पीएक्स);) 82% ( ट्रांसफॉर्म: ट्रांसलेशनवाई(-25पीएक्स) ;) 92% (परिवर्तन: TranslateY(-12px);) 55%, 75%, 87%, 97%, 100% (परिवर्तन: TranslateY(0px);))

उदाहरण 9

इस उदाहरण में, हम नीचे दाएं और ऊपरी बाएं कोने से स्थानांतरित करने के लिए दो मास्क तत्वों का उपयोग करेंगे:

मास्क तत्वों में अलग-अलग अनुवाद और ट्रांसफ्रॉम-ओरिजिन मान होंगे। हम यह भी इंगित करेंगे कि एक शीर्ष सीमा से संरेखित है, और दूसरा नीचे से:
.दृश्य-नौवां .मास्क-1,.दृश्य-नौवां .मास्क-2( पृष्ठभूमि-रंग: आरजीबीए(0,0,0,0.5); ऊंचाई: 361पीएक्स; चौड़ाई: 361पीएक्स; पृष्ठभूमि: आरजीबीए(119,0,36) ,0.5); अपारदर्शिता: 1; संक्रमण: सभी 0.3s आसानी से अंदर-बाहर 0.6s; ) .व्यू-नौवां .मास्क-1 (बाएं: ऑटो; दाएं: 0px; ट्रांसफॉर्म: रोटेट (56.5 डिग्री) ट्रांसलेशनX(-180px) ); ट्रांसफॉर्म-ओरिजिन: 100% 0%; ) .व्यू-नौवां .मास्क-2 (टॉप: ऑटो; बॉटम: 0पीएक्स; ट्रांसफॉर्म: रोटेट(56.5डिग्री) ट्रांसलेशनएक्स(180पीएक्स); ट्रांसफॉर्म-ओरिजिन: 0% 100%; ) .व्यू-नौवां .सामग्री (पृष्ठभूमि: आरजीबीए (0,0,0,0.9); ऊंचाई: 0px; अस्पष्टता: 0.5; चौड़ाई: 361px; अतिप्रवाह: छिपा हुआ; परिवर्तन: घुमाएँ (-33.5 डिग्री) अनुवाद (-112px, 166px); ट्रांसफॉर्म-ओरिजिन: 0% 100%; ट्रांज़िशन: सभी 0.4s आसानी से अंदर-बाहर 0.3s; ) .व्यू-नौवां h2( बैकग्राउंड: पारदर्शी; मार्जिन-टॉप: 5px; बॉर्डर-बॉटम: 1px सॉलिड आरजीबीए( 255,255,255,0.2); .व्यू-नौवाँ ए.जानकारी (प्रदर्शन: कोई नहीं;)
मँडराते समय, हम सामग्री को ऐसे प्रदर्शित करेंगे मानो दो मुखौटा तत्वों के नीचे से केंद्र की ओर बढ़ रहे हों:
.व्यू-नौवां: होवर .कंटेंट (ऊंचाई: 120px; चौड़ाई: 300px; अपारदर्शिता: 0.9; शीर्ष: 40px; ट्रांसफॉर्म: रोटेट (0deg) ट्रांसलेट (0px,0px); ) .व्यू-नौवां: होवर .मास्क -1, .व्यू-नौवां: होवर .मास्क -2 (संक्रमण-विलंब: 0s; ) .व्यू-नौवां: होवर .मास्क -1 (ट्रांसफॉर्म: रोटेट (56.5 डिग्री) ट्रांसलेशनएक्स (1 पीएक्स); ) .व्यू-नौवां: होवर .मास्क -2 (रूपांतरण: घुमाएँ(56.5डिग्री) ट्रांसलेशनएक्स(-1पीएक्स); )
हमने मास्क तत्वों के लिए ट्रांज़िशन-विलंब को कॉन्फ़िगर किया है ताकि जब हम होवर करें, तो ट्रांज़िशन तुरंत हो जाए, लेकिन जब माउस दूर चला जाए, तो अधिक विलंब होगा।

उदाहरण 10

अंतिम उदाहरण में, हम छवि को बड़ा करेंगे और फिर उसे छिपा देंगे, विवरण को सामने लाएंगे। हम स्केल ट्रांसफॉर्म का उपयोग करके और पारदर्शिता स्तर को समायोजित करके ऐसा कर सकते हैं:
.व्यू-दसवां आईएमजी (परिवर्तन: स्केलवाई(1); संक्रमण: सभी 0.7 आसानी से अंदर-बाहर; ) .दृश्य-दसवां .मास्क (पृष्ठभूमि-रंग: आरजीबीए(255, 231, 179, 0.3); संक्रमण: सभी 0.5s रैखिक; अपारदर्शिता: 0; ) .दृश्य-दसवां h2( सीमा-तल: 1px ठोस आरजीबीए(0, 0, 0, 0.3); पृष्ठभूमि: पारदर्शी; मार्जिन: 20px 40px 0px 40px; परिवर्तन: स्केल(0); रंग: #333; संक्रमण: सभी 0.5 एस रैखिक; अपारदर्शिता: 0; ) .व्यू-दसवां पी (रंग: #333; अपारदर्शिता: 0; परिवर्तन: स्केल (0); संक्रमण: सभी 0.5 एस रैखिक; ) .व्यू- दसवां ए.जानकारी (अस्पष्टता: 0; परिवर्तन: स्केल(0); संक्रमण: सभी 0.5 एस रैखिक;)
होवर करते समय, हम बस छवि को स्केल करते हैं, लेकिन इसकी पारदर्शिता को 0 तक कम करके इसे क्यों छिपाएं:
.व्यू-दसवां: होवर आईएमजी ( ट्रांसफॉर्म: स्केल(10); अपारदर्शिता: 0; ) .व्यू-दसवां: होवर .मास्क ( अपारदर्शिता: 1; ) .व्यू-दसवां: होवर एच2, .व्यू-दसवां: होवर पी, .व्यू-दसवां: होवर ए.इन्फो (परिवर्तन: स्केल (1); अस्पष्टता: 1;)

निष्कर्ष

CSS3 में सुंदर प्रभाव पैदा करने की वास्तव में काफी संभावनाएं हैं। जल्द ही, उम्मीद है, हम सरल प्रभाव बनाने के लिए जावास्क्रिप्ट का उपयोग करने से बच सकेंगे और सभी ब्राउज़रों में सीएसएस पर 100% भरोसा कर सकेंगे।

मुझे आशा है कि आपने इन प्रयोगों का आनंद लिया है, लेकिन सबसे अधिक मुझे आशा है कि वे आपको अपना प्रभाव बनाने के लिए प्रेरित कर सकते हैं।

पी.एस. यह लेख मैरी लू के लेख की तार्किक निरंतरता है

टैग: टैग जोड़ें

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

मैं तुरंत आपका ध्यान इस तथ्य की ओर आकर्षित करना चाहूंगा कि ये सभी उदाहरण केवल CSS3 गुणों का समर्थन करने वाले आधुनिक ब्राउज़रों में ही सही ढंग से काम करेंगे।

समग्र तस्वीर को बर्बाद न करने के लिए, मैंने मशीनी अनुवाद के साथ प्रभावों के नामों को विकृत नहीं किया (कुछ के अपवाद के साथ), मैंने मूल शीर्षकों को वैसे ही छोड़ दिया जैसा डेवलपर ने उन्हें बुलाया था।

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

iHover बूटस्ट्रैप 3 समर्थन के साथ शुद्ध CSS3 होवर प्रभावों का एक प्रभावशाली संग्रह है। Scss CSS (फ़ाइल) पर निर्मित, चर के साथ आसानी से संशोधित। कोड मॉड्यूलर है, संपूर्ण फ़ाइल को शामिल करने की कोई आवश्यकता नहीं है। एक पैकेज में 30+ विभिन्न प्रभाव। सब कुछ बहुत अच्छी तरह से प्रलेखित है और प्रभावों का उपयोग करना बहुत आसान है। आपको बस HTML मार्कअप सही ढंग से बनाना है और CSS फ़ाइल को अपने काम में शामिल करना है।

छवि कैप्शन के लिए कुछ सरल लेकिन स्टाइलिश होवर प्रभाव बनाता है। शीर्षक, लेखक का नाम और संपर्क बटन पॉप अप करने के लिए थंबनेल पर होवर करने का विचार है। कुछ प्रभावों के लिए, 3डी दृश्य परिवर्तनों का उपयोग किया जाता है।

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

CSS3 थंबनेल के लिए

जब थंबनेल पर एनोटेशन (कैप्शन) दिखाई देते हैं, तो डेवलपर अपने काम को संक्रमण प्रभावों के साथ एक छवि गैलरी के उदाहरण के रूप में रखता है। IE 9+ सहित आधुनिक ब्राउज़रों द्वारा विश्वसनीय समर्थन की घोषणा की गई है। बेशक, इसे पूर्ण गैलरी कहना मुश्किल है, लेकिन हस्ताक्षरों की उपस्थिति का प्रभाव काफी दिलचस्प है।

बिल्कुल गोल थंबनेल पर होवर करते समय प्रभावशाली परिवर्तन प्रभाव बनाने के लिए सीएसएस नियमों का एक और सेट। पैकेज में 7 प्रकार के CSS3 ट्रांज़िशन, कॉन्फ़िगरेशन और उपयोग पर बहुत विस्तृत दस्तावेज़ शामिल हैं। प्रभाव सभी आधुनिक ब्राउज़रों द्वारा समर्थित हैं।

होवर पर थंबनेल घुमाएँ

जब आप माउस कर्सर को उन पर घुमाते हैं तो गोल थंबनेल को घुमाने का एक सरल प्रभाव, उसी के बारे में आप मेरे ब्लॉग पर, मुख्य पृष्ठ पर पोस्ट की घोषणाओं में देख सकते हैं। सीएसएस कोड की कुछ पंक्तियों के साथ कार्यान्वित किया गया।

शाब्दिक रूप से अनुवादित: "ऊपर मँडराते समय यौन प्रभाव"। निःसंदेह, जब तक आपके पास जंगली कल्पना न हो, आपको इस प्रभाव में कुछ भी इतना सेक्सी नज़र आने की संभावना नहीं है, लेकिन प्रभाव अपने तरीके से दिलचस्प है और ध्यान देने योग्य है।

जब आप छवियों पर होवर करते हैं तो उनके लिए पांच अलग-अलग प्रभाव होते हैं। तीन भिन्नताओं में पॉप-अप हस्ताक्षर, पारदर्शिता की डिग्री बदलने और क्षैतिज गति के साथ घूमने के रूप में पर्दे।

छवि कैप्शन के लिए 4 प्रकार के एनीमेशन प्रभाव, विशेष रूप से CSS3 का उपयोग करके कार्यान्वित। प्रदर्शित होने और संक्रमण प्रभाव होने पर विभिन्न स्थितियाँ, काफी मानक डिज़ाइन। यह समझने के लिए कि एनीमेशन कैसे काम करता है, डेमो पेज के स्रोत कोड पर एक नज़र डालें; मुझे कोई अलग दस्तावेज़ नहीं मिला।

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

यह प्रभाव कुछ खास नहीं है, मँडराते समय छवियों की चमक में एक सामान्य परिवर्तन, सिवाय इसके कि एनीमेशन तत्व जोड़े गए हैं। आपको डेमो का स्रोत कोड तैयार करके कार्यान्वयन के विवरण का स्वयं पता लगाना होगा।

छवियों के लिए 10 होवर प्रभावों का एक और सेट, होवर करते समय थंबनेल के विभिन्न संशोधन, इज़ाफ़ा, रोटेशन, घुमाव, अंधेरा करना, आदि।

छवियों के चारों ओर विभिन्न फ्रेम एनीमेशन प्रभाव काफी आकर्षक लगते हैं, इसे स्थापित करने और उपयोग करने के लिए एक विस्तृत मैनुअल है।

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

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

स्लाइडिंग छवियाँ

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

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

एक दिलचस्प समाधान: थंबनेल गहरे रंग में प्रस्तुत किए जाते हैं; जब आप उन पर होवर करते हैं, तो छवियां दिखाई देती हैं और हल्के पृष्ठभूमि पर हस्ताक्षर दिखाई देते हैं।

छवि का कैप्शन कोने से प्रकट होता है और छवि के पूरे क्षेत्र में विकर्ण रूप से विस्तारित होता है।

छवि थंबनेल के लिए पॉप-अप कैप्शन लागू करने के लिए कुछ और दिलचस्प समाधान। ऑनलाइन संपादक में, आप मापदंडों के साथ प्रयोग कर सकते हैं और अधिक प्रभावशाली परिणाम प्राप्त कर सकते हैं।

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

छवि थंबनेल के लिए कैप्शन की उपस्थिति के एनिमेटेड प्रभाव के साथ विचित्र आकार और एक आवर्धन प्रभाव संयुक्त है।

केवल CSS3 और HTML5 का उपयोग करके छवियों के लिए 3D कैप्शन प्रदर्शित करने के लिए विज़ुअल स्लाइड प्रभाव बनाने का एक उदाहरण।

चित्रों के लिए 6 कैप्शन

CSS3 का उपयोग करके होवर पर पॉप-अप छवि कैप्शन की उपस्थिति के लिए 6 विकल्प। कार्यान्वयन और कॉन्फ़िगरेशन पर एक विस्तृत पाठ, डाउनलोड के लिए उपलब्ध स्रोत।

और अंत में, अंत में, मैं CSS3 का उपयोग करके थंबनेल के लिए पॉप-अप कैप्शन बनाने का सबसे सरल तरीका बताने से खुद को नहीं रोक सकता।

मैंने अपने पिछले पाठों में से एक में इस पद्धति के बारे में बात की थी:।

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

पूरे सम्मान के साथ, एंड्रयू

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

ईमेल समाचारपत्रिकाएँ

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

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

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

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

पुश सूचनाएँ भेजना

पुश मेलिंग ब्राउज़र विंडो में एक सदस्यता है, यह RSS सदस्यता के लिए एक प्रकार का प्रतिस्थापन है। वेब-पुश प्रौद्योगिकियां तेजी से हमारे जीवन में प्रवेश कर रही हैं, और ऐसी वेबसाइट ढूंढना पहले से ही मुश्किल है जो ग्राहकों को आकर्षित करने और बनाए रखने के लिए पुश मेलिंग का उपयोग नहीं करती है। के लिए स्क्रिप्ट का अनुरोध करें, आप या तो मैन्युअल रूप से पत्र भेज सकते हैं या पत्रों की एक श्रृंखला बनाकर या आरएसएस से डेटा एकत्र करके ऑटो-मेलिंग बना सकते हैं। दूसरे विकल्प का तात्पर्य यह है कि आपकी वेबसाइट पर एक नया लेख आने के बाद, एक संक्षिप्त घोषणा के साथ इसके बारे में एक अधिसूचना स्वचालित रूप से आपके ग्राहकों को भेज दी जाएगी।

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

एसएमटीपी

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

फेसबुक मैसेंजर बॉट्स

फेसबुक चैटबॉट बीटा परीक्षण में है। आप इसे अपने पेज से कनेक्ट कर सकते हैं और सब्सक्राइबर्स को संदेश भेज सकते हैं।

एसएमएस भेजा जा रहा है

सेंडपल्स सेवा के माध्यम से फ़ोन नंबरों के डेटाबेस का उपयोग करके मेल भेजना आसान है। सबसे पहले, आपको फ़ोन नंबरों की सूची के साथ एक पता पुस्तिका बनानी होगी। ऐसा करने के लिए, "पता पुस्तिका" अनुभाग चुनें, एक नई पता पुस्तिका बनाएं और फ़ोन नंबर अपलोड करें। अब आप इस डेटाबेस का उपयोग करके एक एसएमएस न्यूज़लेटर बना सकते हैं। एसएमएस संदेश की कीमत प्राप्तकर्ता के दूरसंचार ऑपरेटरों के आधार पर भिन्न होती है और औसतन 1.26 रूबल से 2.55 रूबल प्रति 1 एसएमएस भेजा जाता है।

संबद्ध कार्यक्रम

सेंडपल्स एक संबद्ध कार्यक्रम लागू करता है, जिसके अंतर्गत आपके लिंक का उपयोग करने वाला एक पंजीकृत उपयोगकर्ता, जिसने टैरिफ के लिए भुगतान किया है, आपको 4,000 रूबल लाएगा। आमंत्रित उपयोगकर्ता को सेवा का उपयोग करने के पहले 5 महीनों के लिए 4,000 रूबल की छूट मिलती है।

पोस्ट में विभिन्न सीएसएस प्रभावों और एनिमेशन का चयन शामिल है जो आपके काम में उपयोगी हो सकते हैं, और लगातार जावास्क्रिप्ट का सहारा लेने की आवश्यकता को भी समाप्त कर देंगे। उदाहरण नवीनतम या सबसे असामान्य नहीं हो सकते हैं, लेकिन मेरी राय में, वे उपयोगी हैं।

1. jQuery के साथ CSS3 घड़ी

यह घड़ी मुख्य CSS3 टूल में से एक का उपयोग करके बनाई गई है - JQuery लाइब्रेरी को घुमाना और कनेक्ट करना।

2. सीएसएस एनालॉग घड़ी

अधिक क्लासिक, एनालॉग घड़ियाँ। वे वेबकिट ट्रांज़िशन और ट्रांसफॉर्म सीएसएस प्रॉपर्टी का उपयोग करके बनाए गए हैं। लेकिन समय को वर्तमान के अनुरूप बनाने के लिए, आपको जावास्क्रिप्ट की आवश्यकता है।

3. घूमने वाला 3डी क्यूब

क्यूब के किनारों पर घूर्णन और गति मानक "ऊपर", "नीचे", "बाएँ" और "दाएँ" कुंजियों का उपयोग करके की जाएगी। 3डी आकृति स्वयं वेबकिट-परिप्रेक्ष्य, -वेबकिट-ट्रांसफॉर्म और -वेबकिट-ट्रांज़िशन का उपयोग करके बनाई गई है।

4. कई वापस लेने योग्य 3डी क्यूब्स

यहां पहले से ही कई 3D क्यूब्स प्रस्तुत किए गए हैं जो सीधे CSS3 और ट्रांसफ़ॉर्म और ट्रांज़िशन गुणों का उपयोग करते हैं। क्यूब पर कर्सर घुमाने से यह एक तरफ चला जाता है, जिससे आकृति के दूसरी तरफ मौजूद टेक्स्ट सामने आ जाता है।

5. अकॉर्डियन मेनू

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

6. सीएसएस के साथ लंबन स्क्रॉलिंग

यह WebKit पर आधारित CSS ट्रांज़िशन का उपयोग करके एक एनिमेटेड लंबन स्क्रॉलिंग एनीमेशन है। जब आप टेक्स्ट विंडो पर होवर करते हैं, तो पृष्ठभूमि में तारे आसानी से किनारे की ओर जाने लगते हैं। उड़ान का प्रभाव पैदा होता है.

7. मैट्रिक्स

कल्ट फिल्म "द मैट्रिक्स" सर्वश्रेष्ठ साइंस फिक्शन फिल्मों में से एक है। उदाहरण दिखाता है कि CSS3 में लगभग उसी अद्भुत एनीमेशन (चलते नंबरों के साथ काली स्क्रीन) को कैसे दोबारा बनाया जाए।

8. डायनामिक पलेरॉइड्स

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

9. छवि स्केलिंग

इस उदाहरण में, छवियाँ केवल होवर पर बड़ी हो जाती हैं। एक सरल, लेकिन कभी-कभी बहुत उपयोगी प्रभाव।

10. CSS3 पर जावास्क्रिप्ट प्रभाव

जावास्क्रिप्ट के विकल्प के रूप में, पोस्ट सात CSS3 प्रभावों का सुझाव देती है: विभिन्न ब्लॉक जो घूमते हैं, गायब होते हैं, बाहर निकलते हैं, बढ़ते हैं, आदि।

11. डीजे हीरो वर्चुअल रिकॉर्ड

यह पोस्ट बताती है कि कताई रिकॉर्ड कैसे बनाएं। रोटेशन की गति को सीधे स्क्रीन पर समायोजित किया जा सकता है।

12. स्लाइडिंग विनाइल

विनाइल रिकॉर्ड स्लाइडिंग प्रभाव CSS3 और HTML ट्रांज़िशन का उपयोग करके बनाया गया है। इस तरह का एनीमेशन एक वेब पेज को जीवंत बनाता है, एक मानक एल्बम कवर में मौलिकता जोड़ता है, आदि।

13. किसी चित्र पर मँडराते समय प्रभाव

जब आप किसी छवि पर कर्सर घुमाते हैं, तो वह किनारे की ओर जा सकती है, घूम सकती है, सिकुड़ सकती है, चौकोर से गोल में बदल सकती है, धुंधली हो सकती है... एक शब्द में, चित्र हर संभव तरीके से अपने गुणों को बदल देंगे।

14. घूमता हुआ त्रिकोण

जब आप त्रिभुज पर क्लिक करते हैं तो वह घूमने लगता है।

15. अंतरिक्ष

एक संपूर्ण ब्रह्मांडीय स्थान, सीएसएस में पैक किया गया। यह घूमने वाली परतों का एक उदाहरण है (जब आप ब्राउज़र में ज़ूम आउट करते हैं तो यह अधिक ध्यान देने योग्य होता है)।

16. 3डी में "लास मेनिनास"।

एक दिलचस्प सीएसएस प्रभाव जो डिएगो वेलाज़क्वेज़ की प्रसिद्ध पेंटिंग "लास मेनिनास" को त्रि-आयामी बनाता है।

17. मैक ओएस एक्स के लिए सीएसएस

स्क्रीन के नीचे मुख्य मैक ओएस एक्स आइकन का एक सेट है, जो ऊपर ले जाने पर बड़ा हो जाता है। प्रभाव साइट में गतिशीलता जोड़ता है।

18. ड्रॉप-इन मॉडल्स

CSS3 प्रभाव और ड्रॉप-इन मॉडल गुण आपको तेज़, एनिमेटेड और आसान मोडल परिवर्तन बनाने में मदद करेंगे।

19. वस्तुओं को सजीव करना

एक परिवर्तन ब्राउज़र में एक तत्व की उपस्थिति को बदल देता है। एक रॉकेट के उदाहरण का उपयोग करके दिखाया गया है जो स्क्रीन के एक छोर से दूसरे छोर तक "उड़ता" है। हिलाना, घुमाना आदि उपकरणों का उपयोग किया जा सकता है।

20. रंगीन घड़ी

कलर क्लॉक jQuery और CSS3 पर आधारित है। इसी तरह का प्रभाव किसी प्रतियोगिता, मतदान आदि के पूरा होने की प्रतीक्षा के संदर्भ में काम आएगा।

21. jQuery और CSS3 के साथ लाइटबॉक्स गैलरी

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

22. "लोचदार" पूर्वावलोकन

होवर पर छवि पूर्वावलोकन बड़ा करें। इस प्रकार, जब आप क्लिक करते हैं, तो मेनू आनुपातिक रूप से बढ़ जाता है।

23. गतिशील कार्ड

यह उदाहरण HTML और CSS3 सुविधाओं का उपयोग करने वाले कार्डों का एक गतिशील सेट है।

24. JQuery स्लाइडिंग मेनू

उदाहरण स्लाइडआउट मेनू CSS3 और JQuery के संयोजन का उपयोग करके बनाया गया है। जब आप छवि पर होवर करते हैं, तो टेक्स्ट वाली एक पॉप-अप विंडो दिखाई देती है।

25. सीएसएस टैब्स

उदाहरण में, टैब हेडर पर माउस घुमाने से नीचे दी गई सूची बदल जाती है।

26. फिशआई मेनू

उदाहरण दर्शाता है कि सीएसएस और एसवीजी एनीमेशन का उपयोग करके फिशआई मेनू कैसे बनाया जाए। अतिरिक्त बोनस के रूप में, IMG टैग में एक डेमो SVG का उपयोग किया जाता है।

27. ड्रॉपडाउन मेनू

CSS3 ट्रांज़िशन के उपयोग के कारण, यह प्रकार मुख्य मेनू के माध्यम से बहुत सुविधाजनक नेविगेशन प्रदान करता है।

28. स्टार वार्स क्रेडिट

स्टार वार्स के प्रसिद्ध क्रेडिट। इन्हें चलाने के लिए HTML और CSS पर्याप्त होंगे.

29. सीएसएस पर अधिक फिशआई प्रभाव

फिर से, आइकन जो ऊपर होवर करने पर बढ़ जाते हैं।

30. फ़्रेम-दर-फ़्रेम एनीमेशन

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

31. इंपीरियल एटी-एटी वॉकर

एक बार फिर स्टार वार्स - यह गतिशील एटी-एटी वॉकर CSS3 का उपयोग करके बनाया गया है।

32. एक और सीएसएस अकॉर्डियन

जब आप किसी पंक्ति पर क्लिक करते हैं, तो तालिका विस्तृत हो जाती है।

33. सरल स्लाइड-आउट मेनू

40. ड्रॉपडाउन मेनू
सीएसएस का उपयोग करके सरल और अच्छे ड्रॉप-डाउन मेनू का एक अन्य विकल्प।