Browser Window Mockup: จำลอง UI เบราว์เซอร์ด้วย CSS
สร้างแถบที่อยู่ (address bar) พร้อมปุ่มควบคุม (ปิด/ย่อ/ขยาย) และพื้นที่เนื้อหา ใช้ Flexbox/Float จัด layout ใส่ iframe หรือเนื้อหาจริงได้
โค้ดตัวอย่าง
<!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>Sample Text</h1><h2>Welcome to our website</h2></div>
</div>
</body>
</html>ปรับปรุงทันสมัย (Modern Approach)
- ใช้ Flexbox แทน float – จัดการ alignment ง่ายกว่า
- ใช้
gapแทน margin - ปุ่ม traffic light (macOS) ทำด้วย
box-shadowหรือradial-gradientให้立体感 - เพิ่ม
backdrop-filter: blur(10px)ให้แถบที่อยู่โปร่งแสง
การใช้งาน
- Demo/Preview เว็บไซต์ใน Portfolio
- Documentation แสดงตัวอย่าง UI
- CodePen/JSfiddle style embed
- Screenshot generator
