CSS দিয়ে ব্রাউজার উইন্ডো উদাহরণ তৈরি

CSS ব্যবহার করে ব্রাউজারের টুলবার, অ্যাড্রেসবার, এবং কন্টেন্ট এরিয়া সহ একটি মক ব্রাউজার উইন্ডো তৈরি করা যায়।

উদাহরণ: ব্রাউজার উইন্ডো মকআপ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
  * { box-sizing: border-box; }
  .menuBar { border: 3px solid #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; }
  .menuRow { padding: 10px; background: #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; }
  .browserField { float: left; }
  .left { width: 15%; } .right { width: 10%; } .middle { width: 75%; }
  .menuRow:after { content: ""; display: table; clear: both; }
  .menuBarDots { margin-top: 4px; height: 12px; width: 12px; background-color: #bbb; border-radius: 50%; display: inline-block; }
  input[type=text] { width: 100%; border-radius: 3px; border: none; background-color: white; margin-top: -8px; height: 25px; color: #666; padding: 5px; }
  .menuDots { width: 5px; height: 5px; background-color: #aaa; margin: 3px 0; display: block; border-radius: 50%; }
  .content { padding: 10px; }
</style>
</head>
<body>
  <div class="menuBar">
    <div class="menuRow">
      <div class="browserField left">
        <span class="menuBarDots" style="background:#ED594A;"></span>
        <span class="menuBarDots" style="background:#FDD800;"></span>
        <span class="menuBarDots" style="background:#5AC05A;"></span>
      </div>
      <div class="browserField middle">
        <input type="text" value="https://demo.com/">
      </div>
      <div class="browserField right">
        <div style="float:right">
          <span class="menuDots"></span><span class="menuDots"></span><span class="menuDots"></span>
        </div>
      </div>
    </div>
    <div class="content">
      <h1>নমুনা টেক্সট</h1>
      <h2>আমাদের ওয়েবসাইটে স্বাগতম</h2>
    </div>
  </div>
</body>
</html>

কোড ব্যাখ্যা

• .menuBar: ব্রাউজারের টপ বার (টাইটেলবার + টুলবার)।
• .menuRow + float লেআউট: বামে ক্লোজ/মিনিমাইজ/ম্যাক্সিমাইজ বাটন, মাঝে অ্যাড্রেসবার, ডানে মেনু ডটস।
• ::after { clear: both }: ফ্লোট ক্লিয়ার।
• .menuBarDots: ম্যাক স্টাইল ট্রাফিক লাইট বাটন।

ব্যবহার ক্ষেত্র

স্ক্রিনশট প্রেজেন্টেশন, ডেভেলপার টুল ডেমো, বা ডিজাইন মকআপে ব্যবহার করা হয়।