कस्टम सीएसएस

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

यहाँ यह संपादक में है सीएसएस बॉक्स में भूमि, और प्रशंसापत्र कार्ड कैनवास पर एक ही दूसरे में फिसलने लगते हैंः

कस्टम सीएसएस एक्सटेंशन क्या करता है #

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

संपादक इसका समर्थन करता है चयनक कीवर्ड, जो तत्व के अपने रैपर के लिए खड़ा है लिखें selector { } और नियम बिल्कुल इस खंड या विजेट को लक्षित करता है, एलिमेंट के उत्पन्न वर्ग नामों के लिए कोई शिकार नहीं बाल चयनकर्ता भी काम करते हैंः selector .some-class तत्व के अंदर पहुँच जाता है।

इससे पहले कि आप शुरू करें #

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय मुक्त संस्करण पर्याप्त है।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया है का पालन करें स्थापना गाइड पहले।
• कस्टम सीएसएस एक नि: शुल्क विस्तार है, इसलिए कोई प्रो लाइसेंस की आवश्यकता नहीं है।
• कुछ सीएसएस। यहां तक कि कॉपी-पेस्ट किए गए स्निपेट भी काम करते हैं, क्योंकि चयनकर्ता कीवर्ड कठिन भाग को हटा देता है।

कस्टम सीएसएस एक्सटेंशन को कैसे सक्षम करें #

अपने वर्डप्रेस डैशबोर्ड से, पर जाएं मास्टर ऐडऑन और खोलो एक्सटेंशन टैब। कस्टम सीएसएस बैठता है उपयोगिताएँ विजेट कस्टम जेएस के बगल में एक लोकप्रिय बैज वाला समूह और पोस्ट/पेज डुप्लीकेटरइसके टॉगल पर क्लिक करें ताकि यह बैंगनी हो जाए, फिर हिट करें परिवर्तन सहेजें और हरे रंग की प्रतीक्षा करें “सेटिंग्स सफलतापूर्वक सहेजी गई” नोटिस।

किसी तत्व पर कस्टम सीएसएस संपादक खोलें #

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

सीएसएस लिखें या पेस्ट करें #

डेमो एक कीफ्रेम एनीमेशन के साथ प्रशंसापत्र कार्ड की एक स्थिर पंक्ति को एक चलती मार्की में बदल देता हैः

selector {
    animation: testimonial 5s linear infinite alternate;
}

@keyframes testimonial {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(calc(-100% + 100vw));
    }
}

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

पेज पर रिजल्ट #

हिट प्रकाशित करें और सामने का सिरा एक ही एनीमेशन चलाता है: प्रशंसापत्र पंक्ति व्यूपोर्ट में बहती है, प्रत्येक छोर पर दिशा रोकती है, और अपने आप साइकिल चलाती रहती है।

रखने लायक एक आदत: सीएसएस तत्व पर रहता है, वैश्विक स्टाइलशीट में नहीं अनुभाग को दूसरे पृष्ठ पर डुप्लिकेट करें और एनीमेशन इसके साथ यात्रा करता है।

जहां प्रति-तत्व कस्टम सीएसएस मदद करता है #

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

वीडियो ट्यूटोरियल #

प्रकाशित पृष्ठ पर चल रहे एनिमेटेड कार्ड के लिए एक्सटेंशन को सक्षम करने से, पूरे प्रवाह को देखें।

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

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