เทมเพลต CSS การเพิ่มเส้นขอบใต้หัวข้อ
📝 การใช้งาน
เทมเพลตนี้จะแสดงวิธีการใช้คุณสมบัติ border-bottom ใน CSS เพื่อเพิ่มเส้นขอบใต้หัวข้อ.
📘 คำอธิบาย
โค้ด CSS ข้างต้นใช้คุณสมบัติ border-bottom เพื่อเพิ่มเส้นขอบใต้ส่วน h1. คุณสามารถปรับสีและความหนาได้ตามต้องการ.
🔹 โค้ดบางส่วน
<h1>หัวข้อ</h1>
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
💻 โค้ด HTML ทั้งหมด
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>CSS: การเพิ่มเส้นขอบใต้หัวข้อด้วย border-bottom</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>หัวข้อ</h1>
<p>เทมเพลตนี้จะแสดงวิธีการใช้คุณสมบัติ <code>border-bottom</code> ใน CSS เพื่อเพิ่มเส้นขอบใต้หัวข้อ.</p>
</body>
</html>
💻 โค้ดทำงานทั้งหมด
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>CSS: การเพิ่มเส้นขอบใต้หัวข้อด้วย border-bottom</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
h1 {
border-bottom: 2px solid #000;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>หัวข้อ</h1>
<p>เทมเพลตนี้จะแสดงวิธีการใช้คุณสมบัติ <code>border-bottom</code> ใน CSS เพื่อเพิ่มเส้นขอบใต้หัวข้อ.</p>
</body>
</html>
🎨 เทคนิคการออกแบบหัวเรื่องในทางปฏิบัติ
การใช้ border-bottom เพื่อประดับหัวเรื่องเป็นวิธีที่มีประสิทธิภาพในการแบ่งส่วนเนื้อหาให้ชัดเจน พร้อมสร้างดีไซน์ที่ดูเรียบหรู การตกแต่งเส้นอย่างเหมาะสมสามารถแสดงโครงสร้างลำดับของเนื้อหาได้อย่างชัดเจน
🌈 รูปแบบการออกแบบหลากหลาย
นอกจากเส้นทึบแบบ solid แล้ว ยังสามารถเปลี่ยนเป็น dotted (เส้นจุด), dashed (เส้นประ) หรือ double (เส้นคู่) ได้อีกด้วย สีของเส้นสามารถเปลี่ยนให้เข้ากับธีมของเว็บไซต์ เช่น #3498db (น้ำเงิน) หรือ #e74c3c (แดง) แทน #000 (ดำ)
📏 ขนาดที่เหมาะสม
ความหนาของเส้นควรอยู่ระหว่าง 1px ถึง 3px และสามารถใช้ padding-bottom เพื่อปรับระยะห่างระหว่างข้อความกับเส้น การกำหนดความหนาแตกต่างกันตามระดับหัวเรื่อง (h1–h6) จะช่วยให้โครงสร้างของเนื้อหาชัดเจนขึ้น เช่น h1 ใช้ 3px, h2 ใช้ 2px
✨ เทคนิคตกแต่งขั้นสูง
สามารถใช้ linear-gradient() เพื่อสร้างเส้นแบบไล่สี หรือใช้ร่วมกับ box-shadow เพื่อสร้างเอฟเฟกต์สามมิติ และการใช้ pseudo-element อย่าง ::after ก็สามารถเพิ่มความเป็นเอกลักษณ์ให้กับดีไซน์ได้
การตกแต่งหัวเรื่องด้วยเส้นเป็นแนวทางที่ช่วยในการนำสายตา แต่ถ้ามากเกินไปอาจทำให้ดูรกได้ ควรรักษาความสอดคล้องของสไตล์ทั่วทั้งเว็บไซต์ และใช้เฉพาะในส่วนที่สำคัญอย่างเหมาะสม