कूल सीएसएस होवर इफेक्ट्स जो बैकग्राउंड क्लिपिंग, मास्क और 3D का उपयोग करते हैं

हमने सीएसएस होवर प्रभावों के दिलचस्प तरीकों के बारे में पोस्टों की एक श्रृंखला देखी है। हमने एक से शुरुआत की उदाहरणों का समूह जो सीएसएस का उपयोग करते हैं background गुण, फिर आगे बढ़े text-shadow संपत्ति कहां हमने तकनीकी रूप से किसी छाया का उपयोग नहीं किया. हमने उन्हें सीएसएस वेरिएबल्स के साथ भी जोड़ा है calc() कोड को अनुकूलित करने और इसे प्रबंधित करना आसान बनाने के लिए।

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

---

हम जो बना रहे हैं उसका एक स्वाद यहां दिया गया है:

होवर प्रभाव का उपयोग कर background-clip

के बारे में बात करते हैं background-clip. यह सीएसएस संपत्ति स्वीकार करती है text कीवर्ड मान जो हमें ग्रेडियेंट लागू करने की अनुमति देता है टेक्स्ट वास्तविक के बजाय किसी तत्व का पृष्ठभूमि.

इसलिए, उदाहरण के लिए, हम होवर पर टेक्स्ट का रंग बदल सकते हैं जैसा कि हम इसका उपयोग करते हैं color संपत्ति, लेकिन इस तरह हम रंग परिवर्तन को एनिमेट करते हैं:

मैंने जो कुछ किया वह सब जोड़ना था background-clip: text तत्व के लिए और transition la background-position. इससे अधिक जटिल होने की आवश्यकता नहीं है!

लेकिन अगर हम विभिन्न पृष्ठभूमि क्लिपिंग मानों के साथ कई ग्रेडिएंट्स को जोड़ते हैं तो हम बेहतर कर सकते हैं।

उस उदाहरण में, मैं दो अलग-अलग ग्रेडिएंट्स और दो मानों का उपयोग करता हूं background-clip. पहला बैकग्राउंड ग्रेडिएंट टेक्स्ट से क्लिप किया गया है (धन्यवाद)। text वैल्यू) होवर पर रंग सेट करने के लिए, जबकि दूसरा बैकग्राउंड ग्रेडिएंट नीचे की अंडरलाइन बनाता है (धन्यवाद)। padding-box कीमत)। बाकी सब कुछ सीधे तौर पर कॉपी किया गया है हमने पहले लेख में जो काम किया था इस श्रृंखला के।

होवर इफ़ेक्ट के बारे में क्या ख्याल है जहां बार ऊपर से नीचे की ओर इस तरह से स्लाइड करता है कि ऐसा लगता है कि टेक्स्ट को स्कैन किया गया है, फिर उसमें रंग दिया गया है:

इस बार मैंने लाइन बनाने के लिए पहले ग्रेडिएंट का आकार बदल दिया। फिर मैं इसे दूसरे ग्रेडिएंट के साथ स्लाइड करता हूं जो भ्रम पैदा करने के लिए टेक्स्ट का रंग अपडेट करता है! आप कल्पना कर सकते हैं कि इस पेन में क्या हो रहा है:

हमने केवल इसकी सतह को खंगाला है कि हम अपने साथ क्या कर सकते हैं background-clipपिंग शक्तियां! हालाँकि, यह तकनीक संभवतः कुछ ऐसी है जिसे आप उत्पादन में उपयोग करने से बचना चाहेंगे, क्योंकि फ़ायरफ़ॉक्स के लिए जाना जाता है बहुत सारी बग रिपोर्ट की गईं से संबंधित background-clip. सफ़ारी में समर्थन संबंधी समस्याएं भी हैं। इससे इस सामग्री के लिए केवल क्रोम को ही ठोस समर्थन मिलता है, इसलिए जब हम आगे बढ़ेंगे तो हो सकता है कि यह खुला रहे।

चलिए दूसरे होवर प्रभाव का उपयोग करते हुए आगे बढ़ते हैं background-clip:

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

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

