কিভাবে সিএসএস ব্যবহার করে লিংক লুকানো যায়

সিএসএস এর সাথে একটি লিঙ্ক লুকিয়ে রাখার জন্য বেশ কয়েকটি উপায় করা যায়, তবে আমরা দুটি পদ্ধতি দেখতে পাব, যেখানে একটি ভিউ ভিউ থেকে সম্পূর্ণ লুকানো থাকতে পারে। আপনি যদি আপনার সাইটে একটি স্ক্যাজারার হান্ট বা ইস্টার ডিম তৈরি করতে চান, তবে এটি লিঙ্ক লুকানোর একটি আকর্ষণীয় উপায়।

প্রথম উপায় পয়েন্টার-ঘটনা CSS সম্পত্তি মান হিসাবে "না" ব্যবহার করে। অন্যটি পৃষ্ঠার ব্যাকগ্রাউন্ডের সাথে মেলে এমন লেখাটি রঙিন করে।

মনে রাখবেন যে সোর্স কোড অনুসন্ধান করার সময় পাওয়া যাবে না থেকে লিঙ্কটি সম্পূর্ণরূপে অদৃশ্য হয়ে যাবে। যাইহোক, দর্শকরা এটি দেখতে কোন সহজ, সরল পথ পাবে না, এবং আপনার শিষ্যদের কাছে লিঙ্কটি কীভাবে খুঁজে পাওয়া যায় তার একটি সূত্র থাকবে না।

দ্রষ্টব্য: আপনি যদি বাহ্যিক স্টাইল শীট কিভাবে সংযুক্ত করবেন তা নির্দেশাবলীর জন্য খুঁজছেন, তবে এই নির্দেশগুলি আপনি পরে কি করেন তা নয়। কি একটি বাহ্যিক স্টাইল শীট দেখুন? পরিবর্তে.

পয়েন্টার ইভেন্ট অক্ষম করুন

একটি URL টি লুকানোর জন্য আমরা যে প্রথম পদ্ধতি ব্যবহার করতে পারি তা হল লিঙ্কটি কিছুই করার নেই। যখন লিংকটির উপরে মাউস হুবহু থাকে, তখন এটি দেখাবে না যে ইউআরএল কী নির্দেশ করে এবং এটি আপনাকে এটি ক্লিক করতে দেয় না।

সঠিকভাবে HTML লিখুন

ওয়েব পৃষ্ঠাটি, নিশ্চিত করুন যে হাইপারলিংক এই মত পড়ছে:

থটকো.কম

অবশ্যই, "https://www.thoughtco.com/" প্রকৃত URL- এ নির্দেশ করতে হবে যা আপনি গোপন করতে চান, এবং ThoughtCo.com কে যেকোন শব্দ বা ফ্রেজতে পরিবর্তন করা যায় যা আপনার লিঙ্কটি বর্ণনা করে।

এখানে ধারণা এখানে সক্রিয়ভাবে লিঙ্কটি গোপন করতে নীচের CSS এর সাথে সক্রিয় করা হবে।

এই সিএসএস কোড ব্যবহার করুন

CSS কোডটি সক্রিয় শ্রেণীর ঠিকানা এবং ব্রাউজারকে ব্যাখ্যা করতে হবে যে লিঙ্ক ক্লিকের ঘটনাটি "কেউ না" হওয়া উচিত, যেমনটি:

। সক্রিয় {পয়েন্টার-ঘটনাগুলি: কেউ না; কার্সার: ডিফল্ট; }

আপনি JSFiddle এ কর্ম এই পদ্ধতি দেখতে পারেন। আপনি যদি সেখানে CSS কোড মুছে ফেলেন এবং তারপরে তথ্য পুনঃপ্রতিষ্ঠিত করেন, তাহলে লিঙ্ক হঠাৎ ক্লিকযোগ্য এবং ব্যবহারযোগ্য। এই কারণ যখন CSS প্রয়োগ করা হয় না, লিঙ্কটি সাধারণত আচরণ করে।

