Dreamweaver CS6 में CSS3 के बदलाव

• मई 12, 2024

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

आइए देखें कि अपने स्वयं के संवादात्मक संक्रमणों को बनाना कितना आसान है। संक्रमण को किसी भी वर्ग, आईडी या सीएसएस तत्व पर लागू किया जा सकता है। हम सभी को CSS संक्रमण पैनल में मान सेट करने की आवश्यकता है।

1. हमारा पहला कदम उस तत्व का चयन करना है जिसके लिए हम संक्रमण को लागू करना चाहते हैं। हमारे उदाहरण में यह एक मेनू लिंक होगा।
   
   
2. पैनल खोलने के लिए Window - CSS Transitions पर क्लिक करें।
   
   
3. CSS संक्रमण पैनल में, संक्रमण जोड़ने के लिए प्लस चिह्न पर क्लिक करें।
   
   
4. न्यू ट्रांज़िशन संवाद बॉक्स में, हम प्रीसेट से चुनने के लिए लक्ष्य नियम मेनू का उपयोग कर सकते हैं या संक्रमण के लिए अपने नाम से टाइप कर सकते हैं। नाम में टाइप करते हैं।
   
   
5. आगे हमें उस कार्रवाई को चुनना होगा जो संक्रमण को ट्रिगर करेगी। ट्रांज़िशन ऑन मेनू से, होवर चुनें ताकि जब हम लिंक पर अपना माउस रखें तो संक्रमण शुरू हो जाए। अन्य विकल्पों में शामिल हैं: सक्रिय, जाँच, अक्षम, सक्षम, फ़ोकस, होवर, अनिश्चित और लक्ष्य।
   
   
6. मेनू विकल्प के लिए, हमारे पास दो विकल्प हैं। पहले का चुनाव करते हैं।
   
   सभी गुणों के लिए एक ही संक्रमण का उपयोग करें
   प्रत्येक संपत्ति के लिए एक अलग संक्रमण का उपयोग करें
   
   
7. संक्रमण की अवधि और देरी के लिए, हम सेकंड या मिलिसकॉन्ड का उपयोग कर सकते हैं। आइए अवधि को 1 सेकंड और विलंब को .05 सेकंड पर सेट करें।
   
   
8. टाइमिंग फंक्शन के लिए, हमारे पास कई सहज विकल्प हैं। आइए ईज़ी आउट को चुनें।
   
   
9. CSS गुण जोड़ने के लिए, प्लस चिह्न पर क्लिक करें और पॉप-अप सूची में से एक चुनें। पृष्ठभूमि-रंग चुनें।
   
   
10. एक बार जब हम एक संपत्ति चुन लेते हैं तो हम संक्रमण के लिए अंतिम मूल्य निर्धारित कर सकते हैं। हमारे द्वारा चुनी गई संपत्ति के आधार पर, अंतिम मूल्य मेनू हमें उस संपत्ति के लिए संबंधित मेनू देगा। बैकग्राउंड-कलर के लिए हमें कलर पिकर मिलता है। यदि हम फ़ॉन्ट-भार गुण जोड़ते हैं, तो हमें प्रीसेट वेट का मेनू मिलता है।
    
    
11. अंत में हमें यह चुनने की आवश्यकता है कि संक्रमण कहां से बनाएं। हमारी पसंद यह दस्तावेज़ केवल या नई शैली शीट फ़ाइल है। पहले का उपयोग करते हैं।
    
    

एक बार जब हम क्रिएट ट्रांज़िशन बटन पर क्लिक करते हैं, तो हम देख सकते हैं कि ट्रांज़िशन को सीएसएस ट्रांज़िशन पैनल में सूचीबद्ध किया गया है, यह दर्शाता है कि मॉर्फ संक्रमण को हॉवर क्रिया द्वारा ट्रिगर किया जाएगा और a.morph लक्ष्य पर लागू किया जाएगा।

यदि हम कोड दृश्य की जांच करते हैं, तो हम देखते हैं कि लिंक में रूप वर्ग जोड़ा गया है।

जब हम अपने माउस को लाइव दृश्य में लिंक पर पास करते हैं, तो पृष्ठभूमि का रंग बदल जाएगा।

लेकिन क्या होगा अगर हमें संक्रमण को संपादित करने की आवश्यकता है? हम इसे CSS बदलाव पैनल के माध्यम से कर सकते हैं।

1. A.morph ट्रांज़ेक्शन का चयन करें और एडिट आइकन सक्रिय हो जाएगा (पेंसिल आइकन)।
   
   
2. संपादन संक्रमण संवाद बॉक्स खोलने के लिए संपादन आइकन पर क्लिक करें। यहां हम आवश्यकतानुसार मानों को बदल सकते हैं या एक नई संपत्ति और समाप्ति मान जोड़ सकते हैं।
   
   

अब जबकि हमारे पास मॉर्फ संक्रमण पैदा हो गया है, हम इसे आसानी से अन्य तत्वों पर लागू कर सकते हैं क्योंकि यह अब लक्ष्य नियम मेनू से उपलब्ध है।

* Adobe ने समीक्षा उद्देश्यों के लिए मुझे इस सॉफ़्टवेयर की एक प्रति प्रदान की।

कॉपीराइट 2018 एडोब सिस्टम्स शामिल। सभी अधिकार सुरक्षित। Adobe उत्पाद स्क्रीन शॉट (ओं) को Adobe सिस्टम शामिल से अनुमति के साथ पुनर्मुद्रित किया गया। Adobe, Photoshop, Photoshop एल्बम, Photoshop तत्व, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, आतिशबाजी, योगदान, कैप्टिनेट, फ्लैश कैटालिस्ट और फ्लैश पेपर संयुक्त राज्य अमेरिका और / या अन्य देशों में शामिल Adobe Systems का या तो [a] पंजीकृत ट्रेडमार्क [s] या ट्रेडमार्क [s] है।

वीडियो निर्देश: Dreamweaver CS6 में सीएसएस संक्रमण बनाना (मई 2024).