वेब डिज़ाइनर लंबे समय से उन पृष्ठों पर अधिक नियंत्रण चाहते थे जब वे दृश्य बनाते थे। CSS3 में पेश की गई नई शैलियों ने वेब पेशेवरों को अपने पृष्ठों पर फ़ोटोशॉप-जैसे प्रभाव जोड़ने की क्षमता दी। इसमें ड्रॉप छाया और चमक, गोलाकार कोनों, आदि जैसे गुण शामिल थे। CSS3 ने एनीमेशन जैसे प्रभाव भी पेश किए जिनका उपयोग साइटों पर अच्छी इंटरएक्टिविटी बनाने के लिए किया जा सकता है।
CSS3 का उपयोग करके अपनी वेबसाइट के तत्वों में एक बहुत अच्छा दृश्य प्रभाव जोड़ सकते हैं, जिससे वे अस्पष्टता और संक्रमण के गुणों के संयोजन का उपयोग करके इन्हें फीका और बाहर कर सकते हैं। यह एक आसान और अच्छी तरह से समर्थित तरीका है जो आपके पृष्ठों को फ़ेडेड क्षेत्रों को बनाकर अधिक इंटरैक्टिव बनाता है जो साइट विज़िटर कुछ करता है, जैसे उस तत्व पर होवर करना।
आइए देखें कि इस वेब पेज पर विभिन्न तत्वों के लिए इस इंटरैक्टिंग विज़ुअल प्रभाव को जोड़ना कितना आसान है।
होवर पर अस्पष्टता बदलें
जब हम उस तत्व पर होवर करते हैं तो हम छवि की अस्पष्टता को बदलने के तरीके को देखकर शुरू करेंगे। इस उदाहरण के लिए (एचटीएमएल नीचे दिखाया गया है) हम कक्षा विशेषता के साथ एक छवि का उपयोग कर रहे हैं
greydout।
इसे गहरा बनाने के लिए, हम निम्नलिखित सीएसएस स्टाइलशीट में निम्नलिखित शैली नियम जोड़ते हैं: ग्रेगआउट {-वेबिट-अस्पष्टता: 0.25;-मोज़-अस्पष्टता: 0.25;अस्पष्टता: 0.25;}
ये अस्पष्टता सेटिंग्स 25% तक अनुवाद करती हैं। इसका मतलब है कि छवि को इसकी सामान्य पारदर्शिता के 1/4 के रूप में दिखाया जाएगा। बिना पारदर्शिता के पूरी तरह से अपारदर्शी 100% होगी जबकि 0% पूरी तरह पारदर्शी होगी। इसके बाद, छवि को स्पष्ट करने के लिए (या अधिक सटीक रूप से, पूर्ण अपारदर्शी बनने के लिए) जब माउस उस पर आच्छादित होता है, तो आप जोड़ देंगे : मंडरानास्यूडो-क्लास: ग्रेगआउट: होवर {-वेबिट-अस्पष्टता: 1;-मोज़-अस्पष्टता: 1;अस्पष्टता: 1;}
आप देखेंगे कि, इन उदाहरणों के लिए, हम उन ब्राउज़रों के पुराने संस्करणों के लिए पिछड़े संगतता सुनिश्चित करने के लिए नियम के विक्रेता प्रीफ़िक्स्ड संस्करणों का उपयोग कर रहे हैं। हालांकि यह एक अच्छा अभ्यास है, वास्तविकता यह है कि ओपेसिटी नियम अब ब्राउज़र द्वारा समर्थित है और यह उन विक्रेताओं की प्रीफिक्स्ड लाइनों को छोड़ना बहुत सुरक्षित है। फिर भी, यदि आप पुराने ब्राउज़र संस्करणों के लिए समर्थन सुनिश्चित करना चाहते हैं तो इन उपसर्गों को शामिल न करने का कोई कारण नहीं है। शैली के सामान्य, गैर-पूर्ववर्ती संस्करण के साथ घोषणा समाप्त करने के स्वीकार्य सर्वोत्तम अभ्यास का पालन करना सुनिश्चित करें। यदि आप इसे किसी साइट पर तैनात करते हैं, तो आप देखेंगे कि यह अस्पष्टता समायोजन एक बहुत ही अचानक परिवर्तन है। सबसे पहले, यह भूरा है और फिर यह नहीं है, उन दोनों के बीच कोई अंतरिम राज्य नहीं है। यह एक हल्के स्विच की तरह है - चालू या बंद। यह वही हो सकता है जो आप चाहते हैं, लेकिन आप उस परिवर्तन के साथ प्रयोग करना भी चाहेंगे जो अधिक क्रमिक है। वास्तव में अच्छा प्रभाव जोड़ने और इस फीड को क्रमिक बनाने के लिए, आप जोड़ना चाहते हैं संक्रमण
संपत्ति के लिए .greydoutकक्षा:। ग्रेडआउट {-वेबिट-अस्पष्टता: 0.25;-मोज़-अस्पष्टता: 0.25;अस्पष्टता: 0.25;-webkit- संक्रमण: सभी 3s आसानी;-मोज़-संक्रमण: सभी 3s आसानी से;-एमएमएस संक्रमण: सभी 3s आसानी;-o-संक्रमण: सभी 3s आसानी;संक्रमण: सभी 3s आसानी;}
