เคล็ดลับ CSS

รวมเคล็ดลับที่ไม่ค่อยเห็นในทูทอเรียลอื่น

• เอฟเฟกต์การพิมพ์ (เคอร์เซอร์กะพริบ)

• ฟิลเตอร์ Drop-Shadow();

• scroll-behavior: smooth; การเลื่อนแบบนุ่มนวล

• การจัดกึ่งกลาง

• เคอร์เซอร์แบบรูปภาพ/อีโมจิ

• ตัดข้อความให้สั้นลง

• -webkit-line-clamp : ตัดข้อความตามจำนวนบรรทัดที่กำหนด

• ::selection

• resize:both; ทำให้ทุกอย่างปรับขนาดได้

• สร้าง Modal ด้วย :target

• calc()

• ซีเลกเตอร์ :empty

• สกอลล์บาร์แบบกำหนดเอง

• position: sticky;

• CSS Scroll Snap

• ทูลทิปแบบไดนามิกด้วย attr()

• เปลี่ยนสีเคอร์เซอร์ด้วย caret-color

• ::in-range, ::out-of-range

• สร้างตัวอักษรหัวข้อพร้อมพื้นหลังสวย ๆ ด้วย background-clip

[alstjr7375]

ไม่เคยรู้เรื่องเอฟเฟกต์การพิมพ์มาก่อนเลย แต่มีประโยชน์ดีนะ

[xguru]

เดี๋ยวนี้การจัดกึ่งกลางมักเขียนกัน 3 บรรทัดในบทความกัน แต่แบบนี้ทำได้แค่ 2 บรรทัดเหมือนกันนะครับ

.center {

display: grid;

place-items: center;

}