সিএসএস ৩ এর সাহায্যে তুমি গোলআকৃতির বর্ডার তৈরি করতে পারবা, এবং বক্স এ ছায়া দিতে পারবা, এবং যেকোন ইমেজ কে বর্ডার করতে পারবা ফটোশপ অথবা অন্য যে কোন ধরনের ডিজাইন প্রোগ্রাম ছাড়াই।
এই অংশে আমরা শিখব বর্ডার এর প্রপার্টিজ এর কিছু বিষয় সম্পর্কেঃ
- বর্ডার – রেডিয়াস
- বক্স – ছায়া
- বর্ডার – ইমেজ
এই কাজ গুল প্রায় সব ওয়েব ব্রাওজার দিয়েই করা যায়।
সিএসএস ৩ বর্ডার – রেডিয়াস প্রপার্টি- গোলাকার কোনা
সিএসএস ২ তে গোলাকার কোনা তৈরি করা অনেক কষ্টের ছিল । আমাদেরকে প্রতিটা কোনার জন্য ভিন্ন ভিন্ন ইমেজ ব্যবহার করতে হতো।
এখন সিএসএস ৩ তে গোলাকার কোনা তৈরি করা অনেক সহজ । সিএসএস ৩ তে 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;
}