สิ่งที่ได้เรียนรู้จาก CSS ของดีไซน์ใหม่บน Facebook

 (ishadeed.com)
4 คะแนน โดย xguru 2020-04-03 | 4 ความคิดเห็น | แชร์ทาง WhatsApp

  • ใช้ SVG กับอวาตาร์เพื่อทำเงาด้านใน

  • ใช้ div spacer แทน margin

  • ใช้ CSS filter กับรูปภาพ

  • ใช้รูปภาพเงา (2x14 px) แทน box-shadow

  • ใช้ตัวแปร CSS จำนวนมาก

  • ใช้ Line Clamp เพื่อจำกัดจำนวนบรรทัดของข้อความหลายบรรทัด

  • ใช้ .hover-div แทน :hover

  • สร้างพื้นหลังไล่ระดับสีแบบไดนามิกจากสีหลัก

  • ใช้ box shadow หลายชั้น

บทความที่เกี่ยวข้อง

4 ความคิดเห็น

 
sduck4 2020-04-03

ช่วงนี้คงศึกษาด้านดีไซน์กันเยอะเหมือนกันนะครับ ดีไซน์ของ GeekNews ค่อยๆ ดีขึ้นเรื่อยๆ

วันนี้เหมือนฟอนต์จะเปลี่ยนไปนะครับ
 
xguru 2020-04-03

ยังไม่ถึงขั้นศึกษาจริงจังหรอก.. 555

เดิมทีพยายามจะไม่ใช้เว็บฟอนต์ถ้าเป็นไปได้ แต่ฟอนต์เกาหลีบน Windows มันไม่สวยเอามาก ๆ สุดท้ายก็ยอมแพ้แล้วเปลี่ยนมาใช้ Noto Sans ครับ
 
xguru 2020-04-03

มีบางอย่างที่ทำให้นึกสงสัยว่าเหตุผลที่ทำแบบนี้คืออะไร แต่ก็มีหลายอย่างที่น่าเอาไปอ้างอิงครับ

ดูท่าว่าต้องลองใช้ Line Clamp สักหน่อยแล้ว
 
xguru 2020-04-03

มีบางจุดที่อยากให้แสดงแค่จำนวนบรรทัดที่กำหนดเพื่อจัดการรูปภาพ ซึ่ง Line Clamp ตอบโจทย์มากครับ ถูกใจเลย

จะไม่ทำงานถ้าใช้เดี่ยว ๆ ต้องใช้คู่กับ overflow: hidden ด้วย

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;