30 Seconds of CSS

27 ก.พ. 2018 , 3,907 Views   , หมวดหมู่ WebDesign โค๊ดดิ้ง   , ป้ายกำกับ:


https://atomiks.github.io/30-seconds-of-css/

คอลเลกชันตัวอย่าง CSS ที่เป็นประโยชน์ซึ่งคุณสามารถเข้าใจได้ภายใน 30 วินาทีหรือน้อยกว่า

  1. Clearfix – โค้ด Clearfix แบบง่าย ๆ ไม่ต้องสร้าง <div> ใหม่ สำหรับตัดบรรทัดเวลาเขียน Layout ด้วย CSS float
  2. Custom text selection – โค้ด CSS สำหรับเปลี่ยนสีพื้นหลัง เวลาเรา highlight ตัวหนังสือบนเว็บ
  3. Easing variables – โค้ด CSS สำหรับทำให้การเขียน CSS Animation มีการหน่วงเวลาแบบเท่ ๆ มากขึ้น ซึ่งจะเนียนกว่าเวลาใช้ ease, ease-in, ease-out ปกติ
  4. Etched text – CSS สำหรับทำให้ตัวหนังสือดูเหมือนสลักไว้บนพื้นหลัง (บางคนเรียก Engraved)
  5. Gradient text – อันนี้แอดชอบ เป็นโค้ด CSS ไว้ทำตัวหนังสือแบบไล่สี
  6. Hairline border – โค้ด CSS สำหรับทำให้กรอบหนา 1px คม ๆ สวย ๆ (ถ้าใช้ “border: 1px” มันจะไม่หนา 1px เวลาเจอหน้าจอ Retina)
  7. Horizontal and vertical centering – โค้ด CSS สำหรับจัดกลางสิ่งที่ต้องการ ทั้งแนวตั้งและแนวนอนพร้อมกัน (ถ้าอยากจัดกลางแกนเดียว เอาโค้ดไปปรับได้)
  8. Mouse cursor gradient tracking – อันนี้เท่มาก เป็นการทำปุ่มด้วย CSS + JavaScript ให้ไล่สีโดยเปลี่ยนตามตำแหน่งเม้าส์ของเรา
  9. Overflow scroll gradient – CSS สำหรับใส่เอฟเฟ็กต์เงาขาว ๆ ไว้ใช้เวลาคอนเท้นท์ยังเลื่อนไม่สุด เว็บสมัยใหม่ใช้บ่อย
  10. Popup menu – เมนูแบบชี้แล้วจะปรากฏขึ้นมา อันนี้ใช้ CSS ล้วน ไม่ต้องมี JavaScript เลยด้วย
  11. Pretty text underline – ขีดเส้นใต้แบบไม่ให้เส้นขีดคร่อมตัวหนังสือ (ถ้าในภาษาไทย ก็เช่น สระอู สระอุ อะไรแบบนี้ครับ)
  12. Shape Separator – สร้างเส้นแบ่งเนื้อหาในเว็บสวย ๆ ด้วย SVG โดยใช้แค่โค้ด CSS ไม่ต้องมีไฟล์รูป
  13. System font stack – โค้ดสำหรับดึงฟ้อนต์ที่มีอยู่แล้วในทุกเครื่อง เพื่อให้เว็บโหลดเร็วและฟ้อนต์คม
  14. Triangle – วิธีวาดสามเหลี่ยมด้วย CSS (สำหรับคนที่ไม่ชอบใช้ CSS แอดแนะนำให้ใช้ตัวหนังสือ ASCII เลย ง่ายมากกก)
  15. Truncate text – วิธีตัดคำอัตโนมัติถ้าเกิน 1 บรรทัดด้วย CSS ใช้ได้ทุกบราวเซอร์ (แต่ถ้าอยากได้มากกว่า 1 บรรทัด ใช้ได้แค่ใน Chrome ด้วย line-clamp)

โค้ดข้อ 1. Clearfix นี่เมื่อก่อนแอดใช้บ่อยมาก เพราะมันสะอาดกว่าการสร้าง <div> อีกอันไว้ต่อท้ายมา Clearfix แต่พอยุคนี้มาถึง Flexbox ก็เริ่มใช้น้อยลงแล้วครับ (มาใช้ข้อ 7. แทน)

ข้อ 8. กับ 9. แอดคิดว่าเป็นเอฟเฟ็กต์บนเว็บที่มีประโยชน์มาก ตัว Gradient ตามปุ่มอาจจะดูแฟนซีไปนิด แต่เงาขาว ๆ เพื่อบอกให้ User เลื่อนอ่านต่อนี่มีประโยชน์มาก ๆ ครับ

 

ดูเพิ่มเติม

https://www.designil.com/css-code-snippet-30-sec.html

https://atomiks.github.io/30-seconds-of-css/


ป้ายกำกับ: