CSS सह दुवा लपवणे बरेच मार्ग केले जाऊ शकते, परंतु आम्ही दोन पध्दती पहाव्या ज्यामध्ये URL पूर्णपणे दृश्यात लपलेला असू शकतो. आपण आपल्या साइटवर स्कॅव्हेंजर हंट किंवा इस्टर अंडे तयार करु इच्छित असल्यास, हे दुवे लपविण्यासाठी एक मनोरंजक मार्ग आहे
प्रथम मार्ग म्हणजे "काहीही नाही" पॉइंटर-इव्हेंट CSS प्रॉपर्टी व्हॅल्यू म्हणून. दुसरे म्हणजे फक्त पृष्ठाच्या पार्श्वभूमीशी जुळण्यासाठी हा मजकूर रंगीत करणे.
हे लक्षात ठेवा की स्त्रोत कोडचा शोध घेत असताना दोन्हीपैकी कुठलीही पद्धत सापडू शकणार नाही. तथापि, अभ्यागतांना ते पाहणे सोपे आणि सरळ मार्ग नसतील, आणि आपल्या नवशिक्या अभ्यागतांना दुवा कसा शोधावा हे सुगावा लागणार नाही.
टीप: आपण बाह्य शैली पत्रक कसे जोडावेत यावरील सूचना शोधत असल्यास, आपण यानंतर काय केले आहे ते या सूचना नाहीत. एक बाह्य शैली पत्रक काय आहे? त्याऐवजी
पॉइंटर इव्हेंट अक्षम करा
आपण URL लपविण्यासाठी वापरली जाणारी पहिली पद्धत म्हणजे दुवा काहीही करू नका. जेव्हा लिंकवर माऊस झूम होईल तेव्हा ते URL दर्शविणार नाही आणि ते आपल्याला त्यावर क्लिक करू देणार नाही
अचूकपणे HTML लिहा
एक वेब पृष्ठ, हायपरलिंक असे वाचते याची खात्री करा:
ThoughtCo.comनक्कीच, "https://www.thoughtco.com/" ला आपण ज्या URL ला अदृष्य पाहिजे त्याला सूचित करणे आवश्यक आहे, आणि ThoughtCo.com ला लिंकचे वर्णन करणारा शब्द किंवा वाक्यांश आपल्याला बदलता येऊ शकतो.
येथे कल्पना ही आहे की वर्गात सक्रिय असलेला दुवा खाली CSS सह वापरला जाईल जो दुवा छान प्रभावीपणे दर्शवेल.
या सीएसएस कोड वापरा
सीएसएस कोडला सक्रिय वर्ग संबंधात आणि ब्राउझरला समजावून सांगण्याची आवश्यकता आहे की दुवा क्लिक केल्यावर घटना "कोणीही नाही" असावी:
. एक्टिव्ह {पॉइंटर-इव्हेंट्स: काहीही नाही; कर्सर: डीफॉल्ट; }आपण JSFiddle येथे कारवाईची ही पद्धत पाहू शकता. जर आपण तेथे सीएसएस कोड काढला आणि नंतर डेटा पुन्हा चालविला, तर हा दुवा क्लिक करण्यायोग्य आणि उपयोग करण्यायोग्य बनतो. याचे कारण असे की जेव्हा सीएसएस लागू नाही, तेव्हा लिंक सामान्यतः वर्तन करते.
टीप: लक्षात ठेवा की जर वापरकर्त्याने पृष्ठाचा स्त्रोत कोड बघितला तर त्यांना दुवा दिसेल आणि माहित आहे की तो कुठे जातोय कारण आपण वर पाहिल्याप्रमाणे, कोड अजूनही आहे, हे फक्त वापरण्यायोग्य नाही
दुवा चा रंग बदला
साधारणपणे, एक वेब डिझायनर हायपरलिंक्सची पार्श्वभूमीपेक्षा एक वेगळा रंग तयार करेल जेणेकरून अभ्यागतांना ते खरोखर पाहतील आणि त्यांना कोठे मिळेल ते कळेल तथापि, आम्ही येथे दुवे लपवण्यासाठी आहोत, तर आपण पृष्ठाचा रंग कसा बदलावा हे पाहू.
एक सानुकूल वर्ग परिभाषित करा
जर आपण वरील उदाहरणावरून समान उदाहरण वापरत असलो तर आपण जे काही हवे तेवढे वर्ग बदलू शकतो जेणेकरुन फक्त विशेष संबंध लपले असतील.
जर आपण वर्ग वापरला नाही आणि त्याऐवजी खालील लिंकवर प्रत्येक लिंकवर लागू केले, तर ते सर्व अदृश्य होईल. आम्ही येथे काय करणार आहोत ते नाही, म्हणून आम्ही या एचटीएमएल कोडचा वापर करणार आहोत जो कि कस्टम एचडीएम क्लास वापरत आहे.
ThoughtCo.comकोणता रंग वापरायचा ते शोधा
आम्ही दुवा लपविण्यासाठी योग्य सीएसएस कोड प्रविष्ट करण्यापूर्वी, आपल्याला कोणता रंग वापरायचा आहे हे पाहण्याची आवश्यकता आहे. जर तुमच्याकडे आधीच एक भक्कम पार्श्वभूमी आहे, जसे की पांढरे किंवा काळा, तर ते सोपे आहे. तथापि, इतर विशेष रंगांची सुद्धा अचूक असणे आवश्यक आहे.
उदाहरणार्थ, जर आपल्या पार्श्वभूमीचा रंगात e6ded1 चा हेक्स मूल्य असेल तर , आपल्याला हे समजणे आवश्यक आहे की आपण ज्या कोडमध्ये अदृश्य आहात त्या पृष्ठासाठी सीएसएस कोड योग्यरितीने कार्य करेल.
उपलब्ध या "रंग निवडी" किंवा "आयड्रॉपर" साधनांच्या भरपूर आहेत, ज्यापैकी एक क्रोम ब्राउझरसाठी कोअरपिक आयड्रॉपर म्हणून ओळखला जातो. हेक्स रंग मिळविण्यासाठी आपल्या वेब पृष्ठाचा पार्श्वभूमी रंग नमूना करण्यासाठी वापरा.
रंग बदलण्यासाठी CSS सानुकूल करा
आता आपल्याकडे तो दुवा असावा असा रंग आहे की, तो वापरण्यासाठी आणि वरुन सानुकूल वर्ग मूल्य वापरण्याचा वेळ आहे, CSS कोड लिहिण्यासाठी:
.hideme {color: # e6ded1; }जर आपला बॅकग्राउंड रंग पांढरा किंवा हिरव्या रंगाचा आहे तर आपण त्यापूर्वी # चिन्ह ठेवू नये:
.hideme {रंग: पांढरा; }JSFiddle मध्ये या पद्धतीचा नमुना कोड पहा.