เทมเพลต CSS: การ์ดเลย์เอาต์ (มุมโค้ง + เงา)
📝 การใช้งาน
เทมเพลตนี้เหมาะสำหรับการแสดงกล่องข้อมูล เช่น การ์ดสินค้า หรือโปรไฟล์ ใช้งานง่ายแม้สำหรับผู้เริ่มต้น ช่วยเพิ่มดีไซน์ให้ดูเรียบหรู
📘 คำอธิบาย
border-radius ใช้สำหรับทำมุมกล่องให้โค้งมน และ box-shadow ใช้เพิ่มเงาให้ดูมีมิติ เป็นรูปแบบที่ใช้งานได้หลากหลาย
✅ ตัวอย่าง
📄 โค้ด (บางส่วน)
<style>
.card {
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
padding: 1.5rem;
background-color: #ffffff;
max-width: 400px;
margin: 1rem auto;
}
</style>
<div class="card">
นี่คือกล่องแบบการ์ด
</div>
📦 โค้ด (HTML เต็ม)
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>ตัวอย่างการ์ดเลย์เอาต์</title>
<style>
.card {
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
padding: 1.5rem;
background-color: #ffffff;
max-width: 400px;
margin: 1rem auto;
}
</style>
</head>
<body>
<div class="card">
นี่คือตัวอย่างกล่องแบบการ์ดที่มีมุมโค้งและเงา
</div>
</body>
</html>
🎨 รูปแบบการออกแบบการ์ดหลากหลาย
นี่คือวิธีในการพัฒนารูปแบบการ์ดพื้นฐานให้ดียิ่งขึ้น โดยการปรับค่า box-shadow จะช่วยสร้างเอฟเฟกต์สามมิติได้มากขึ้น ตัวอย่างเช่น box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); จะให้เงาที่เด่นชัดขึ้น
🌈 สีและเอฟเฟกต์เมื่อชี้เมาส์
หากต้องการใส่สีให้การ์ด ให้เปลี่ยนค่า background-color และถ้าเพิ่ม .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } จะได้เอฟเฟกต์ลอยขึ้นเมื่อชี้เมาส์
📱 รองรับการแสดงผลแบบ Responsive
เพื่อปรับความกว้างของการ์ดให้เข้ากับขนาดหน้าจอ ให้ใช้ width: 90%; แทน max-width และสามารถใช้ media query เช่น @media (min-width: 768px) { .card { width: 50%; } } เพื่อจัดเลย์เอาต์แบบ 2 คอลัมน์บนเดสก์ท็อป
การจัดวางเนื้อหาภายในการ์ดก็สำคัญเช่นกัน โดยเพิ่ม display: flex; และ flex-direction: column; จะช่วยควบคุมการจัดเรียงองค์ประกอบภายในได้อย่างยืดหยุ่น โดยเฉพาะเมื่อมีปุ่มหรือภาพภายในการ์ด
รูปแบบการ์ดนี้สามารถนำไปใช้ในหลายสถานการณ์ เช่น รายการสินค้า ภาพตัวอย่างบทความ หรือวิดเจ็ตในแดชบอร์ด การปรับสมดุลระหว่างเงาและขอบโค้งจะช่วยให้ได้ดีไซน์ที่สอดคล้องกับโทนของเว็บไซต์