बिल्कुल सटीक? आइए कोड का विश्लेषण करें:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

हमारे पास तीन पृष्ठभूमि परतें हैं - दो ग्रेडिएंट और background-color परिभाषित का उपयोग कर --_c वेरिएबल जो प्रारंभ में पारदर्शी पर सेट है (#0000). होवर पर, हम रंग को सफेद में बदलते हैं और --_c मुख्य रंग के लिए परिवर्तनीय (--c).

यहाँ उस पर क्या हो रहा है transition: सबसे पहले, हम हर चीज़ में एक संक्रमण लागू करते हैं लेकिन हम इसमें देरी करते हैं color और background-color by 0.5s स्लाइडिंग प्रभाव बनाने के लिए. उसके ठीक बाद, हम इसे बदलते हैं color और background-color. आपको कोई दृश्य परिवर्तन नज़र नहीं आएगा क्योंकि पाठ पहले से ही सफेद है (पहले ग्रेडिएंट के लिए धन्यवाद) और पृष्ठभूमि पहले से ही मुख्य रंग पर सेट है (दूसरे ग्रेडिएंट के लिए धन्यवाद)।

फिर, माउस आउट करने पर, हम हर चीज़ में तत्काल परिवर्तन लागू करते हैं (ध्यान दें)। 0s देरी), को छोड़कर color और background-color जिसमें एक संक्रमण है. इसका मतलब यह है कि हम सभी ग्रेडिएंट्स को उनकी प्रारंभिक अवस्था में वापस रख देते हैं। फिर, आपको संभवतः पाठ के कारण कोई दृश्य परिवर्तन नहीं दिखेगा color और background-color होवर पर पहले ही बदल दिया गया है।

अंत में, हम फेडिंग को रंग और ए पर लागू करते हैं background-color एनीमेशन का माउस-आउट भाग बनाने के लिए। मुझे पता है, इसे समझना मुश्किल हो सकता है लेकिन आप विभिन्न रंगों का उपयोग करके इस चाल को बेहतर ढंग से देख सकते हैं:

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

यह हम ना भूलें DRY स्विचिंग तकनीक जिसका हमने उपयोग किया इस श्रृंखला के पिछले लेखों में स्विच के लिए केवल एक वेरिएबल का उपयोग करके कोड की मात्रा को कम करने में मदद करने के लिए:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

यदि आप सोच रहे हैं कि मैं मुख्य रंग के लिए आरजीबी सिंटैक्स तक क्यों पहुंचा, तो ऐसा इसलिए है क्योंकि मुझे अल्फा पारदर्शिता के साथ खेलने की ज़रूरत थी। मैं वेरिएबल का भी उपयोग कर रहा हूं --_t में प्रयुक्त अनावश्यक गणना को कम करने के लिए transition संपत्ति।

इससे पहले कि हम अगले भाग पर जाएं, यहां होवर प्रभावों के और उदाहरण दिए गए हैं, जिन पर मैंने कुछ समय पहले भरोसा किया था background-clip. प्रत्येक का विवरण देना बहुत लंबा होगा लेकिन हमने अब तक जो सीखा है उससे आप कोड को आसानी से समझ सकते हैं। कोड को देखे बिना उनमें से कुछ को अकेले आज़माना एक अच्छी प्रेरणा हो सकती है।

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

सीएसएस का उपयोग करके प्रभाव पर होवर करें mask

अंदाज़ा लगाओ? सीएसएस mask प्रॉपर्टी ग्रेडिएंट्स का उसी तरह उपयोग करती है background संपत्ति करती है, इसलिए आप देखेंगे कि हम आगे जो बना रहे हैं वह बहुत सीधा है।

आइए एक फैंसी अंडरलाइन बनाकर शुरुआत करें।

मैं उपयोग कर रहा हूँ background उस डेमो में एक ज़िग-ज़ैग बॉटम बॉर्डर बनाने के लिए। अगर मैं उस अंडरलाइन पर एनीमेशन लागू करना चाहता हूं, तो अकेले पृष्ठभूमि गुणों का उपयोग करके ऐसा करना कठिन होगा।