দ্রষ্টব্য: মনে রাখবেন ব্যবহারকারী যদি পৃষ্ঠার উৎস কোডটি দেখে, তাহলে তারা লিঙ্কটি দেখতে পাবে এবং এটি ঠিক যে, এটি কোথায় চলে, কারণ আমরা উপরে দেখি, কোডটি এখনও আছে, এটি শুধু ব্যবহারযোগ্য নয়

লিংকের রঙ পরিবর্তন করুন

সাধারনত, একটি ওয়েব ডিজাইনার হাইপারলিঙ্কগুলিকে পটভূমির তুলনায় আলাদা রঙ করতে পারেন যাতে দর্শকরা আসলে তাদের দেখতে পারে এবং তারা কোথায় যায় তা জানতে পারে। যাইহোক, আমরা এখানে লিঙ্কগুলি লুকিয়ে আছি, তাই আসুন দেখি কিভাবে পৃষ্ঠার সাথে মেলে এমন রং পরিবর্তন করতে হয়।

একটি কাস্টম ক্লাস সংজ্ঞা

যদি আমরা উপরের উদাহরণ থেকে একই উদাহরণ ব্যবহার করি, তবে আমরা কেবল যা যা চাই তাই কেবল ক্লাস পরিবর্তন করতে পারি যাতে শুধুমাত্র বিশেষ লিঙ্ক লুকানো থাকে।

যদি আমরা একটি ক্লাস ব্যবহার না করে এবং পরিবর্তে নীচের প্রতিটি লিঙ্ক থেকে CSS প্রয়োগ, তারপর তাদের সব অদৃশ্য হয়ে যাবে। আমরা এখানে পরে কি না, তাই আমরা এই এইচটিএমএল কোড ব্যবহার করব যা কাস্টম hideme ক্লাস ব্যবহার করছে:

থটকো.কম

কী রঙ ব্যবহার করতে হবে তা খুঁজে বের করুন

লিঙ্কটি লুকানোর জন্য উপযুক্ত সিএসএস কোড লিখার আগে, আমাদের যে রঙ আমরা ব্যবহার করতে চাই তা বুঝতে হবে। যদি আপনি ইতিমধ্যে একটি কঠিন ব্যাকগ্রাউন্ড আছে, সাদা বা কালো মত, তারপর যে সহজ। যাইহোক, অন্যান্য বিশেষ রং খুব সঠিক হতে হবে।

উদাহরণস্বরূপ, যদি আপনার ব্যাকগ্রাউন্ডের রঙে e6ded1 এর একটি হেক্স মান থাকে , তাহলে আপনাকে জানাতে হবে যে CSS কোডটি সঠিকভাবে কাজ করার জন্য আপনি এটিতে অদৃশ্য হয়ে যাচ্ছেন।

এই "রঙ চয়নকারী" বা "আইড্রপার" সরঞ্জামগুলি প্রচুর পাওয়া যায়, যার মধ্যে একটি হল ক্রোম ব্রাউজারের জন্য ColorPick Eyedropper বলা হয়। হেক্স রঙ পেতে আপনার ওয়েব পৃষ্ঠার পটভূমির রং নমুনার জন্য এটি ব্যবহার করুন।

রঙ পরিবর্তন করতে সিএসএস কাস্টমাইজ করুন

এখন যে আপনার লিঙ্কটি থাকবে সেটি হচ্ছে লিঙ্ক, এটি ব্যবহার করার সময় এবং উপরের কোড থেকে কাস্টম বর্গের মান, CSS কোড লিখতে হবে:

.hideme {color: # e6ded1; }

যদি আপনার পটভূমির রং সাদা বা সবুজ মত সরল হয়, তাহলে আপনার আগে # চিহ্নটি স্থাপন করতে হবে না:

.হাইডেম {রঙ: সাদা; }

এই JSFiddle এই পদ্ধতির নমুনা কোড দেখুন।