CSS box model เป็น box ที่คลุมทุกๆ element ของ HTML ไว้ การจะสร้าง Layout ที่ดี ให้กับเว็บไซต์ เราจำเป็นต้องเข้าใจถึง CSS box model CSS box model ประกอบด้วยส่วนต่างๆ ดังนี้ content area : ส่วนที่แสดง text หรือ รูปภาพ padding : เป็นช่องว่างที่อยู่ภายใน border ซึ่งคั่นระหว่าง border กับ content ถัดไป border : อยู่รอบ content area และ padding ถ้าสามารถเห็น border ได้ เราจะเห็นการแยกชัดเจนระหว่าง padding กับ margin margin : เป็นช่องว่างที่อยู่ภายนอก…
Author: nemopear
I'm Frontend Developer, Interest in design, Love drawing, Love running & cycling.
การใช้ Web font ใน Email
เวลาที่ต้องจัดหน้าตาของ Email ให้มันดูดี มีดีไซน์เก๋ สีต้องได้ font ต้องมี เว็บหลักเราใช้ font แบบไหน เราก็อยากจะใช้ font แบบนั้นในอีเมลของเราด้วย อีเมลที่ได้รับบางครั้งก็มีดีไซน์ที่สวยงามมาก แต่ว่าเป็นการแนบเป็นรูปใหญ่ๆ รูปเดียวเลย ซึ่งมันก็มีข้อเสียนะ มันทำให้บางทีลูกค้าก็อาจจะพลาดสาระสำคัญไป ในกรณีที่ต้องคลิก Unblock เพื่อดูรูป แต่เขาไม่ได้คลิก เขาก็จะไม่เห็นข้อความที่เราต้องการจะสื่อ และอีกอย่างพอรูปใหญ่มากๆ ก็โหลดนานไปอีก การทำ Web font ให้อีเมลก็เป็นอีกทางเลือกหนึ่ง ข้อดีคือตัวอักษรก็จะคมชัดกว่าตัวอักษรที่ทำเป็นรูป แก้ไขง่าย เวลาเปลี่ยนแปลง text ก็ไม่ต้องไปทำรูปมาใหม่ อีกทั้งก็ยังช่วยลด Loading time แต่มันก็ขึ้นอยู่กับ จำนวน Web font ที่เราใช้ในอีเมลนะ ถ้าเรียกใช้เยอะก็โหลดนานอยู่ ข้อดีก็มี ข้อเสียก็มีบ้าง อยากใช้ก็อยากใช้ แต่มันมีข้อจำกัดในแต่ละ Email clients ปกติใน Email clients จะมี Font default…
Website Tour JS and jQuery plugins
Shepherd It is open source and use Tether. Bootstrap Tour It use Bootstrap Popovers.
Utility Class in Bootstrap 4
Utility: Borders border-*-0 border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white rounded rounded-circle rounded-* Utility: Colors bg-primary bg-secondary bg-success bg-info bg-warning bg-danger bg-light bg-dark bg-white text-primary text-secondary text-success text-info text-warning text-danger text-light text-dark Utility: Display d-*-block d-*-flex d-*-inline d-*-inline-block d-*-inline-flex d-*-none d-*-table d-*-table-cell d-print-… Utility: Flexbox flex-*-column flex-*-column-reverse flex-*-row flex-*-row-reverse flex-*-nowrap flex-*-wrap flex-*-wrap-reverse justify-content-*-start…
Resized image blurred in Chrome
มีโอกาสได้ประสบปัญหา Image resize ด้วย CSS แล้วภาพมันเบลอ ซึ่งเป็นเฉพาะใน Chrome ด้วย ซึ่งวิธีแก้ก็คือ เพิ่ม css property 2 ตัวนี้เข้าไป backface-visibility: hidden; transform: translateZ(0); มีตัวอย่างจ้า
ตัดคำแล้วต่อด้วย … (dot dot dot)
เรามักจะเจอเว็บไซต์ที่แสดง Teaser แบบเป็น grid เป็น card บางทีการจะนำเนื้อหาทั้งหมดอยู่ในกล่องเดียวมันจะยาวมากๆ จึงมีความจำเป็นต้องตัดเนื้อหาบางส่วนออกไป แล้วเพิ่ม ‘…’ มีลิงก์คลิกไปอ่านต่อในหน้าเนื้อหาแทน มีวิธีทำอยู่หลายทาง แต่ละทางก็มีข้อดีข้อเสียแตกต่างกันไป ซึ่งที่เราใช้บ่อยๆ จะมี 2 แบบ วิธีแรก ใช้ Pure CSS โดยใช้ property text-overflow white-space: nowrap; overflow: hidden; text-overflow: ellipsis; วิธีนี้จะตัดข้อความยาวๆ ให้เหลือ 1 บรรทัด และเพิ่ม ‘…’ ต่อท้าย ก็เคยสงสัยว่า Pure Css เฉยๆ มันสามารถ ตัดข้อความให้เหลือมากกว่า 1 บรรทัด แล้วต่อด้วย … ได้มั้ย ก็พบว่า มันทำได้ เขาใช้ property -webkit-line-clamp แต่ปัจจุบันก็ยังไม่ Support…
ตัวอย่าง Bar Chart Animation ที่น่าใช้ (JS & CSS)
Progress bar ใน Dialog คล้าย Max OSX See the Pen Mac OSX Copy Dialog by Andrés Rendón (@arendon) on CodePen. Bar Chart แบบคลิกดู Detail ของแต่ละ Bar ได้ See the Pen Animated Data Bar Chart & Graph by Ettrics (@ettrics) on CodePen.
รวม Bar Chart แบบ Pure CSS ที่น่าใช้
รวมกราฟแบบบาร์ ที่มี Animation ง่ายๆ ไม่ซับซ้อน ใช้แค่ CSS
จริงๆ แล้วมันอาจจะมีมากกว่านี้ แต่เลือกอันที่โดนใจมา : D
ถ้าเจออีกก็จะพยายามสะสมไว้ในนีน๊า
