ফ্লোট, বর্ডার-রেডিয়াস, এবং পসিডো-এলিমেন্ট ব্যবহার করে চ্যাট বাবল (মেসেজ বক্স) তৈরি করা যায়।
উদাহরণ: চ্যাট মেসেজ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0 auto; max-width: 800px; padding: 0 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.message {
font-size: 18px; font-weight:500; border: 2px solid #dedede;
background-color: #55e4a8; color:rgb(0, 0, 0);
border-radius: 12px; padding: 10px; margin: 10px 0;
}
.darker { border-color: #ccc; background-color: rgb(111, 25, 182); color:white; }
.message::after { content: ""; clear: both; display: table; }
.profilePic{ width: 100%; }
.message img { float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; }
.message img.right { float: right; margin-left: 20px; margin-right:0; }
.timeStampRight { float: right; color: rgb(0, 0, 0); font-weight: bold; }
.timeStampLeft { float: left; color: rgb(255, 255, 255); font-weight: bold; }
</style>
</head>
<body>
<h1>চ্যাট মেসেজ উদাহরণ</h1>
<div class="message">
<img class="profilePic" src="https://i.picsum.photos/id/295/200/200.jpg">
<p>হ্যালো। আপনার ছুটির দিনগুলো কেমন যাচ্ছে?</p>
<span class="timeStampRight">৯:০০</span>
</div>
<div class="message darker">
<img class="profilePic" src="https://i.picsum.photos/id/255/200/200.jpg">
<p>ওরা খুব ভালো যাচ্ছে। জিজ্ঞেস করার জন্য ধন্যবাদ!</p>
<span class="timeStampLeft">৯:০৫</span>
</div>
<div class="message">
<img class="profilePic" src="https://i.picsum.photos/id/295/200/200.jpg">
<p>আপনি কি ছুটিতে কোথাও যাচ্ছেন?</p>
<span class="timeStampRight">৯:০৭</span>
</div>
<div class="message darker">
<img class="profilePic" src="https://i.picsum.photos/id/255/200/200.jpg">
<p>হ্যাঁ! ডিজনিল্যান্ড যাওয়ার চিন্তা করছি।</p>
<span class="timeStampLeft">৯:১০</span>
</div>
</body>
</html>
কোড ব্যাখ্যা
- .message (হালকা সবুজ): প্রেরক (সেন্ট) মেসেজ।
- .darker (পার্পল): প্রাপক (রিসিভড) মেসেজ, আলাদা রঙ।
- img.float left/right: প্রেরক/প্রাপকের জন্য প্রোফাইল পিক বাম/ডান।
- ::after { clear: both }: ফ্লোট ক্লিয়ার।
- timeStampRight/Left: টাইমস্ট্যাম্প পজিশন।
উন্নতি
Flexbox (`display: flex; align-items: flex-end; justify-content: flex-start/end`) ব্যবহার করলে ফ্লোট ছাড়া ক্লিনার লেআউট পাওয়া যায়।
