ลวดลายตกแต่งด้วยองค์ประกอบเสมือน
สร้างรูปทรงตกแต่ง เส้นแบ่ง และเลเยอร์ซ้อนทับด้วย ::before และ ::after โดยไม่ต้องเพิ่ม HTML
ลวดลายตกแต่งด้วยองค์ประกอบเสมือน เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
แนวคิดการตกแต่งด้วย CSS ล้วน
องค์ประกอบเทียมช่วยสร้างเอฟเฟกต์ตกแต่งที่หลากหลายโดยไม่ต้องเพิ่ม HTML เป้าหมายคือไม่ใช้ div เพิ่มเพื่อการตกแต่ง — ให้การตกแต่งด้วยภาพทั้งหมดอยู่ใน CSS
สามเหลี่ยม CSS
สร้างสามเหลี่ยมโดยใช้องค์ประกอบที่มีขนาดเป็นศูนย์ร่วมกับเส้นขอบโปร่งใส:
<div class="triangle"></div>ลูกศรคำแนะนำเครื่องมือ
ลูกศรของคำแนะนำเครื่องมือที่ใช้ ::before:
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>ตัวแบ่งส่วนแนวทแยง
ตัวแบ่งส่วนเอียงโดยใช้ skew หรือ clip-path กับ ::after:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>เส้นใต้ตกแต่ง
เอฟเฟกต์เส้นใต้แบบเคลื่อนไหวโดยใช้ ::after:
<a href="#">Hover me (underline animates in on :hover)</a>ป้ายกำกับด้วย ::after
ป้ายแจ้งเตือนแบบซ้อนทับโดยไม่ต้องเพิ่มองค์ประกอบ HTML:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>การซ้อนทับแบบไล่ระดับบนรูปภาพ
การซ้อนทับแบบไล่ระดับสีเข้มบนรูปภาพเพื่อให้อ่านข้อความได้ง่าย:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>เครื่องหมายถูกด้วย ::before
เครื่องหมายถูกแบบกำหนดเองสำหรับช่องทำเครื่องหมาย ซึ่งวาดด้วยเส้นขอบ CSS:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>แบนเนอร์ริบบิ้น
สร้างเอฟเฟกต์ริบบิ้นบนการ์ดโดยใช้ ::before ร่วมกับการกำหนดตำแหน่งแบบติดลบ:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>เอฟเฟกต์การโหลดแบบระยิบระยับ
เอฟเฟกต์ระยิบระยับสำหรับโครงร่างการโหลดด้วย CSS โดยไม่ใช้ JavaScript:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>ตรวจสอบความเข้าใจ
การใช้พร็อพเพอร์ตีร่วมกันแบบใดจะสร้างสามเหลี่ยมที่ชี้ขึ้นด้วย CSS ล้วน
สรุปทบทวน
องค์ประกอบเทียมช่วยสร้างรูปแบบตกแต่งที่หลากหลายโดยไม่ต้องเพิ่ม HTML เช่น ลูกศร การซ้อนทับ เส้นใต้แบบเคลื่อนไหว ป้ายกำกับ ริบบิ้น และเอฟเฟกต์ระยิบระยับ ทั้งหมดอาศัย content: "" + position: absolute + การใช้เส้นขอบ, clip-path และการแปลงรูปแบบอย่างสร้างสรรค์
คำถามที่พบบ่อย
บทเรียน “ลวดลายตกแต่งด้วยองค์ประกอบเสมือน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ลวดลายตกแต่งด้วยองค์ประกอบเสมือน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ลวดลายตกแต่งด้วยองค์ประกอบเสมือน”
สร้างรูปทรงตกแต่ง เส้นแบ่ง และเลเยอร์ซ้อนทับด้วย ::before และ ::after โดยไม่ต้องเพิ่ม HTML คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ลวดลายตกแต่งด้วยองค์ประกอบเสมือน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เนื้อหา ::before และ ::after
- ::placeholder ::selection และ ::marker
- ตัวนับ CSS ด้วย ::before
- ลวดลายตกแต่งด้วยองค์ประกอบเสมือน