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