Code Tutorials

css3 thai font face webfont

วิธีใส่ฟ้อนต์ไทยลงในเว็บไซต์ ด้วย CSS3 @font-face แบบ Step by Step

เห็นมีหลายคนถามมาทาง เพจ Designil.com ครับว่า เราจะใส่ฟ้อนต์ไทยบนหน้าเว็บไซต์ได้ยังไง, ต้องตัดเป็นรูปมั้ย, เสียเงินมั้ย, ใช้ CSS3 หรือ Flash ช่วยดี ฯลฯ

designil scss variable interpolation

เทคนิคการใช้ Variable Interpolation ใน SCSS

การนำตัวแปร SCSS มาใช้ประโยชน์ให้มากขึ้นกว่าการใส่สี ใส่ขนาดตัวหนังสือทั่ว ๆ ไป ซึ่งใช้เทคนิคที่เรียกว่า Variable Interpolation ครับ

designil bem css

เขียน CSS ให้ดีขึ้นได้ง่าย ๆ ด้วยเทคนิค BEM !!

เวลามีคนเขียน CSS หลายคนในโปรเจคเดียวกัน หรือนำโค้ดของคนอื่นมาแก้ต่อ (เช่น ซื้อจาก Themeforest) จะแก้ CSS ได้ยากเพราะอ่านไม่ออก มาดูวิธีแก้แบบ BEM CSS กัน

icon font big

Icon Font คืออะไร? สอนวิธีใช้และเทคนิคเด็ด ๆ ที่คนทำเว็บห้ามพลาด !!

แนะนำการใช้ Icon Font ไอคอนแบบใหม่ที่ย่อขยายได้โดยรูปไม่มีวันแตก แถมใช้งานง่ายกว่ารูป PNG หลายเท่า และแน่นอนว่าดาวน์โหลดใช้ในงานได้ฟรี ไม่ผิดลิขสิทธิ์

retina display

[Hot Topic] สอนทำเว็บไซต์ให้รองรับ Retina Display หน้าจอความละเอียดสูง

เทคนิคการทำ Website ของเราให้รองรับ Retina Display หน้าจอความละเอียด 2x จากปกตินั้นไม่ยากเลยครับ มาดู 4 วิธีในการทำ Graphics ของเว็บไซต์เราให้รองรับ Retina

designil sass prepros less css

SASS คืออะไร? เทคนิคช่วยให้การเขียน CSS เป็นเรื่องง่าย ๆ ใช้กันทั่วโลก !!

SASS คือ CSS Preprocessor ซึ่งทำงานเหมือนกับ LESS CSS หลักการเขียนจะคล้ายเขียน CSS ทั่วไป แต่มีฟีเจอร์พิเศษช่วยให้เขียนเร็วขึ้น หรือเขียนน้อยแต่ได้มาก

4556156477 c21fa939a8

CSS Guideline – เปิดตำราสอนเทคนิคเขียน CSS อย่างมืออาชีพ !!

เทคนิค CSS มีเยอะแยะที่ในตำราไม่เคยมีใครเขียนถึง ไม่ว่าจะเป็นการเขียน CSS ให้เป็นระเบียบ สามารถกลับมาแก้ไขได้ง่าย และนำไปให้เพื่อนร่วมทีมเขียนต่อได้

d62 how to less css preprocessor tutorial

[Hot Topic] LESS CSS สอนเทคนิคเทพที่จะเปลี่ยนการเขียน CSS ของคุณ !!

วันนี้เรามาพูดถึงเทคนิคในการเขียน CSS ที่มีมาพักใหญ่ ๆ แล้ว แต่ยังไม่มีการพูดถึงในไทยมากนัก บางคนอาจคิดว่ามันใช้ยาก หรืออ่านบทความสอนใช้ในเว็บต่างประเทศแล้วยังงง ๆ ว่ามันดียังไง วันนี้ผมจะมาอธิบายทุกประเด็นเกี่ยวกับการใช้ LESS CSS ครับ [UPDATE] ถ้าใครสนใจการใช้งาน SASS ซึ่งเป็นญาติของ LESS CSS

d54 ie internet explorer 6 fight book

ตำราปราบ IE6 IE7 IE8 ตอน 1: รวมเทคนิคสู้รบกับ Internet Explorer 6 – 8 !!

ตอนนี้หากท่านใดติดตามข่าวสารเว็บดีไซน์ใหม่ ๆ จะเห็นว่ามีเทคนิค HTML5, CSS3 เท่ ๆ ใช้งานง่าย ๆ ออกมาเยอะมาก  โดยเฉพาะ CSS3 นี่น่าจะเป็นสวรรค์ของ Web Designer อย่างเรา ๆ กันเลย ท่านใดที่ไม่ค่อยได้ติดตามข่าวสารเกี่ยวกับการออกแบบเว็บไซต์ใหม่ ๆ แนะนำให้แวะไปที่ Fanpage ของ DesignIL ครับ ผมจะนำบทความที่น่าอ่าน หรือของฟรีดี ๆ เอามาแจกกันเรื่อย