सीएसएस संपत्ति "पारदर्शिता" वेबसाइट डिजाइन को और अधिक रोचक बनाने का एक आसान तरीका है

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

तत्वों की पारदर्शिता स्थापित करने के लिए पैरामीटर

Параметров, позволяющих регулировать степень पारदर्शिता तत्व, कई। उनका उपयोग विशिष्ट लक्ष्यों के साथ-साथ उस ब्राउज़र के आधार पर किया जाता है जिसके तहत डिज़ाइन "अनुकूलित" है। इनमें निम्नलिखित गुण शामिल हैं:

• अस्पष्टता;
• फ़िल्टर कर;
• पीएनजी छवि पृष्ठभूमि के रूप में।

पारदर्शिता सीएसएस संपत्ति मूल्यों में परिवर्तन होता हैनिम्नानुसार है: संख्या जितनी बड़ी होगी, तत्व का पारदर्शिता स्तर उतना ही कम होगा। अपारदर्शिता में यह फिल्टर में 0 से 1 तक भिन्न होता है - 10 से 100 तक। इसके अलावा, बाद वाले का उपयोग इंटरपेट एक्सप्लोरर ब्राउज़र के लिए किया जाता है, और अन्य सभी के लिए, अपारदर्शिता संपत्ति का उपयोग किया जाता है।

छवि पारदर्शिता (परिवर्तनशील)

आइए विकल्प से शुरू करें जब माउस कर्सर के साथ तत्व पर होवर करते समय पारदर्शिता दिखाई देगी।

आइए विचार करें कि छवि की पारदर्शिता कैसे सेट करें। CSS दो विकल्प प्रदान करता है। ऐसा करने के लिए, आपको इसे सीधे HTML दस्तावेज़ के कोड में पंजीकृत करना होगा:

1. हम छवि को पथ इंगित करते हैं।
2. होवर और नहीं पर पारदर्शिता मापदंडों का निर्धारण करें। ऐसा करने के लिए, हम onmouseover और onmouseout गुणों का उपयोग करते हैं, जिसमें हम अस्पष्टता और फ़िल्टर मान लिखते हैं।

एक सीएसएस दस्तावेज़ में समान विशेषताओं को लिखा जा सकता है, और स्रोत कोड में केवल इसके लिए एक लिंक जोड़ा जा सकता है। परिणाम वही होंगे।

पाठ और पृष्ठ ब्लॉकों की पारदर्शिता

पाठ या ब्लॉक (div पारदर्शिता) के लिए,css का सुझाव है कि इमेज ट्रांसपेरेंसी बनाने के लिए एक विकल्प का उपयोग करना, यानी शामिल css फ़ाइल का उपयोग करना, जिसमें आवश्यक पैरामीटर सेट किए जाएंगे। आप एक आसान रास्ता तय कर सकते हैं। जब एक डिव स्टाइल ब्लॉक या टेक्स्ट पी को स्टाइल करते हैं, तो ऑनमाउज़र और ऑनमाउट तत्वों के लिए निम्न HTML कोड जोड़ें। दोनों विकल्प काम करते हैं और वांछित परिणाम देते हैं।

लगातार पारदर्शिता

कुछ मामलों में, किसी ऑब्जेक्ट, डिज़ाइन एलिमेंट या टेक्स्ट की पारदर्शिता स्थायी रूप से सेट होनी चाहिए। इस स्थिति में, माउस पर मँडरा करने की तुलना में समाधान और भी आसान है।

सीएसएस तत्व के लिए, पारदर्शिता स्थापित की जाएगीनिम्नलिखित कोड के साथ। डिव स्टाइल ब्लॉक में, पृष्ठभूमि के लिए मान लिखें (उदाहरण के लिए, # ff8800), अपारदर्शिता (जैसे, 0.5), साथ ही चौड़ाई और इंडेंटेशन (पैडिंग)।

छवि के लिए, कोड में अस्पष्टता और फ़िल्टर मान दर्ज करें, और छवि के लिए पथ भी निर्दिष्ट करें।

RGBA विधि

अन्य उपयोग के मामले भी हैंयह गुण css: पारदर्शिता को किसी भी डिज़ाइन तत्व की पृष्ठभूमि के रंग पर लागू किया जा सकता है। इसके लिए, RGBA विधि का उपयोग किया जाता है। पहले तीन अक्षर प्राथमिक रंगों (लाल, ठोस, नीला) का प्रतिनिधित्व करते हैं, और अंतिम एक अल्फा है, जो पारदर्शिता स्तर निर्धारित करता है। RGBA प्रारूप का उपयोग करते हुए, हम पारदर्शिता की डिग्री निर्धारित करते हैं, इसे अंतिम अंक में दर्शाते हैं। उदाहरण के लिए, इस तरह: पृष्ठभूमि: rgba (240,2,33,0.4035)।

निष्कर्ष

इस प्रकार, काम के दौरान उपयोग करनासाइट का डिजाइन एक सरल लेकिन प्रभावी सीएसएस संपत्ति "पारदर्शिता" है, आप न्यूनतम प्रयास के साथ इसके तत्वों को अधिक रोचक और ध्यान देने योग्य बना सकते हैं। पारदर्शिता विशेषताओं को निर्दिष्ट करने के लिए वर्णित विकल्प आपको इसके साथ मदद करेंगे।