CSS Flexbox คืออะไร + สอนวิธีใช้

รู้จักกับ CSS Flexible Box Layout Module

ใน CSS 2.1 เราจะใช้สิ่งที่เรียกว่า “Layout Mode” ในการกำหนดขนาด และจัดตำแหน่งของกล่องต่างๆ ซึ่ง layout mode นี้จะประกอบไปด้วย

• blockใช้จัดตำแหน่งเนื้อหาให้…

Bootstrap คืออะไร + สอนวิธีใช้แบบเข้าใจง่าย

หลายๆ คน คงเคยได้ยินมาว่า Bootstrap ช่วยให้เราเขียนเว็บได้ไวขึ้นใช่มั้ยครับ บางคนอาจจะเคยลองใช้มาบ้างแล้ว แต่ถ้าใครยังไม่เคย และอยากลองใช้ดูบ้าง วันนี้เราจะมาพูดถึงเจ้า front-end framework ตัวนี้กันครับ ทำไมทั่วโลกเค้าถึงนิยมใช้ มันมีข้อดี…

@font-face คืออะไร + วิธีทำให้ใช้ได้ Cross-Browser

หากพูดถึงเรื่อง “@font-face” หลายๆ คน คงจะรู้จักกันดีใช่มั้ยครับ บางคนอาจจะสงสัยว่า ผมจะเขียนบทความเรื่องนี้อีกทำไม เว็บอื่นๆ เค้าเขียนไปเยอะแล้ว แต่ผมเชื่อว่ายังมีบางคน ที่เพิ่งจะเริ่มศึกษามัน หรือบางคนที่ใช้เป็นแล้ว แต่ยังอยากรู้ที่มาของมัน…

X-UA-Compatible Meta Tag คืออะไร + สอนวิธีใช้

เชื่อว่าหลายๆ คน คงจะเคยเห็น X-UA-Compatible meta tag กันมาบ้างแล้ว แต่หากยังไม่รู้ว่ามันเอาไว้ทำอะไร ไม่ใส่แล้วจะเป็นไรมั้ย บทความนี้มีคำตอบให้ครับ

ทำไมต้องมี X-UA-Compatible Meta Tag ?

ตัดคำโดยใช้ CSS text-overflow และวิธีตัดคำหลายบรรทัด

บ่อยครั้ง ที่เราต้องหาทางตัดข้อความให้สั้นลง เพื่อเป็นการควบคุมไม่ให้มันยาวเกินไปจนทำให้ layout เสีย ทางเลือกของเราก็มีหลายทางด้วยกัน ไม่ว่าจะเป็นการตัดคำด้วยภาษาฝั่ง server อย่าง PHP การตัดคำที่ฝั่ง client ด้วย CSS รวมไปถึง Javascript

Skeuomorphism ความหมายคืออะไร?

คำว่า “Skeuomorphism” อาจไม่ค่อยคุ้นหูสำหรับใครหลายๆ คน แต่สำหรับ Web Designer แล้ว คงจะต้องรู้จักกันดีอย่างแน่นอน เพราะมันเป็นแนวการออกแบบที่ได้รับความนิยมเป็นอย่างมากในช่วง 2–3 ปีที่ผ่านมา คำถามก็คือ มันจะยังได้รับความนิยมไปอีกนานแค่ไหน ?

CSS3 Transitions คืออะไร + สอนวิธีใช้

โดยปกติแล้ว เวลา value ของ css property เปลี่ยนไป มันก็จะส่งผลกับ html element นั้นในทันที ตัวอย่างเช่น เดิมกล่องหนึ่งมีพื้นหลังสีแดง และมีขนาด 100px ทั้งความกว้างและความสูง

.box {
    background: red;
    width: 100px;
    height: 100px…

ใส่ Icons ใน Bootstrap ง่ายๆ ด้วย Font Awesome

line-height ใช้หน่วยอะไรดีที่สุด ?

เรื่องของ line-height นั้น เป็นเรื่องที่หลายๆ คนมองข้ามไป คนส่วนใหญ่คงจะรู้ดีว่าเราไม่ควรกำหนด line-height โดยใช้หน่วยแบบ absolute อย่าง px เพราะขนาดของมันจะไม่เปลี่ยนไปตาม font-size ดังนั้นเราจึงควรหันมาใช้หน่วยแบบ relative อย่าง em แทน…