วิธีออกแบบ UI Card เรียบง่ายและสวยงามสำหรับเว็บไซต์

เรียนรู้การออกแบบ UI Card component เรียบง่าย สวยงาม ด้วย HTML และ CSS พร้อมเทคนิค linear-gradient ทำให้ข้อความเด่นขึ้นโดยไม่ทำให้การ์ดมืดเกินไป

UI Card เป็น UI component ที่ทำหน้าที่เหมือน "อาหารว่าง" บนเว็บไซต์ โดยทั่วไปประกอบด้วยข้อความ รูปภาพ ไอคอน และ interactive elements (ปุ่มหรือลิงก์)

UI Card สามารถเรียบง่ายหรือซับซ้อนได้ตามต้องการ

วันนี้เราจะออกแบบ UI Card เรียบง่ายแบบนี้:

UI Card นี้มี background image ทิวทัศน์ สอง text elements (หัวข้อและคำอธิบาย) และหนึ่ง clickable interface: ใส่การ์ดทั้งใบเป็นลิงก์

หาภาพทิวทัศน์สวยๆ ฟรีได้ที่ Unsplash.com

ขั้นตอน 1: HTML

เพิ่ม HTML นี้ใน document (ภายใน <body>):

<a class="card-link" href="#"> <div class="card"> <div class="card-overlay"></div> <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Landscape photography of the Northern Sea of Denmark" /> <div class="card-text-container"> <div class="card-text-wrapper"> <h3 class="card-title">The North Sea of Denmark</h3> <p class="card-description"> Explore the beautiful & dynamic North Sea of Denmark — where every day is a new experience. </p> </div> </div> </div> </a>

สำคัญคือ wrap ทั้งการ์ดไว้ใน anchor element เพราะต้องการให้ทั้งการ์ดเป็นลิงก์คลิกได้

เปลี่ยน href="#" เป็น slug จริง เช่น href="/northern-sea-of-denmark"

ขั้นตอน 2: CSS

CSS สำหรับ UI Card ตัวอย่าง พร้อมคำอธิบายส่วนสำคัญ:

.card { position: relative; height: 350px; max-width: 400px; } .card-thumbnail { height: 100%; max-width: 100%; display: block; object-fit: cover; } .card-text-container { width: 100%; position: absolute; left: 0; bottom: 10%; z-index: 2; display: flex; flex-direction: column; align-items: center; } .card-text-wrapper { padding-left: 1rem; padding-right: 1rem; max-width: 300px; color: white; } .card-title { font-size: 1.45rem; margin-bottom: 0; } .card-description { font-size: 1.15rem; line-height: 1.4; margin-top: 0.5rem; } .card-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); z-index: 1; }

CSS ทำงานอย่างไร:

• .card: responsive ด้วย max-width 400px กว้างไม่เกิน 400px แต่หดได้เมื่อจอเล็กกว่า height คงที่ 350px
• .card-thumbnail: object-fit: cover ป้องกันรูปบิดเบี้ยวเมื่อ aspect ratio เปลี่ยน ลองลบออกดู (จะแย่)
• .card-text-container: bottom: 10% ทำให้ตำแหน่งข้อความจากขอบล่างคงที่ ใกล้เคียง 100% ทุกขนาดจอ z-index: 1 วางข้อความอยู่เหนือ overlay
• .card-text-wrapper: ควบคุม max-width ข้อความ 300px (น้อยกว่า card 25%) padding ซ้าย-ขวา 1rem เว้นระยะจากขอบจอ (สำคัญบนมือถือ)
• .card-overlay: ข้อความสีขาวบนพื้นหลังสว่างอ่านยาก ต้องมี dark contrast แต่ไม่อยากทำให้รูปมืดหมด ใช้ linear-gradient สร้าง overlay สว่างไปมืด ส่วนบนโปร่งใส ส่วนล่างมืดพอให้ข้อความเด่น

เคล็ดลับ & ไอเดีย

บน UI Card ที่เน้นภาพถ่าย สำคัญคืออย่า擁อัด (เช่น ขนาดข้อความ) CSS styling ต้องคำนึงถึง context ของการ์ดแต่ละอัน

ใช้สไตล์จากบทช่วยสอนเป็นแนวทาง ไม่ใช่กติกาแข็งข้าม ด้านล่างเป็น guidelines ทั่วไป:

• Spacing สำคัญ: ขาด white space ทำให้ดูแคบแค้น UI ต้อง "หายใจ" ได้ ใช้ spacing (padding, margins, line-height) มากที่สุดเท่าที่ทำได้ (โดยไม่ฝ่าฝืน Law of Proximity)
• Typography: ไม่ว่าจะ format ข้อความยังไง ต้องอ่านง่ายทุกขนาดจอ แทนที่จะเพิ่ม font-size ให้เพิ่ม color contrast ระหว่างข้อความและพื้นหลัง (เหมือน .card-overlay)
• Clickable interfaces ใช้งานง่าย: ถ้าอีเลเมนต์บนการ์ดต้องให้คลิก ทำให้ใหญ่พอสำหรับเมาส์หรือนิ้ว

นอกจากนี้ ไม่มีกติกา UI Card design มีแค่ context เท่านั้น