সিএসএস ৩ বর্ডার (CSS3 Borders)

সিএসএস ৩ এর সাহায্যে তুমি গোলআকৃতির বর্ডার তৈরি করতে পারবা, এবং বক্স এ ছায়া দিতে পারবা, এবং যেকোন ইমেজ কে বর্ডার করতে পারবা ফটোশপ অথবা অন্য যে কোন ধরনের ডিজাইন প্রোগ্রাম ছাড়াই।

এই অংশে আমরা শিখব বর্ডার এর প্রপার্টিজ এর কিছু বিষয় সম্পর্কেঃ

  • বর্ডার - রেডিয়াস
  • বক্স - ছায়া
  • বর্ডার - ইমেজ

এই কাজ গুল প্রায় সব ওয়েব ব্রাওজার দিয়েই করা যায়।

 

সিএসএস ৩ বর্ডার - রেডিয়াস প্রপার্টি- গোলাকার কোনা

সিএসএস ২ তে গোলাকার কোনা তৈরি করা অনেক কষ্টের ছিল । আমাদেরকে প্রতিটা কোনার জন্য ভিন্ন ভিন্ন ইমেজ ব্যবহার করতে হতো।
এখন সিএসএস ৩ তে গোলাকার কোনা তৈরি করা অনেক সহজ । সিএসএস ৩ তে border-radius প্রোপার্টি ব্যবহার করা হয় গোলাকার কোনা তৈরি করার জন্য ।

উদারন সরুপ

একটা <div> এর ভিতর গোলাকার ইলিমেন্ট লেখার জন্য


 div {
     border: 3px solid;
     border-radius: 30px;
 }

 

সিএসএস ৩ box-shadow প্রপার্টি

সিএসএস ৩ তে box-shadow প্রপার্টি ব্যবহার করা হয় বক্স এ ছাড়া দেয়ার জন্য
উদারন
একটা <div> এর ভিতর বক্স ছায়া ব্যবহার করার জন্য লিখতে হয়


div {
     box-shadow: 20px 12px 6px #888888;
 }

 

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

সিএসএস ৩ এর মাধমে তুমি খুব সহজ এই একটা ইমেজ কে বর্ডার হিসাবে ব্যবহার করতে পারবা বর্ডার-ইমেজ প্রপার্টি এর মাধ্যমে । এটা খুবেই ইজি ।

উদারন
একটা ইমেজ কে একটা বর্ডার হিসাবে ব্যবহার করতে হলে <div> এর ভিতর লিখতে হবে


div {
     -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
     -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
     border-image: url(border.png) 30 30 round;
 }

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%ac%e0%a6%b0%e0%a7%8d%e0%a6%a1%e0%a6%be%e0%a6%b0-css3-borders/