ในการสร้าง Card ด้วย 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; margin:20px; } .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); width: 40%; max-width: 300px; background-color: rgb(56, 185, 185); } .card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .Designation { padding: 2px 16px; background-color: rgb(107, 43, 167); color:white; } .card img{ width: 300px; height: 250px; } </style> </head> <body> <h1>Card Example</h1> <div class="card"> <img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png"> <div class="Designation"> <h3>Britney Smith</h3> <p>Senior Designer</p> </div> </div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
