CSS Challenge ขอท้าคนเขียน CSS ทุกคน !!

css challenge banner
Share on facebook
Share on twitter
Share on telegram
แอดมินมีอะไรสนุก ๆ มาให้เล่นกันครับ เนื่องมาจากแอดมินไปเจอกระทู้ต่างประเทศมาครับ เค้าท้าให้คนลองเขียน HTML/CSS ให้ผลลัพธ์ออกมาเป็นตามรูปนี้

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

CSS Challenge

อยากท้าให้ทุกท่านมาลองเขียนกันดูครับ กฏคือต้องเขียนด้วย HTML/CSS เท่านั้น (หรือใครคิดไม่ออกจะใช้ Javascript ช่วยก็ได้ครับ)

สามารถเขียนใน JSFiddle หรือ Codepen ก็ได้ครับ ใครทำได้แล้วมาโพสลิงค์ในคอมเม้นท์ได้เลย !!

เดี๋ยวตอนดึก ๆ จะมาเฉลยครับ

—————————-

เฉลยมาแล้วครับ

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

แบบง่าย ๆ อาจจะใช้ padding เพื่อดัน border-bottom เอาครับ ตัวอย่างจากไอแมง แก็ป

แบบที่ยากขึ้นมาหน่อย อาจจะสร้าง element ขึ้นมาเป็นตัวเส้นแทนครับ ตัวอย่างจาก Yati Dumrongsukit

ส่วนอันนี้เป็นของฝรั่งที่ผมชอบมากครับ ใช้ box-shadow ทำให้โค้ดสั้นมาก ๆ ตัวอย่างจาก Lucian Martin

ใครมีวิธีอื่น ๆ มาแชร์กันได้คร้าบ 😀




Share:

Share on facebook
Facebook
Share on twitter
Twitter
Share on telegram
Telegram

Leave a Reply

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