8452fa0f6957c73169f00ac34588a8c0.png?s=48&d=http%3a%2f%2fi2.wp.com%2fspiritz.in%2fdefaulticon “CSS3 সম্পর্কে বিস্তারিত - পর্ব ২ [Border Image]”

বিভাগঃ ওয়েব ডেভলপমেন্ট  পোস্ট করেছেনঃ মইনুল হাসান

Border Image

মনে করুন আপনার কন্টেন্ট এর চারপাশে একটা ইমেজ দিয়ে বর্ডার দিতে চান। কিভাবে করা যায়? সবার আগে হয়ত মাথায় আসবে একটা নির্দিষ্ট width এর ইমেজ কে ব্যাকগ্রাউন্ড হিসেবে ব্যাবহার করে কন্টেন্ট এর পজিশন absolute করে ইমেজ এর width এবং height বাড়িয়ে কমিয়ে সহজেই তো করে ফেলা যায়। ব্যাপার টা কি আসলেই অত সহজ হল? এ ক্ষেত্রে আপনি কিছু আসুবিধার সম্মুখিন ও হবেন, যেমন - ভিতরের কন্টেন্ট বাড়লে সেই অনুসারে আপনাকে ইমেজ টাও বড় ছোট করতে হবে। আর কত বড় ইমেজ ই বা ব্যবহার করতে যাবেন একটা কন্টেন্ট এর জন্য? যদি কন্টেন্ট অনুসারে বর্ডার এর ইমেজ টা একই রকম রাখা যেত কিন্তু ইমেজ এর resolution এ কোন এফেক্ট পড়ত না তাহলে মন্দ হত না কি বলেন। আর সেই ইমেজ এর resolution যদি হয় 100x100 এর ও কম তাহলে তো কথাই নেই। যাই হোক চলুন দেখা যাক কিভাবে Border Image কাজ করে।

border image basic

Border Image এর ব্যাসিক স্ট্রাকচার হচ্ছে

1
2
3
4
5
border-image: url(image.jpg) top right bottom left repeat; /* যদি top right bottom left এর মান আলাদা হয় => border-image: url(image.jpg) 27 30 24 32 repeat;*/
/* অথবা */
border-image: url(image.jpg) top/bottom left/right repeat; /* যদি top,bottom এক মান এবং left,right আরেক মান হয় => border-image: url(image.jpg) 27 35 repeat;*/
/* অথবা */
border-image: url(image.jpg) top/bottom/left/right repeat; /* যদি top,bottom,left,right সব এক মান হয় => border-image: url(image.jpg) 27 repeat;*/

এখানে প্রথম মান টি ইমেজ সোর্স ফাইল টির লোকেশন দেখানর জন্য। দ্বিতীয়, তৃতীয়, চতুর্থ এবং পঞ্চম মান গুলি যথাক্রমে সোর্স ইমেজ এর টপ, রাইট, বটম এবং লেফট থেকে কতটুকু অংশ বর্ডার এ ব্যবহার করা হবে তা উল্লেখ এর জন্য। মনে করুন আপনি নিচের ছবির মত 81x81 resolution এর ইমেজ ব্যবহার করতে চান বর্ডার হিসেবে।

Border

দেখেই মনে হয় এটা দিয়ে কিভাবে সম্ভব যে কোন কন্টেন্ট এর বর্ডার দেওয়া তাই না? একেই সম্ভব করেছে CSS3। উপরের ইমেজ এর height 81px এবং width 81px, প্রতি row এবং column এ সমান resolution এর ডায়মন্ড ব্যাবহার করা হয়েছে, যার প্রতিটির height 27px এবং width 27px। এখন আপনি যদি এই ইমেজ টি বর্ডার হিসেবে ব্যবহার করতে চান তাহলে আপনাকে CSS এ লিখতে হবে এভাবে -

1
2
3
4
5
6
7
border-image: url('image.jpg') 27 27 27 27 repeat;
/* অথবা */
border-image: url('image.jpg') 27 repeat; /* যেহেতু সব মান সমান */
/* অথবা */
border-image: url('image.jpg') 33% 33% 33% 33% repeat;
/* অথবা */
border-image: url('image.jpg') 33% repeat;

একটা কথা মনে রাখতে হবে border-image এর ক্ষেত্রে পিক্সেল ইউনিট ব্যবহার এর সময় মানের শেষে px বসানো যাবে না। 27px

এখন আসা যাক সর্বশেষ মান repeat এ। repeat এর স্থানে চাইলে আপনি round বা stretch ব্যবহার করতে পারবেন।
round আসলে repeat এর মতই কাজ করে, কিন্তু রাউন্ড প্রতিটা সেকশন কে টানা বসানোর পাশপাশি প্রথম বা শেষ সেকশন কে না ভেঙ্গে সব সেকশন কে সম্পূর্ণ ভাবে দেখায়।

Repeat
repeat

Round
round

আর stretch অপশন টি একটা সিঙ্গেল সেকশন কে টেনে পুরো কন্টেন্ট এর width এর সমান লম্বা করে ফেলে।

stretch

Border Image কোড স্যাম্পল -

1
2
3
4
5
6
7
8
9
10
11
.round {
      -webkit-border-image: url(border.png) 27 round; /* Safari 5 */
      border-image: url(border.png) 27 round;
      border-width: 15px;
}

.stretch {
      -webkit-border-image: url(border.png) 27 stretch; /* Safari 5 */
      border-image: url(border.png) 27 stretch;
      border-width: 15px;
}

আশা করি সবাইকে বোঝাতে পেরেছি। Border Image প্রপার্টি টা আয়ত্তে আনা একটু কঠিন প্রথমে। আমার নিজেরও বুঝতে বেশ কিছু ওয়েবসাইট ঘাটতে হয়েছে। যাদের এখনও বুঝতে সমস্যা হচ্ছে তারা জিজ্ঞেস করতে পারেন কোথায় সমস্যা। কোন বুল পেলে ধরিয়ে দেবেন। আর আরও ভালভাবে বোঝার জন্য নিচের লিঙ্ক এ গিয়ে প্র্যাক্টিস করে দেখতে পারেন মান পালটে।

w3school border image practice page

আগের পর্ব টি যারা দেখতে চান তাদের জন্য - CSS3 সম্পর্কে বিস্তারিত - পর্ব ১

ট্যাগঃ CSS3 web design CSS

পোস্ট টি 86 বার পড়া হয়েছে



পাঠকদের মন্তব্য

comments powered by Disqus