องค์ประกอบการ์ดด้วยคุณสมบัติที่กำหนดเองของ CSS
สร้างองค์ประกอบการ์ดที่ยืดหยุ่น ซึ่งขับเคลื่อนทั้งหมดด้วยคุณสมบัติที่กำหนดเองของ CSS เพื่อปรับธีมได้ง่าย
องค์ประกอบการ์ดด้วยคุณสมบัติที่กำหนดเองของ CSS เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
เป้าหมายการออกแบบ
คอมโพเนนต์การ์ดคือคอนเทนเนอร์ที่บรรจุเนื้อหาในตัวเอง เป้าหมายการออกแบบ ได้แก่ การใช้ระยะห่างภายในอย่างสม่ำเสมอด้วยโทเคนระยะห่าง สีที่ปรับตามธีมได้ด้วยโทเคนชื่อแทน การปรับขนาดตามพื้นที่แสดงผลโดยไม่ใช้ JS และการรองรับรูปแบบต่าง ๆ (ยกนูน มีเส้นขอบ เรียบ) ผ่านพร็อพเพอร์ตีแบบกำหนดเองของ CSS
โครงสร้างพื้นฐานของการ์ด
ใช้คลาส .card เพียงคลาสเดียวร่วมกับพร็อพเพอร์ตีแบบกำหนดเองของ CSS สำหรับค่าที่ปรับได้ องค์ประกอบภายใน (ส่วนหัว เนื้อหา ส่วนท้าย) จะสืบทอดค่าจากขอบเขตของการ์ด วิธีนี้จำกัดความคลาดเคลื่อนของสไตล์ระหว่างอินสแตนซ์ของการ์ดทั่วทั้งโค้ดเบส
<div class="card">
<h3>Card Title</h3>
<p>Card content styled via custom properties.</p>
</div>
คลาสรูปแบบ
แทนที่พร็อพเพอร์ตีแบบกำหนดเองระดับการ์ดด้วยคลาสรูปแบบ แทนการเขียนชุดกฎแยกกัน คลาสรูปแบบจำเป็นต้องกำหนดใหม่เฉพาะตัวแปรที่เปลี่ยนแปลงเท่านั้น พร็อพเพอร์ตีที่ไม่เปลี่ยนแปลงจะสืบทอดค่าพื้นฐานโดยอัตโนมัติโดยไม่ต้องเขียนซ้ำ
<div class="card card--elevated">
<p>Elevated variant</p>
</div>
<div class="card card--outlined">
<p>Outlined variant</p>
</div>
การกำหนดธีมให้การ์ด
เมื่อคลาสธีมขององค์ประกอบแม่เปลี่ยนค่า --color-surface การ์ดทั้งหมดภายในธีมนั้นจะอัปเดตพื้นหลังโดยอัตโนมัติ ไม่จำเป็นต้องเขียนโค้ดแทนที่ธีมเฉพาะการ์ด ระบบโทเคนชื่อแทนจะจัดการให้โดยไม่ต้องดำเนินการเพิ่มเติม
ระยะขอบภายในการ์ดแบบปรับตามขนาดหน้าจอ
ใช้ clamp() ร่วมกับการแทนที่คุณสมบัติกำหนดเองเพื่อกำหนดระยะขอบภายในการ์ดแบบลื่นไหล: --card-padding: clamp(1rem, 4vw, 2rem) หน้าจอขนาดใหญ่จะมีระยะขอบภายในที่กว้างขึ้น ส่วนหน้าจอขนาดเล็กจะใช้ระยะขอบภายในขั้นต่ำ โดยควบคุมทั้งหมดจากคำจำกัดความของโทเค็นเพียงแห่งเดียว
เลย์เอาต์กริดการ์ด
กริดการ์ดที่ใช้ CSS Grid auto-fill ร่วมกับ minmax จะสร้างเลย์เอาต์ที่จัดระเบียบตัวเอง: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) การ์ดจะเติมพื้นที่ว่างที่มีอยู่และขึ้นบรรทัดใหม่โดยอัตโนมัติโดยไม่ต้องใช้จุดแบ่งของมีเดียคิวรี
อัตราส่วนกว้างยาวของรูปภาพ
รักษาอัตราส่วนกว้างยาวของรูปภาพในการ์ดให้สม่ำเสมอด้วย aspect-ratio: 16/9 ที่ตัวครอบรูปภาพ รูปภาพจะเติมพื้นที่ของตัวครอบด้วย object-fit: cover ทำให้ความสูงของการ์ดเท่ากันโดยไม่ขึ้นกับขนาดของรูปภาพต้นฉบับ
สถานะการโต้ตอบ
เพิ่มสถานะเมื่อวางเมาส์เหนือและเมื่อโฟกัสภายใน ซึ่งจะยกการ์ดขึ้นเล็กน้อยด้วย transform: translateY(-2px) และเพิ่ม box-shadow ทำให้เคลื่อนไหวด้วย transition: transform 200ms ease, box-shadow 200ms ease เพื่อให้การตอบสนองราบรื่นและเหมาะกับการประมวลผลของคอมโพสิตเตอร์
ลิงก์การ์ดที่เข้าถึงได้
ทำให้ทั้งการ์ดคลิกได้ด้วยลิงก์แบบขยาย โดยกำหนดตำแหน่งของการ์ดเป็นแบบสัมพัทธ์ และกำหนดลิงก์หลักเป็นแบบวางตำแหน่งสัมบูรณ์ด้วย inset: 0 โปรแกรมอ่านหน้าจอจะอ่านข้อความของลิงก์ ส่วนเลเยอร์ทับจะครอบคลุมการ์ดในมุมมองของผู้ใช้เมาส์
สถานะกำลังโหลด
เพิ่มรูปแบบ .card--loading ที่แทนที่เนื้อหาด้วยเอฟเฟกต์แสงเคลื่อนที่แบบโครงร่าง โดยใช้ภาพเคลื่อนไหวของ CSS: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) ร่วมกับ background-size: 200% และ animation: shimmer 1.5s infinite
การ์ดโหมดมืด
ในโหมดมืด โทเค็น --color-surface จะเปลี่ยนจากสีอ่อนไปเป็นสีเข้มโดยอัตโนมัติ หากการ์ดที่ยกสูงอาศัย box-shadow เพื่อสร้างมิติ ซึ่งจะไม่เด่นชัดบนพื้นหลังสีเข้ม ให้เพิ่มเส้นขอบที่ละเอียดอ่อนหรือเพิ่มความต่างของสีพื้นผิว เพื่อให้มองเห็นระดับการยกสูงในโหมดมืดได้ชัดเจนขึ้น
ตรวจสอบความรู้
คุณสมบัติกำหนดเองของ CSS ช่วยให้สร้างรูปแบบย่อยของการ์ดได้อย่างไรโดยไม่ต้องทำชุดกฎทั้งหมดซ้ำ
สรุป
การสร้างคอมโพเนนต์การ์ดด้วยคุณสมบัติกำหนดเองของ CSS ทำให้ได้องค์ประกอบพื้นฐานของส่วนติดต่อผู้ใช้ที่ยืดหยุ่น เปลี่ยนธีมได้ และรองรับรูปแบบย่อย ตัวแปรพื้นฐานกำหนดค่าเริ่มต้น คลาสรูปแบบย่อยจะแทนที่เฉพาะค่าที่ต้องการ และคลาสธีมจะแทนที่ค่าในภาพรวม เมื่อนำมารวมกับการกำหนดขนาดแบบตอบสนอง ลิงก์ที่เข้าถึงได้ และสถานะกำลังโหลด รูปแบบนี้จึงขยายใช้งานได้อย่างเป็นระเบียบในระบบการออกแบบต่าง ๆ
คำถามที่พบบ่อย
บทเรียน “องค์ประกอบการ์ดด้วยคุณสมบัติที่กำหนดเองของ CSS” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “องค์ประกอบการ์ดด้วยคุณสมบัติที่กำหนดเองของ CSS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “องค์ประกอบการ์ดด้วยคุณสมบัติที่กำหนดเองของ CSS”
สร้างองค์ประกอบการ์ดที่ยืดหยุ่น ซึ่งขับเคลื่อนทั้งหมดด้วยคุณสมบัติที่กำหนดเองของ CSS เพื่อปรับธีมได้ง่าย คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “องค์ประกอบการ์ดด้วยคุณสมบัติที่กำหนดเองของ CSS” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- องค์ประกอบการ์ดด้วยคุณสมบัติที่กำหนดเองของ CSS
- การจัดรูปแบบโมดัลและกล่องโต้ตอบ
- รูปแบบเมนูดรอปดาวน์และป๊อปโอเวอร์
- องค์ประกอบแท็บด้วยเทคนิค :checked เทียบกับ JS