จาก CSS3 Transforms ถึง CSS Motion Editor Designer

ภาพตัวอย่างการ transform ของ CSS3

ย้อนกลับไปเมื่อ 3-4 ปีที่ผ่านมา นับจากปีปัจจุบัน (2553) คำว่า CSS Designer เพิ่งถือกำเนิดขึ้นใจเมืองไทย เวลาผ่านล่วงไป สาม สี่ปี ก็จริง เป็น สาม สี่ปีที่ไม่ค่อยได้เดินไปไหนกัน อย่างไรก็ตาม เท่าที่ผมสังเกต บ้านเราถือว่าเดินตามเรื่อง CSS มาไกลกันอักโข แต่ก็ยังไม่ถึงขั้นที่เรียกว่าตามทัน

ในระดับบริษัท ห้างร้าน เริ่มมี แผนกเขียน CSS HTML แยกออกจาก Interface Design อื่นๆ แต่สำหรับบางบริษัท ยังทำแบบ All-in-one ก็เป็นอันเข้าใจว่า อาจจะด้วยความเบี้ยน้อยแต่หอยใหญ่ ก็ว่ากันไป

มองย้อนกลับไปข้างหลังแล้ว เรามามองโค้งแบบลูกยิงไกลของ โรนัลโด้ บ้าง ว่า ในอนาคตอันใกล้ ใกล้ นี้ ในเรื่องราวของการเขียน CSS HTML มันจะแปลกแปร่งออกไปจากเผ่าพันธุ์เดิมดั้ง ดั่งเคยเป็นมายังไงบ้าง

พูดถึงเรื่องของ Browsers แล้ว ถึงแม้ว่า IE ยังครองส่วนแบ่งการตลาดข้างมากเอาไว้ได้ แต่เมื่อมองย้อนไปยัง ตลาดอื่นๆ ไม่ว่าจะ สามารถโฟน หรือ แทบเล็ด นั้น Apple จองเอาไว้แล้ว และตลาดมีท่าจะโตขึ้นเรื่อยๆ ซะด้วย

ในฐานะ ที่เรายุ่งเกี่ยวอยู่กับบราวเซอร์ เราจึงเห็น Webkit ซึ่งเป็น ฟันเฟืองหลักของ Browser อย่าง Safari และ Chrome เดินหน้าใส่เกียร์ห้า แทบจะอัพเดทกันเดือนต่อเดือนเลยทีเดียว เพื่อทำให้รองรับคุณสมบัติใหม่ๆ ของ CSS3 และ HTML5 (ขอเกริ่นไว้นิดหนึ่งนะครับ ว่า CSS4 และ HTML6 เริ่มวางแผนพัฒนาแล้ว) ในขณะที่เจ้า ไทรเด้น เพิ่งจะ ทำขอบโค้งมนได้ ใน IE9 ทาง Webkit เขาทำหน้าเว็บกลายร่างเป็นหุ่นยนต์ไปเรียบร้อย

อย่าลืมนะครับว่า บางคนเขาเขียนเว็บให้แสดงผลใน iPhone กะ iPad เท่านั้น เขาจะมาสนใจใยดี IE กันทำไมอีก

แต่สุดท้ายแล้ว IE ก็คงเดินตามแบบทอดน่องมาทันกันเหมือนเดิม แต่เมื่อไหร่นั้น ก็ค่อยมาว่ากันอีกที

CSS3 มี Transform และ Transition เพื่อเอามาทำงานเกี่ยวกับการเคลื่อนไหวโดยเฉพาะ ซึ่งก่อนหน้านี้ เราอาศัย Java script เข้าช่วย ด้วยไลบารี่ของ jQuery แต่ ในอนาคต เราไม่จำเป็นต้องเอา jQuery มาทำการเคลื่อนที่ เคลื่อนไหวให้กับของที่อยู่ในหน้าเว็บอีกแล้ว เอาไปจัดการในเรื่อง ระบบ ข้อมูลโน่นเลยดีกว่า เพราะ CSS3 จะดึงอะไรก็ตามที่เกี่ยวกับ UI ที่ Java script ทำอยู่ออกมาให้หมด ให้สมกับคำว่าเป็นภาษา Presentation อย่างแท้จริง

