transform

Tag: transform

ทำแผนที่แบบง่ายๆ ด้วย CSS3 Transitions

ดวงอาทิตย์ตกดิน ข้างซ้ายมีตึก Cyber World กำลังก่อสร้าง

วันนี้ผมเปิดคอมพิวเตอร์ขึ้นมา แล้วตามด้วยบราวเซอร์อย่าง Firefox หลังจากนั้น  Firefox ได้ทำการแจ้งเตือนอัพเดทเป็นเวอร์ชั่น 7 (Beta) ผมเลยนึกขึ้นได้ว่า ผมมีตัวอย่างการทดลองเขียน CSS3 สไตล์ง่อยๆ อยู่อันหนึ่งซึ่งเขียนไว้เมื่อวันที่ 16 พฤศจิกายน 2553

ก็ย้อนจากวันนี้ไปประมาณ 9 เดือน ซึ่งตอนนั้นผมเขียน และทดลองเล่นดู ปรากฎว่า มีบราวเซอร์รองรับแค่ 2 ตัว คือ Chrome และ Safari ซึ่งเป็น Webkit ทั้งคู่ จึงพับเก็บเอาไว้ก่อนไม่ได้เขียนอธิบายลงเว็บ

ทำความเข้าใจ CSS3 Transitions

ภาพตัวอย่างการเขียน css3 transition

ไม่ได้ว่างมาก หรือไม่ได้ คึกเกินปกติ แต่เป็นความตั้งใจใหม่ ที่จะให้ thaicss.com มีบทความใหม่ ทุกๆ 7 วัน หรือ 1 เดือนอย่างน้อยก็ให้ได้ 4 บทความ วันนี้จึงมีบทความใหม่เพิ่มขึ้นมา เหมือนดั่งไม่เคยปรากฎมาาก่อน เพราะก่อนหน้านี้ เป็นๆ หายๆ ตลอดเวลา บางคราสองเดือนยังไม่มีสักบทความ เอาเป็นว่ามาเริ่มนับกันใหม่แล้วกันขอรับ

สำหรับวันนี้ เรายังอยู่ในเรื่องของ CSS เหมือนเดิม ขอพูดถึงเรื่อง การ Transitions ของ CSS3 ครับ

ในความหมายของ CSS การ Transitions คือ การเปลี่ยนค่า ใดๆ จาก A ไป B โดยระหว่างที่เปลี่ยนค่านั้น เราสามารถเห็นค่าความเปลี่ยนแปลงไปด้วย

ก่อนหน้านี้ ใน CSS เมื่อเกิดการเปลี่ยนแปลงเกิดขึ้น เราไม่สามารถมองเห็นการ ถ่ายโอนค่า เช่น ถ้าเราเรา สั่ง :hover แล้วให้เปลี่ยนพื้นหลังจากสี ดำ เป็นสีขาว การเปลี่ยนค่านั้นจะเปลี่ยนไปทันที โดยที่เราไม่เห็นว่า สีดำมันค่อยๆ จางลงจนกลายเป็นสีขาว
จนกระทั่ง CSS3 เข้ามาและมี Transitions Module เราจึงสามารถทำให้การเปลี่ยนค่านั้นยืดเวลาออกไป จากดำค่อยๆ เป็นเทา จาง จาง จาง และขาวไปในที่สุด โดยเราสามารถกำหนดการ transition ให้กับ property ของ CSS ก็ได้ โดยไม่เกินเลยเงื่อนไขที่ ภาษากำหนดไว้

HTML5 กับ CSS3 เมื่อเอามาทำ Photo Gallery

ตัวอย่างบทความ HTML5

เป็นอะไรกันไม่รู้ครับ พ่อแม่พี่น้อง ช่วงนี้ ทำไม มองไปทางไหนมีแต่คน บ้า HTML5 และ CSS3 แต่บางที
คงไม่ต้องหาคำตอบให้กับคำถามปัญญาอ่อนของผมก็ได้ เพียงแค่ก้มหน้าก้มตาทำหน้าที่ไปเรื่อย เรื่อยก็คงพอเพียงแล้ว

อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS เองก็ใช้มานานนม เพราะมันมีมานานแล้ว จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่

เมื่อก่อนตอนใช้ ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ บ้ากว่ากุอีก

Apple กับหน้าพิเศษ HTML5 CSS3 ปัญหาที่ซ่อนความจริงไว้ข้างหลัง

จากข่าวสองมาตรฐานเรื่องล่าสุดที่ Apple ได้ออกตัวล้อฟรี เหม็นไหม้ยาง ในการสนับสนุน HTML5 CSS3 อย่างเต็มที่ พร้อมๆ กับทำ Micro site เพื่อแสดงความสามารถของ Safari ที่สามารถทำงานกับ คุณสมบัติใหม่ๆ ได้อย่างราบรื่นนั้น ไม่ว่าจะมองไปทางไหน ผมเห็น อาร์ทตัวพ่อ ทั้งไทยและเทศ ต่างวิพากย์ วิจารณ์ ในมุม Apple เลือกปฏิบัติ เพราะบังคับให้ดูเฉพาะใน Safari แถมยังพาดประโยคจิก กัด บราวเซอร์ ล้านปลั๊กอินเจ้าหนึ่งเอาไว้ด้วย

แม้แต่ Mozilla ก็ออกมาวิพากย์ บางอันกับเขาเหมือนกัน

จริงครับ Apple เลือกพูดเฉพาะส่วนที่ตัวเอง ถูก เท่านั้น เรื่องอย่างนี้เราคุ้นกันอยู่แล้วครับ เพราะไม่ใช่แค่ Apple หรอกครับผมว่า M$ เอง ก็เลือกหลับตาข้างหนึ่งเล่นบทนี้เหมือนกันในตอนที่สดสอบ IE9 พรีวิวล่าสุด ที่ออกมาบอกว่าตัวเองรองรับมาตรฐานได้สูงกว่าใครเพื่อน

ไม่ว่ายังไงก็ช่าง ผมขออย่างหนึ่งสำหรับคนทำงาน CSS HTML ที่รัก และชอบพัฒนาตัวเองอยู่เงียบๆ "อย่าหลงประเด็น" ในขณะที่คนอื่นต่างพากัน เฮโล เกทับ บัฟแหลก ด่า Apple อยู่นั้น ขอมองระหว่าง บรรทัด ของที่ซ่อนอยู่ข้างใน มีประโยชน์มหาศาล

Back to Top