আজকের টপিক এক্কেবারেই ছোটো- CSS border radius (বর্ডার রেডিয়াস) ! অনেকে হয়তো নাম শুইনাই বুইঝা ফালাইছেন কি জিনিসের কথা কইতে চাইতাসি আর যারা বুঝেন নাই তাগোরে একটু খুইলা কই! আপনারা যারা আমার HTML & CSS টিউটোরিয়াল গুলা দেখছেন তারা অলরেডি জানেন বর্ডার কি জিনিস! যারা দেহেন নাই তারা এইডা দেহেন কিলিয়ার হয়া যাইবো! তো কাহিনী হইলো আমরা এতোদিন পর্যন্ত যা শিখছি তা হইলো বর্ডার কেমনে মোটা তাজা করা লাগে কেমনে কালার করা লাগে কেমনে ইশটাইল করা লাগে কিন্তু যেইটা শিখি নাই(অনেকেই নিশ্চই আমারে গাইল পাড়তাছেন যে এতোদিন শিখায় নাই এহন আইছে পেচাল পারবার…) সেইটা হইলো বর্ডার রে কেমনে বেকা তেড়া করন যায়! মানে হইলো আমাগো বর্ডারগুলান এতোদিন চাইর কোনাইচ্চা কোনা বাইর করা কিন্তুক সবাই নিশ্চই খেয়াল করছেন যে অনেক সাইটে অনেক কিছুর বর্ডার গোল করা থাকে মানে রাউনডেড করা থাকে! যেমন এইডা দেহেন আমাগো পিরিয় সামু বলগের ইশটাইল দেহেন কতো সুন্দর গোললা মারা বেকা তেড়া বর্ডার……

এইডা আসলে তেমন কিছুই না CSS এর খেইল! আহেন তায়লে দেখি কেমনে বর্ডার গোল করন লাগে…..
আমরা জানি যে কোনো html element এর বর্ডার কেমনে স্টাইল শিটে লেখা হয়! একটা example:-

div{

border:5px solid blue;

}

তো এই কোডটার কাম হইলো আমাগো এর div ট্যাগের বর্ডারগুলারে ৫ পিক্সেল পুরু আর সলিড blue কালার দেওয়া কিন্তু কামের কাম কিছুই হইলো না! আমাগো বর্ডার এহনো কোনাই থাইককা গেছে! এহন দেহেন এর বর্ডারটারে গোল করতে হইলে কি লেখন লাগবো:-

div{

border:5px solid blue;

border-radius:10px;

}

বোল্ড করা লেখাটা এড করলেই দেখবেন মাশাললাহ div tag এর বর্ডার টা কত্তো সুন্দর গোল্লা মারা হয়া গেছে!
এই border-radius property তে ২ ভাবে value আপনারা দিতে পারেন! আমি দিছি পিক্সেল(10px) হিসাব কইরা আরেকটা সিস্টেম হইলো em হিসাব কইরা! এইটা আসলে ফন্টের মাপ নেওয়ার একক! 1em মানে হইলো ১টা অক্ষরের সাইজ! একটা example দেহেন:-

div{

border:5px solid blue;

border-radius:.5em;

}

আবার কিছু কিছু browser এহনো বর্ডার সাপোর্ট করে না যার লাইগা অনেক web developer রা বর্ডার এর লগে কিছু prefix যোগ করে!prefix যোগ করা মানে হইলো কয়া দেওয়া যে কোন কোন browser এ এই জিনিস কাম করবো যেমন ধরেন:-
1.mozilla আফার লাইগা হইলো-moz-
2.opera ম্যাডাম এর লাইগা হইলো -o-

3.google chrome, safari এগুলানের লাইগা হইলো -webkit-

পুরা কোডখান একটু দেহেন:-

div{

border:5px solid blue;

-moz-border-radius:.5em;

-o-border-radius:.5em;

-webkit-border-radius:.5em;

}

এহন নোটপ্যাড খুলেন আর এইডা লয়া একটু গুতান! বিভিন্ন value দিয়া টেরাই করেন দেহেন কোনডা কেমন দেহায় কোন value তে কতোখানি বেকা হয়!

ট্যাগসমূহ:

লেখক: ফয়সাল আহমেদ

লেখালেখি ভালো লাগে না-পারিও না! নিজে যা জানি তা অন্যরে জানাইতে ভালো লাগে! নতুন কিছু শিখতে ভালো লাগে! আর ভালো লাগে বাংলাদেশ!



কথোপকথন শুরু হয়ে গেছে! আপনিও যোগ দিন- ইতোমধ্যে 6 টি মন্তব্য করা হয়েছে :

  1. shohelon August 20, 2012, at 7:22 pm Reply

    nice

  2. NAKIBon October 12, 2012, at 5:19 am Reply

    nice, i like this

  3. Shihabon February 7, 2013, at 7:25 pm Reply

    Vaia, css er tutorial gula ki html er vitor?

    • ফয়সাল আহমেদon February 7, 2013, at 9:48 pm Reply

      ভিডিওর কথা কইতাছেন? এইচটিএমএল আর সিএসএস এর ভিডিও একসাথে দেওয়া কারন ২ টা আলাদা ভাবে করাটা একটু ঝামেলা আর একসাথে করলে বুঝাইতে সুবিধা হয়

  4. Mohammad Obaidullahon April 21, 2014, at 6:36 am Reply

    Different browser er jonno different code er upor kichu tutorial thakle khub valo hoto.

  5. Kausar Al Mamunon September 19, 2014, at 2:51 pm Reply

    Valo kichu shikte parar moja e alada..

Leave a Reply

Your email address will not be published. Required fields are marked *