เมื่อเวลานั้นมาถึง สิ่งที่จะตามมาร้อยเปอร์เซนต์ คือ ต้องทำความเข้าใจการเขียนโค้ด CSS ใหม่ ซึ่งมันไม่ใช่แค่แสดงผลถูกต้อง มันต้อง เคลื่อนไหวอย่างถูกต้อง ด้วย

แปดเดือนก่อนหน้านี้ ผมลองเล่นเรื่อง Transform และ Transition ตอนนั้นผมยังไม่คิดว่ามันจะไม่เป็นปัญหาของพวกเขียน CSS HTML แบบ อนุรักษ์นิยม แต่ พอมาวันนี้ผมคิดว่า มันจะเป็นปัญหาแน่นอน

หลังจากที่เรามี CSS Designer แล้ว อีกไม่นานเกินรอ อาชีพนี้ จะเกิดตำแหน่งงานใหม่มาอีก 1 ตำแหน่งคือ CSS Motion Editor Designer หรือเรียกแบบบ้านๆ ว่า มือตัดต่อภาค CSS การตัดต่องานแบบนี้ ไม่มีเครื่องมือช่วยเหมือนตอนที่เราตัดต่อหนัง ตัดต่อ วิดีโอ เป็นการ ตัดต่อด้วย CSS ล้วนๆ

ผมลองนั่งเล่นๆ ดูอีกรอบ กับ CSS3 อย่างที่ว่านั้น จึงมีตัวอย่างการ Transition และ Transform ของ CSS3 มาให้ดูกันเล็กๆ น้อยๆ

บราวเซอร์ ที่สามารถใช้ดูได้มี Chrome และ Safari นะครับ

สำหรับ Firefox นั้น Transform ได้ แต่ยัง Transition ไม่เป็น Opera นั้น ได้บ้างไม่ได้บ้าง

แนะนำ Chrome และ Safari

ตัวอย่างที่ 1: HTML5 CSS3 Transform แบบ เม้าส์ Over

ตัวอย่างที่ 2: HTML5 CSS3 Transform แบบ Click (:target ใน CSS3)

Back to Top

10 Responses to จาก CSS3 Transforms ถึง CSS Motion Editor Designer

  1. gooaood

    The article is a god "น้ำตกหมู".

    Reply

  2. radiz

    You are the CSS Mater, Superb โคตร Professional ว่ะ

    Reply

  3. maxmayer

    มือตัดต่อภาค CSS เป็นคำนิยามที่เท่ห์ ไม่เบาเลยทีเดียว

    Reply

  4. buggo

    คอยถ้าจักคาว ข้าน้อยกำลังจะตามไป…ห่างๆ 555

    Reply

  5. TDz

    ซาฟารี กะโครม มีสถานภาพแตกต่างออกไปจากที่เคย เพราะทั้งสองไม่ใช่เบราเซอร์ โดดๆอีกต่อไป
    แต่เป็น (1)เจ้าของ OS (2)ของอุปกรณ์สำหรับดูเว็บ"ยุคต่อไป" อีกด้วย : )

    Reply

  6. heypetch

    คุยอารายกันอ่ะ อิอิ

    Reply

  7. ayukacha

    เก่ง

    Reply

  8. donkey

    ขอบคุณสำหรับบทความดีๆ ที่นำ้มาแ่บ่งปันกัน

    Reply

  9. สมพร

    สม

    Reply

  10. สงสัยนิดนึงครับ ผมลองเขียน

    css
    #targetID:target{
    ….
    }
    HTML
    click

    เมื่อคลิกปุ๊บ หน้าจอมันเลื่อนไปที่ ID นั้นๆเลยครับ เราสามารถ ใช้คำสั่งอะไรให้จอมันอยู่นิ่งๆแบบเดิมได้บ้างครับกำลังว่าจะเอาไปใช้แทน javascript Animation หลายๆอัน(script ประมวลผลกับ script Animation ตีกันยุ่งไปหมด T_T)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top