Css3

วิธีจัดกึ่งกลาง (ทั้งแนวตั้งและแนวนอน)

โดยปกติแล้ว หากเราอยากจะให้ element หนึ่ง อยู่กึ่งกลางของ container ทั้งในแนวตั้งและในแนวนอน เราก็จะต้องเขียนโค้ดแบบนี้

<div class="box">BOX</div>

.box {
  width: 200px;
  height: 100px;

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

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

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

CSS @supports คืออะไร + สอนวิธีใช้ทำ Feature Detection

หลายๆ คนคงจะเคยเจอปัญหาเกี่ยวกับการรองรับ css3 features ต่างๆ ที่ไม่เท่ากันในแต่ละ web browsers บางครั้งเราอยากใช้อะไรใหม่ๆ แต่ก็ใช้ไม่ได้ เพราะติดตรง web browsers เก่าๆ นั้นยังไม่รองรับ หลายๆ คนถึงกับบ่นว่า…

เขียน CSS Selectors อย่างไรให้มีประสิทธิภาพ ?

ในการเขียน css selectors นั้น เรารู้ดีว่ามี selectors แบบไหนให้เราเลือกใช้ได้บ้าง และแต่ละแบบนั้นมีวิธีการใช้งานอย่างไร แต่หลายๆ คน อาจไม่รู้ว่าการเขียน selectors ในแต่ละแบบนั้น มันมีผลต่อ performance ด้วย

Web Browsers แบ่ง…

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

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

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

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

สอนวิธีเขียน CSS3 ง่ายๆ ด้วย LESS

LESS เป็น tool ที่ทำมาเพื่อช่วยให้เราเขียน css ได้สะดวกรวดเร็วขึ้นครับ หลักการของมันก็ง่ายๆ คือ…

ความเป็นมาของ Web Typography

บทความนี้จะเล่าถึงประวัติ ความเป็นมาของ web typography ครับ ซึ่งจริงๆ เกิดขึ้นมานานหลายสิบปีแล้ว แต่ด้วยเหตุผลบางประการ ทำให้ยังไม่ค่อยได้รับความนิยมในสมัยนั้น จากอดีตจนถึงปัจจุบัน มีอะไรเปลี่ยนแปลงไปบ้าง นักพัฒนาในสมัยนั้นมีวิธีแก้ปัญหาอย่างไร เชิญติดตามได้เลยครับ

แต่ง text ให้มีมิติกับ text-shadow

ปกติสมัยก่อนตอนที่เรายังใช้ css2 กันอยู่นั้นถ้าหากต้องการจะทำให้ัตัวอักษรสวยงามก็คงจะต้อง ตัด ตัด ตัด !! รูปออกมาจากดีไซน์เท่านั้น ซึ่งเวลาที่เราจะต้องแก้คำมันก็ช่าง …