CSS3

การใช้ Sticky Position ใน CSS

วันนี้เรามีข่าวมาแจ้งว่าสำหรับการเขียนเว็บเพื่อให้ของติดห้อยอยู่บนขอบหน้าจอเมื่อเลื่อนเม้าส์ลงไปเรื่อยๆ เราไม่จำเป็นต้องใช้ความช่วยเหลือจาก Javascript อีกต่อไปแล้ว เมื่อ CSS มีความสามารถใหม่เพิ่มเข้ามา นั่นก็คือเราสามารถสั่งให้ Element ใดๆ สามารถเกาะติดอยู่ตรง View Port เมื่อเราเลื่อนหน้าจอไปถึงโดยคำสั่ง CSS Sticky

เขียน CSS ให้ตัวหนังสือ หรือ Element ย่อขยายตามขนาดหน้าจอแบบ Relative

CSS กากกากส์ วันนี้ขอนำเสนอการใช้ Distance Units ประเภท length โดยเจาะจงไปที่ Relative length แล้วแทงยาวไปที่ Viewport-percentage lengths ซื่งก็คือ VW (Viewport width) และ VH (Viewport height)

เราสามารถที่จะให้ของที่อยู่ในกล่องของเราทำการวิ่งตาม Veiwport ได้ทั้งสองทาง ไม่ว่าความกว้างหรือความสูง

CSS Flexible Box Layout ตอนที่ 1

ผมไม่ได้เขียน CSS HTML มานานมากกกกกแล้ว มันอาจจะทำใจได้ยากสักนิดในช่วงแรกที่ต้องอดกลั้นไม่ทำในสิ่งที่ตัวเองถนัด เพราะเอาเวลาไปทำอย่างอื่นที่น่าสนุกว่า ท้าทายกว่าเหมือนกับที่เขาว่าไว้ เราต้องเดินไปข้างหน้า เป็นเหตุให้ ThaiCSS ไม่มีบทความใหม่ออกมาเลยตั้งแต่ต้นปีที่ผ่านมา Kulachat Kena เองยังโผล่มาแค่บทความเดียวแล้วหายจ้อย เปล่าเลย เขาไม่ได้ตั้งใจหายไปไหน อาจเป็นเพราะผมให้งานเขาทำหนักเกินไป จนไม่มีกระจิตกระใจลงมาวาดลวดลายใน ThaiCSS เป็นคำรบที่สอง แต่อีกไม่นานเขาคงกลับมาพร้อมประสบการณ์ที่มากกว่า สุขขุมลุ่มลึกกว่า รวมไปถึงเขาอาจจะมีสามหำไปแล้วก็เป็นได้

ลำดับความสำคัญของ Selectors ใน CSS

เรื่องราวสั้นๆ ว่าด้วยหลักการคำนวณและเรียงลำดับความสำคัญของ CSS Selectors เพื่อการแสดงผล ก่อน หลังในการสั่งงาน

CSS มีกฎการลำดับความสำคัญของการใช้ Selectors ควบคุมอยู่ ความสำคัญมาก สำคัญน้อย ขึ้นอยู่กับผลรวมคะแนนของ Selectors ในแต่ละชุด โดยใช้กฎการนับเลขเข้ามาช่วย มี 3 หลัก คือ หลักร้อย หลักสิบ หลักหน่วย

ทำความเข้าใจ css sprites และ background-position

ThaiCSS ขอแนะนำนักเขียนใหม่ Kulachat Kena หนุ่มขอนแก่นคนนี้จะมาขอจับจองบอกเล่าเรื่องราวง่ายๆ สบายๆ ที่เราอาจจะลืมหรือมองข้ามไป รวมไปถึงเกร็ดเล็กเกร็ดน้อย แบบเบาๆ

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

ในบทความแรกนี้พูดถึเรื่องการใช้ Substring Maching Attribute Selectors แบบ Subfix เข้ามาใช้ในการกำหนดให้ Class อะไรก็ตามที่มีค่าลงท้ายเท่ากับ icon แสดงผลออกมาเป็นรูป icon ตามที่ต้องการ
โดยใช้ background-position แยกตำแหน่งการแสดงผล เซิญแซบครับ

การใช้งาน Layering Multiple Background Images

สวัสดีพี่น้องชาว ThaiCSS ผู้รักสนุกทุกท่านครับหลังจากหายหัวหนีไปปั่นจักรยานอยู่พักใหญ่ วันนี้ได้ฤกษ์ปล่อยบทความที่ตั้งใจจะเขียนซักทีถือว่าเป็นบทความก่อนลาไปอุปสมบทแล้วกันนะครับ วันนี้ผมจะมาแนะนำการใช้งาน “Layering Multiple Background Images” หรือการใช้งาน Background แบบหลายเลเยอร์นั่นเอง

Layering Multiple Background Images นั้นเป็นความสามารถที่ถูกเพิ่มเข้ามาใน CSS3 โดยความสามารถนี้จะทำให้เว็บดีไซน์เนอร์ทำงานกับ Background ได้ยืดหยุ่นมากขึ้น สำหรับการใช้งานนั้นเพียงใช้เครื่องหมาย comma-separated(,) หรือเครื่องหมายจุลภาค คั่นระหว่างแต่ละ Background ที่ต้องการเรียกใช้โดยคำสั่งที่อยู่แรกจะเป็นตำแหน่งเลเยอร์บนสุด และเรียงลำดับลงไปเรื่อยๆ

Back to Top