🍎এডভান্সঃ- CSS ---- ভিজিবিলিটি হিডেন(visibility:hidden)

ডিসপ্লে নান -(display:none) এবং ভিজিবিলিটি হিডেন – (visibility:hidden;)উভই HTML উপাদানকে লুকানোর জন্য ব্যবহার করা হয়।কিন্তু উভয়ের মধ্যে পার্থক্য রয়েছে। কোন HTML উপাদানের জন্য CSS এ visibility:hidden; করলে HTML উপাদানটি প্রদর্শিত হয় না ঠিকই কিন্তু HTML উপাদানটি সমপরিমান স্থান ফাঁকা রাখে। কিন্তু কোন HTML উপাদানের জন্য CSS এ display:none;করলে HTML উপাদানটি প্রদর্শিত হয় না এবং কোন ফাঁকা স্থান তৈরি হয় না।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC;}
#none{width:245px;
background:#C6C; }
#none:hover{display:none;}
#hidde{width:245px;
background:#F30; }
#hidde:hover{visibility:hidden;}
</style>
</head>
<body >
<div id="none"><h1>Please touch me.</h1></div> <br /><br />
<div id="hidde">
<h1>Please touch me.</h1></div>
<h2>Please touch me.</h2></body></html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

কোডিং বিশ্লেষণ:

উপরের Please Touch Me. টেক্সটির উপর মাউস নিয়ে গেলে তা অদৃশ্য হয়ে যায় এবং তার নিচের টেক্সটটি উপরে উঠে আসে। কারণ এ টেক্সটিতে display:none; ব্যবহার করা হয়েছে।

মাঝের Please Touch Me. টেক্সটির উপর মাউস নিয়ে গেলে তা অদৃশ্য হয়ে যায়। কিন্তু লেখাটির সমপরিমান স্থান ফাঁকা থাকে। কারণ এ টেক্সটিতে visibility:hidden; ব্যবহার করা হয়েছে।

OTG DEVELOPER

Thursday, April 4, 2019

🍎এডভান্সঃ- CSS ---- ভিজিবিলিটি হিডেন(visibility:hidden)

অনুশীলন প্রজেক্ট

কোডিং বিশ্লেষণ:

post written by: OTG DEVELOPER

0 comments:

Popular Posts

Facebook Like

Search This Blog

Blog Archive

Report Abuse

About Me