CSS3 के साथ वेबपृष्ठ तत्वों को फीका इन और आउट करें

CSS3 संक्रमण अच्छा फीड प्रभाव बनाएँ

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

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

आइए देखें कि इस वेब पेज पर विभिन्न तत्वों के लिए इस इंटरैक्टिंग दृश्य प्रभाव को जोड़ना कितना आसान है ..

होवर पर चलो ओपेसिटी की चलो

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

इसे गहरा बनाने के लिए, हम निम्नलिखित सीएसएस स्टाइलशीट में निम्नलिखित शैली नियम जोड़ते हैं:

ग्रेगआउट {
-वेबिट-अस्पष्टता: 0.25;
-मोज़-अस्पष्टता: 0.25;
अस्पष्टता: 0.25;
}

ये अस्पष्टता सेटिंग्स 25% तक अनुवाद करती हैं। इसका मतलब है कि छवि को इसकी सामान्य पारदर्शिता के 1/4 के रूप में दिखाया जाएगा। बिना पारदर्शिता के पूरी तरह से अपारदर्शी 100% होगी जबकि 0% पूरी तरह पारदर्शी होगी।

इसके बाद, छवि को स्पष्ट करने के लिए (या अधिक सटीक रूप से, पूरी तरह से अपारदर्शी बनने के लिए) जब माउस उस पर आच्छादित होता है, तो आप: होवर छद्म-वर्ग जोड़ देंगे:

। ग्रेडआउट: होवर {
-वेबिट-अस्पष्टता: 1;
-मोज़-अस्पष्टता: 1;
अस्पष्टता: 1;
}

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

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

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

ग्रेगआउट {
-वेबिट-अस्पष्टता: 0.25;
-मोज़-अस्पष्टता: 0.25;
अस्पष्टता: 0.25;
-webkit- संक्रमण: सभी 3s आसानी;
-मोज़-संक्रमण: सभी 3s आसानी से;
-एमएमएस संक्रमण: सभी 3s आसानी;
-o-संक्रमण: सभी 3s आसानी;
संक्रमण: सभी 3s आसानी;
}

इस कोड के साथ, परिवर्तन अचानक धीरे-धीरे स्विच करने की बजाए धीरे-धीरे संक्रमण होगा।

एक बार फिर, हम यहां कई विक्रेता प्रीफिक्स्ड नियमों का उपयोग कर रहे हैं। संक्रमण को अस्पष्टता के रूप में भी समर्थित नहीं है, इसलिए इन उपसर्गों को समझ में आता है।

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

फ्डिंग आउट संभव है

आपको एक फीका छवि से शुरू करने की ज़रूरत नहीं है, आप पूरी तरह से अपारदर्शी छवि से बाहर निकलने के लिए संक्रमण और अस्पष्टता का उपयोग कर सकते हैं। एक ही छवि का उपयोग, केवल withfadeout के एक वर्ग के साथ:

वर्ग = "withfadeout">

पहले की तरह, आप का उपयोग कर अस्पष्टता बदलते हैं: होवर चयनकर्ता:

.withfadeout {
-वेबिट-संक्रमण: सभी 2s आसानी से बाहर;
-मोज़-संक्रमण: सभी 2s आसानी से बाहर;
-एमएस-संक्रमण: सभी 2s आसानी से बाहर;
-o-transition: सभी 2s आसानी से बाहर;
संक्रमण: सभी 2s आसानी से बाहर;
}
.withfadeout: होवर {
-वेबिट-अस्पष्टता: 0.25;
-मोज़-अस्पष्टता: 0.25;
अस्पष्टता: 0.25;
}

इस उदाहरण में, छवि पूरी तरह से अपारदर्शी से कुछ हद तक पारदर्शी हो जाएगी - हमारे पहले उदाहरण के विपरीत।

छवियों से परे जा रहा है

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

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

#myDiv {
चौड़ाई: 280 पीएक्स;
पृष्ठभूमि रंग: # 557 ए 47;
रंग: # डीएफडीएफडीएफ;
पैडिंग: 10 पीएक्स;
-वेबिट-संक्रमण: सभी 4s आसानी से 0s;
-मोज़-संक्रमण: सभी 4s आसानी से 0s;
-एमएस-संक्रमण: सभी 4s आसानी से 0s;
-o-transition: सभी 4s आसानी से 0s;
संक्रमण: सभी 4s आसानी से 0s;
}
#myDiv: होवर {
-वेबिट-अस्पष्टता: 0.25;
-मोज़-अस्पष्टता: 0.25;
अस्पष्टता: 0.25;
रंग: # 000;
}

नेविगेशन मेनू लुप्तप्राय पृष्ठभूमि रंगों से लाभ उठा सकते हैं

इस सरल नेविगेशन मेनू में पृष्ठभूमि रंग मेनू आइटम पर माउस के रूप में धीरे-धीरे अंदर और बाहर fades। यहां HTML है:

• • होम
  • • CSS3 ट्यूटोरियल
    • • CSS3 गुण

और यहां सीएसएस है:

उल # sampleNav {सूची-शैली: कोई नहीं; }
उल # नमूना नवा ली {
प्रदर्शन: इनलाइन;
बाईंओर तैरना;
पैडिंग: 5 पीएक्स 15 पीएक्स;
मार्जिन: 0 5 पीएक्स;
-वेबिट-संक्रमण: सभी 2 एस रैखिक;
-मोज़-संक्रमण: सभी 2 एस रैखिक;
-एमएमएस संक्रमण: सभी 2 एस रैखिक;
-o-transition: सभी 2s रैखिक;
संक्रमण: सभी 2 एस रैखिक;
}
ul # sampleNav li a {text-decoration: none; }
उल # नमूना नवा ली: होवर {
पृष्ठभूमि रंग: # डीएएफ 1 9 7;
}

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

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

अतिरिक्त मज़ा; दो छवियों को स्वैप करें

यहां एक उदाहरण है कि एक छवि को दूसरे में कैसे फेंकना है। एचटीएमएल का प्रयोग करें:

और सीएसएस जो एक पूरी तरह से पारदर्शी बनाता है जबकि दूसरा पूरी तरह से अपारदर्शी है और फिर संक्रमण दो को बदल देता है:

.swapMe img {-webkit-transition: सभी 1s आसानी से बाहर; -मोज़-संक्रमण: सभी 1s आसानी से बाहर; -एमएस-संक्रमण: सभी 1s आसानी से बाहर; -o-transition: सभी 1s आसानी से बाहर; संक्रमण: सभी 1s आसानी से बाहर; } .swap1, .swapMe: होवर .swap2 {-webkit-opacity: 1; -मोज़-अस्पष्टता: 1; अस्पष्टता: 1; } .swapMe: होवर .swap1, .swap2 {-webkit-opacity: 0; -मोज़-अस्पष्टता: 0; अस्पष्टता: 0; }