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