सीएसएस दर्ज करें mask.

कोड अजीब लग सकता है लेकिन तर्क अभी भी वही है जैसा हमने पिछले सभी पृष्ठभूमि एनिमेशन के साथ किया था। mask दो ग्रेडियेंट से बना है। पहले ग्रेडिएंट को एक अपारदर्शी रंग से परिभाषित किया गया है जो सामग्री क्षेत्र को कवर करता है (धन्यवाद)। content-box कीमत)। वह पहला ग्रेडिएंट टेक्स्ट को दृश्यमान बनाता है और नीचे के ज़िग-ज़ैग बॉर्डर को छिपा देता है। content-box विश्व का सबसे लोकप्रिय एंव mask-clip मान जो वैसा ही व्यवहार करता है background-clip

linear-gradient(#000 0 0) content-box

दूसरी ढाल पूरे क्षेत्र को कवर करेगी (धन्यवाद) padding-box). इसकी एक चौड़ाई है जिसे इसका उपयोग करके परिभाषित किया गया है --_p वैरिएबल, और इसे तत्व के बाईं ओर रखा जाएगा।

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

अब, हमें बस इसका मूल्य बदलना है --_p दूसरे ग्रेडिएंट के लिए स्लाइडिंग प्रभाव बनाने और अंडरलाइन को प्रकट करने के लिए होवर पर।

.hover:hover { --_p: 100%; color: var(--c);
}

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

ऐसी ट्रिक के साथ, हम आसानी से एक अलग ग्रेडिएंट कॉन्फ़िगरेशन का उपयोग करके बहुत सारी विविधताएँ बना सकते हैं mask संपत्ति:

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

आइए ज़िग-ज़ैग अंडरलाइन को एक लहरदार अंडरलाइन से बदलकर पृष्ठभूमि कॉन्फ़िगरेशन बदलें:

होवर प्रभावों का एक और संग्रह! मैंने सभी मुखौटा विन्यास बनाए रखे और एक अलग आकार बनाने के लिए पृष्ठभूमि बदल दी। अब, आप समझ सकते हैं कि मैं कैसे सक्षम हुआ 400 होवर प्रभाव तक पहुंचने के लिए छद्म तत्वों के बिना - और हम अभी भी और अधिक प्राप्त कर सकते हैं!

जैसे, ऐसा कुछ क्यों नहीं:

यहां आपके लिए एक चुनौती है: उस अंतिम डेमो में बॉर्डर का उपयोग करते हुए एक ग्रेडिएंट है mask इसे प्रकट करने की संपत्ति। क्या आप एनीमेशन के पीछे के तर्क को समझ सकते हैं? यह पहली नज़र में जटिल लग सकता है, लेकिन यह उस तर्क के समान है जिसे हमने अधिकांश अन्य होवर प्रभावों के लिए देखा है जो ग्रेडिएंट पर निर्भर करते हैं। टिप्पणियों में अपना स्पष्टीकरण पोस्ट करें!

3डी में प्रभाव घुमाएँ

आप सोच सकते हैं कि किसी एक तत्व के साथ (और छद्म तत्वों का सहारा लिए बिना!) 3डी प्रभाव बनाना असंभव है, लेकिन सीएसएस के पास ऐसा करने का एक तरीका है।

आप जो देख रहे हैं वह वास्तविक 3डी प्रभाव नहीं है, बल्कि 3डी स्थान में 2डी का एक आदर्श भ्रम है जो सीएसएस को जोड़ता है background, clip-path, तथा transform गुण।

पहली चीज़ जो हम करते हैं वह है अपने वेरिएबल्स को परिभाषित करना:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

फिर हम चौड़ाई के साथ एक पारदर्शी बॉर्डर बनाते हैं जो उपरोक्त चर का उपयोग करता है:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

तत्व के शीर्ष और दाएँ दोनों पक्षों को बराबर होना आवश्यक है --b मान जबकि नीचे और बाएँ पक्षों के योग के बराबर होना चाहिए --b और --d (कौन सा --_s चर)।

ट्रिक के दूसरे भाग के लिए, हमें एक ग्रेडिएंट को परिभाषित करने की आवश्यकता है जो हमारे द्वारा पहले परिभाषित सभी सीमा क्षेत्रों को कवर करता है। ए conic-gradient उसके लिए काम करेंगे:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

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

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

अंतिम चरण लागू करना है सीएसएस clip-path उस लंबी छाया के लिए कोनों को काटने के लिए कुछ इस तरह महसूस करें:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

बस इतना ही! हमने सिर्फ दो ग्रेडिएंट और एक के अलावा कुछ नहीं के साथ एक 3डी आयत बनाया है clip-path जिसे हम CSS वेरिएबल्स का उपयोग करके आसानी से समायोजित कर सकते हैं। अब, हमें बस इसे चेतन करना है!

पिछले आंकड़े (लाल रंग में दर्शाया गया) से निर्देशांक पर ध्यान दें। आइए एनीमेशन बनाने के लिए उन्हें अपडेट करें:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

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

यह पेन अलग करता है clip-path यह क्या कर रहा है यह देखने के लिए एनीमेशन का भाग:

अंतिम स्पर्श का उपयोग करके तत्व को विपरीत दिशा में ले जाना है translate - और भ्रम एकदम सही है! अलग-अलग गहराई के लिए अलग-अलग कस्टम प्रॉपर्टी मानों का उपयोग करने का प्रभाव यहां दिया गया है:

दूसरा होवर प्रभाव उसी संरचना का अनुसरण करता है। मैंने बस इतना किया कि शीर्ष दाएँ के बजाय शीर्ष बाएँ मूवमेंट बनाने के लिए कुछ मानों को अपडेट किया।

प्रभावों का संयोजन!

हमने जो कुछ भी कवर किया है उसके बारे में अद्भुत बात यह है कि वे सभी एक-दूसरे के पूरक हैं। यहां एक उदाहरण है जहां मैं जोड़ रहा हूं la text-shadow दूसरे लेख से प्रभाव की श्रृंखला में background पहले लेख से एनीमेशन तकनीक 3डी ट्रिक का उपयोग करते समय जिसे हमने अभी कवर किया है:

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

मैं इस लेख को अंतिम होवर प्रभाव के साथ समाप्त करता हूँ जहाँ मैं पृष्ठभूमि, क्लिप-पथ और एक डैश का संयोजन कर रहा हूँ perspective किसी अन्य 3D प्रभाव का अनुकरण करने के लिए:

मैंने छवियों पर समान प्रभाव लागू किया और एकल तत्व के साथ 3डी अनुकरण के लिए परिणाम काफी अच्छा था:

क्या आप इस पर करीब से नज़र डालना चाहते हैं कि अंतिम डेमो कैसे काम करता है? मैंने इस पर कुछ लिखा है.

ऊपर लपेटकर

उफ, हमारा काम हो गया! मुझे पता है, यह बहुत पेचीदा सीएसएस है, लेकिन (1) हम उस तरह की चीज़ के लिए सही वेबसाइट पर हैं, और (2) लक्ष्य विभिन्न सीएसएस गुणों के बारे में हमारी समझ को उनके साथ बातचीत करने की अनुमति देकर नए स्तरों पर पहुंचाना है। एक दूसरे।

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

---

कूल सीएसएस होवर इफेक्ट्स जो बैकग्राउंड क्लिपिंग, मास्क और 3D का उपयोग करते हैं मूल रूप से प्रकाशित सीएसएस-ट्रिक्स। तुम्हे करना चाहिए समाचार पत्र प्राप्त करें.

• कॉइनस्मार्ट। यूरोप का सर्वश्रेष्ठ बिटकॉइन और क्रिप्टो एक्सचेंज।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। नि: शुल्क प्रवेश।
• क्रिप्टोहॉक। Altcoin रडार। मुफ्त परीक्षण।
• स्रोत: https://css-tricks.com/css-hover-effects-background-masks-3d/