সিএসএস৩ বর্ডার ইমেজ - Css3 Border Images



সিএসএস ৩ এর বর্ডার-ইমেজ প্রপার্টি এর মাধ্যমে করে কোন এলিমেন্ট এর চারপাশের বর্ডারে কোন ছবি বা image ব্যবহার করা যায়।


বর্ডার-ইমেজ

এলিমেন্টকে আকর্ষণীয় করে উপস্থাপন করার জন্য তার চারপাশে বর্ডার ব্যবহার করা হয়।
আর বর্ডারকে আরও আকর্ষণীয় করে তোলার জন্য বর্ডার-ইমেজ ব্যবহার করা হয়। সিএসএস ৩ এর border-image প্রোপার্টির মাধ্যমে এই কাজটি খুব সহজেই করা যায়।


ব্রাউজার সাপোর্ট

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত ভার্সন গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
border-image 16.0
4.0 -webkit-
11.0 15.0
3.5 -moz-
6.0
3.1 -webkit-
15.0
11.0 -o-


বর্ডার-ইমেজ প্রপার্টি

সিএসএস এর border-image প্রোপার্টির মাধ্যমে একটি এলিমেন্টের চারপাশে বর্ডার হিসেবে কোন ইমেজ নির্ধারণ করা হয়।
আসলে বর্ডার-ইমেজ প্রপার্টি হল বর্ডার ইমেজের সবগুলো প্রোপার্টি অর্থাৎ border-image, border-image-source, border-image-slice, border-image-width, border-image-outset এবং border-image-repeat সেট করার একটি সংক্ষিপ্ত বা শর্ট হ্যান্ড প্রোপার্টি।
একটি বর্ডার ইমেজ প্রোপার্টির ৩টি অংশ থাকে -
১. বর্ডার হিসেবে ব্যবহার করার জন্য একটি ইমেজের URL,
২. ইমেজটি কোথায় স্লাইস হবে তা নির্দেশ করা হয় এবং
৩. মাঝের সেকশনটি রিপিট বা প্রসারিত হবে কিনা তা নির্দেশ করা হয়।

নিচে বর্ডার-ইমেজ প্রপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

border-image: url 30 round;


এখানে url বর্ডারে বাবহ্রিত ছবিটির লোকেশন নির্ধারণ করে, মাঝের সংখ্যাটি ছবিটি কোথায় স্লাইস হবে তা নির্দেশ করে এবং শেষের অংশটি বর্ডারের মাঝের অংশ প্রসারিত হবে কি না তা নির্ধারণ করে। মাঝের অংসের মান অর্থাৎ border-image-slice প্রপার্টির মান হিসেবে সংখ্যা, সতকরা বা fill, initial,inherit ব্যবহার করা যায়।
নিচে একটি উদাহরণ দেখুন -

উদাহরণ

#border-example{ border: 10px solid transparent;
padding: 25px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}


নোট - কোনো এলিমেন্টে border-image প্রোপার্টি ব্যবহার করতে হলে, প্রথমে ঐ এলিমেন্টে border প্রোপার্টি সেট করতে হবে। বর্ডার-ইমেজ প্রোপার্টি IE 10 এবং তার পূর্বের ভার্সনে সাপোর্ট করে না।


সিএসএস ৩ - সকল বর্ডার প্রপার্টি

প্রপার্টি বর্ণনা
border-imageবর্ডার ইমেজের সবগুলো প্রোপার্টি সেট করার একটি সংক্ষিপ্ত প্রোপার্টি।
border-image-sourceবর্ডার-ইমেজ এর উৎস বা url নির্দেশ করে।
border-image-sliceবর্ডার ইমেজটি কিভাবে স্লাইস হবে তা নির্দেশ করে।
border-image-widthবর্ডার ইমেজের প্রস্থ বা width নির্দেশ করে।
border-image-outsetইমেজটি বর্ডারের কোন জায়গায় অবস্থান করবে তা নির্দেশ করে।
border-image-repeatবর্ডারে ইমেজ পুনরাবৃত্তি, বৃত্তাকার বা প্রসারিত হবে কিনা তা নির্ধারণ করে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.