Fail Whale by CSS ONLY!

An article by admin    1 Comment

วันนี้มีสิ่งที่น่าสนใจมาให้ดูกัน เป็นภาพ Fail Whale ของ twitter

ซึ่งสิ่งที่จะได้เห็นต่อไปนี้ ทำจาก CSS ล้วนๆ เลย เจ๋งมากๆ

การแสดงผลของ chrome และ safari จะแสดงผลเป็นภาพเคลื่อนไหว เนื่องจากใช้ webkit ตัวเดียวกัน

firefox ก็ภาพสวยแต่ไม่เคลื่อนไหว ส่วน ie นั้นเหรอ ก็อย่างที่รู้ๆ กัน การแสดงผลค่อนข้างต่างจาก

browser ตัวอื่นๆ จากโลมากลายเป็นหุ่นยนต์ไปซะงั้น อิอิ

ยิ่งเจ้า ie6 ตัวดี นอกจากโลมาจะกลายเป็นหุ่นยนต์แล้ว นกที่แบกโลมาก็ดูท่าทางจะไม่ค่อยสบายด้วย

ขอบคุณเรื่องราวดีๆ จาก Pure CSS Twitter Fail Whale – By  Steve Dennis

และสามารถดูการแสดงผลรวมทั้งโค้ดได้ที่ Pure CSS Twitter Fail Whale (CSS Version)

คลิกขวา view source ดูจะเห็น code เอาไว้ศึกษากันได้นะคะ

ภาพประกอบการทดสอบโดย browser ต่างๆ

1. Chrome : ภาพสวยสุด + เคลื่อนไหว (ทดสอบโดย chrome 5.0)

Fail Whale - Chrome

2. Firefox ภาพสวย เหมือน chrome แต่ไม่เคลื่อนไหว (ทดสอบโดย firefox 3.5.10)

Fail Whale - Firefox

3. safari ภาพสวยใช้ได้ แตกต่างจาก chrome ตรงบริเวณน้ำ แต่มีการเคลื่อนไหว

Fail Whale - Safari

4. Internet Explorer ภาพทั้งหมดแสดงเป็นเหลี่ยมๆ ทั้ง โลมา นก น้ำ และฉากสีฟ้า

Fail Whale - IE 8

Fail Whale - IE 7

Fail Whale - IE 6