CSS

ทำความเข้าใจ 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 แต่เอ๊ะ ใครยังไม่รู้ความแตกต่างบางข้อที่ทำให้ภาษานี้แตกต่างกันอย่างมากขอรับ ยกมือหน่อย “ผมรู้ว่าคุณยกมือในใจ”

CSS Calculations การใช้ Functional Notations – CSS calc()

ป้ายโรงม้า

CSS3 มี Values and Units Module แยกย่อยออกมาเพื่อกำหนด “หน่วย” ของค่าต่างๆ มากมาย “หน่วย” ในที่นี้ก็เช่น px, em, %, cm, gr, fr, deg, rem, vh และอื่นๆ อีกมากมาย โดยที่ความเก๋าและเฉพาะทางของ CSS3 ที่ Module นี้แถมมาด้วยก็คือ การนำเอา “หน่วย” ที่ต่างๆ กันนั้นมา “ทำการคำนวณ” (calc();) เพื่อหาค่าที่ลงตัวใหม่ได้

พูดง่ายๆ ก็เช่น สมมุติว่าเรามีกล่องในอุปกรณ์เครื่องเขียน ซึ่งมีความยาว 100% ของที่มีอยู่ข้างในเราต้องการกำหนดความยาวให้เป็นดังนี้ ดินสอยาว 3cm ยางลบยาว 40px ปากกายาว 100% – 3cm – 40px จากโค้ดตัวอย่าง อันบ้าบิ่นและไม่สมเหตุสมผลนี้ ความยาวของปากกา ก็จะมีค่าเท่ากับ 100% – 3cm – 40px = ? ก็ช่างมัน

CSS4 มาแล้ว เปิดหัวกับ CSS Selectors Level 4

เมื่อวันที่ ทาง W3C ได้ประกาศ Working Draft สำหรับ CSS4
ออกมาอีก 1 หมวด ซึ่งนั่นก็คือ CSS4 ที่เป็น Selectors นั่นเอง

อะไรนะ CSS4 อีกแล้วเหรอเนี่ย!!! หลายคนคงอยากอุทานออกมาเป็นภาษามนุษย์ต่างดาว เพราะทุกวันนี้ CSS3 เรายังไม่ได้ใช้กันจนหมดทุกหมวดหมู่เลย ทำไมมันก้าวไปถึงขั้น CSS4 กันแล้ว

ผมขอย้อนกลับไปยัง CSS2, CSS2.1 จนมาถึง CSS3 กันก่อนนะครับ

Back to Top