CSS বর্ডার, বর্ডার-রেডিয়াস এবং সুডো-এলিমেন্ট ব্যবহার করে ডিভাইসের ফ্রেম (ফোন, ট্যাবলেট, ল্যাপটপ) তৈরি করা যায়।
উদাহরণ: মোবাইল ডিভাইস লুক
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mobileDevice {
position: relative;
width: 360px; height: 400px;
margin: auto;
border: 16px rgb(7, 80, 35) solid;
border-top-width: 60px; border-bottom-width: 60px;
border-radius: 36px;
}
.mobileDevice:after {
content: ''; display: block;
width: 35px; height: 35px;
position: absolute; left: 50%; bottom: -65px;
transform: translate(-50%, -50%);
background: #333; border-radius: 50%; border:2px solid rgb(200, 255, 0);
}
.mobileDevice .screen {
width: 360px; height: 400px; background: white;
}
</style>
</head>
<body>
<h1 style="text-align: center;">ডিভাইস লুক উদাহরণ</h1>
<div class="mobileDevice">
<div class="screen">
<iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" />
</div>
</div>
</body>
</html>
কোড ব্যাখ্যা
- border-top/bottom-width: ফোনের উপরে/নিচে বেজেল তৈরি করে।
- ::after সুডো-এলিমেন্ট: হোম বাটন তৈরি করে।
- .screen + iframe: ভিতরে যেকোনো ওয়েবসাইট এম্বেড করা যায়।
বিস্তারিত
ট্যাবলেট বা ল্যাপটপের জন্য প্রস্থ/উচ্চতা এবং বর্ডার-রেডিয়াস পরিবর্তন করে একই প্যাটার্নে তৈরি করা যায়।
