সিএসএস৩ বর্ডার ইমেজ (CSS3 Border Images in Bangla)

সিএসএস৩ border-image প্রোপার্টি

সিএসএস৩ border-image প্রোপার্টি দিয়ে একটি এলিমেন্ট এর চারদিকে বর্ডার সেট করতে পারেন।

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

টেবিলে উল্লেখিত সংখ্যা ব্রাউজার এর প্রথম ভার্সন যা এই প্রোপার্টি সম্পূর্ণভাবে সাপর্ট করে তা বোঝায়।

-webkit- বা -moz- দ্বারা প্রথম প্রিফিক্স ভার্সন বুঝায় যা এই প্রোপার্টি সাপর্ট করে।

Property
border-image	11.0	16.0 4.0 -webkit-	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

সিএসএস৩ border-image প্রোপার্টি

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

প্রোপার্টিটি নিম্নোক্ত তিনভাবে অংশগ্রহণ করে:

1. ইমেজ বর্ডার হিসেবে
2. ইমেজ এর যেখানে স্লাইস/ভাগ থাকে
3. মাঝ অংশ যেখানে পুনরাবৃত্তি বা প্রসারিত হবে তা নির্দিষ্ট করে

আমরা নিম্নোক্ত ইমেজটি ব্যবহার করবো (border.png)

border-image প্রোপার্টি ছবিটিকে নিয়ে একে নয়টি অংশে স্লাইস/ভাগ করে । ইটি চারটি কর্ণারে বসে এবং এবং মধ্যবর্তী অংশ আপনি যেভাবে চান সেই অনুযায়ী – পুনরাবৃত্তি বা প্রসারিত হয়।

নোট: border-image প্রোপার্টি কাজ করার জন্য এলিমেন্টটির বর্ডার প্রোপার্টি সেট প্রয়োজন হবে।

এখানে ইমেজ এর মধ্যবর্তী অংশের পুণরাবৃত্তি ঘটেছে:

Here, the middle sections of the image are repeated to create the border.

এর কোড হচ্ছে

#borderimg {
    border: 10px solid transparent;
    padding: 15px;
    -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;
}

এখানে মধ্যবর্তী অংশ প্রসারিত হয়েছে:

Here, the middle sections of the image are stretched to create the border.

এর কোড হচ্ছে:

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

সিএসএস৩ border-image – বিভিন্ন স্লাইস মান

স্লাইস এর বিভিন্ন মান বর্ডার এর চেহারা পাল্টে দেয়

উদাহরণ 01:

border-image: url(border.png) 50 round;

উদাহরণ 02:

border-image: url(‘http://www.w3schools.com/css/border.png’) 20% round;

উদাহরণ 03:

border-image: url(border.png) 30% round;

এর কোড হচ্ছে:

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

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

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -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;
}