ক্লিপ (Clip)
কোন HTML উপাদানের সম্পূর্ণ অংশ প্রদর্শন করা হবে, না কোন বিশেষ অংশ প্রদর্শন করা হবে তা নির্দেশ করার জন্য ক্লিপ প্রোপার্টি ব্যবহার করা হয়। এজন্য Declaration করতে হয় clip:rect(20px,200px,200px,20px); এর অনুরূপ। ক্লিপ প্রোপার্টি ব্যবহার করতে হলে সাথে পজিশন এবসলিউট (position:absolute) অবশ্যই ব্যবহার করতে হয়।ক্লিপ প্রোপার্টির দুটি উল্লেখযোগ্য মান হচ্ছে,
- অটো ক্লিপ (clip:auto)
- রেকটেংগুলার ক্লিপ (clip:ract)
ক্লিপ প্রোপার্টি ব্যবহার করে সহজেই একটি মাত্র ইমেজ ব্যবহার করে কোন বাটনের হোভার ইফেক্ট দেয়া যায়।নিচের উদাহরণটি ক্লিপ প্রোপার্টি ব্যবহার করে তৈরিকৃত একটি ইন্ট্রাকটিভ বাটনের।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
a #clip{
position:absolute;
top:50px;
clip: rect(27 130 69 30);}
a #clip:hover {
position:absolute;
top:50px;
clip:auto;}
</style>
</head>
<body >
<h3> This is an example of clip image.</h3>
<a href="www.tutohost.com"><img id="clip"src="https://tutorialbd.com/css/images/pic/clip.png"/></a>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত