CSS

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 ที่ต้องการเรียกใช้โดยคำสั่งที่อยู่แรกจะเป็นตำแหน่งเลเยอร์บนสุด และเรียงลำดับลงไปเรื่อยๆ

CSS3 Transition Timing Functions

ราวบันได

วันนี้ผมอยากจะมาบอกเล่า แลกเปลี่ยนอะไรสั้นๆ ครับ ในเรื่องของ Timing Functions ของ CSS3 นั่นก็คือ Function ที่เอาไว้คอยกำหนดรูปแบบการ “เปลี่ยนผ่าน” จากจุดหนึ่งไปยังจุดหนึ่ง นั่นเอง ซึ่งมีทั้งหมด 9 แบบ ที่ผมนำเรื่องนี้กลับมาพูดอีกครั้งเพราะว่าได้ใช้เรื่อง Transitions ของ CSS3 อย่างจริงจังแล้วในตอนนี้ เพราะหลายบริษัทเน้นทำ Web เพื่อ iPad หรือ ดรอยด์ Tablet รุ่นใหม่ๆ ในเมื่อบราวเซอร์สามารถรองรับ CSS3 ได้ก็ใช้ให้เกิดประโยชน์ซะเลย ไม่จำเป็นต้องไปพึ่งพา jQuery ให้หนักเกินไป

เริ่มจริงจังกับการเรียนรู้พื้นฐาน CSS กันเถิด

หลังจากที่ผมเขียนเรื่อง “แนวทางการเรียนรู้ CSS3 และ HTML5 ให้เกิดประโยชน์สูงสุด” เอาไว้เมื่อ 2 ปีที่ผ่านมา (2010) ถึงตอนนี้ผมยังคิดว่าแม้กระทั่งผู้เขียนอย่างผมเองยังต้องตั้งคำถามกับตัวเอง ว่าเรานั้นไปตามเส้นทางแบบนั้นอย่างจริงจังหรือไม่

บทความที่ว่าก่อนหน้านั่นอาจจะดูคร่าวๆ ไปหน่อยสำหรับผู้ที่เริ่มจากพื้นฐานจริงๆ

วันนี้ผมมีเรื่องราวที่แยกย่อยลงไปเพื่อนำมาบอกเล่าแลกเปลี่ยนกันเพิ่มเติมครับ ซึ่งเรื่องราวนี้จะมุ่งเน้นไปยัง “หลักการการเรียนรู้ แยกแยะ จดจำ วีธีการทำงานของ CSS3 หรือ CSS4”

ตามที่เรารู้กันเป็นอย่างดี ในความแตกต่างของ CSS2 กับ CSS3 แต่เอ๊ะ ใครยังไม่รู้ความแตกต่างบางข้อที่ทำให้ภาษานี้แตกต่างกันอย่างมากขอรับ ยกมือหน่อย “ผมรู้ว่าคุณยกมือในใจ”

Back to Top