আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম সিএসএস দিয়ে লেখায় ব্লার ইফেক্ট যুক্ত করুন। এবার দেখাবো কিভাবে সিএসএস৩ দিয়ে রাউন্ড এবং ইলিফটিকাল কর্নারের ব্যবহার দিয়ে সহজে রাউন্ড কর্নার বানানো যায়।তবে সেক্ষেত্রে প্রত্যেক ব্রাউজারের জন্য আলাদা কোড লিখে দিতে হয়। আজকে যে কোডগুলো দিব সেগুলো শুধু ক্রোমে কাজ করবে ।
তো চলুন দেখি কোডগুলো-
স্ট্যান্ডার্ড রাউন্ডের জন্য কোড হবে-
-webkit-border-radius: 10px;
প্রত্যেকের আলাদা আলাদা কর্নারের জন্য কোড হবে-
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
শুধু মাত্র ডান পাশের ইলিফটিকাল কর্নারের জন্য কোড হবে-
-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;
শুধু মাত্র বাম পাশের ইলিফটিকাল কর্নারের জন্য কোড হবে-
-webkit-border-top-left-radius: 50px 30px;
-webkit-border-bottom-left-radius: 50px 30px;
সবপাশে ইলিফটিকাল কর্নারের জন্য কোড হবে-
-webkit-border-radius: 36px 12px;
_________________________________________________________________________________________________________
নোটপ্যাডে নিচে থেকে লিখতে হবে-
<html><head><style type=”text/css”>
.shape {
background: #fe4902;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 auto;
/* এখানে যে শেপ দিতে চান সে কোড লিখুন */}
</style></head>
<body>
<div id=”shape”>
</div>
</body>
এই কোডগুলো নোটপ্যাডে লিখে উপরের যে কোন স্টাইলের কোডগুলো নিয়ে <style></style> এর মাঝে বসিয়ে round.html দিয়ে সেভ করুন। ব্রাউজারে ওপেন করে দেখুন। বুঝতে অসুবিধা হলে কমেন্টে জানান । ধন্যবাদ।
better
লেখাটা সুন্দর হয়েছে