Code for Dek-d Customization

ลำดับตอนที่ #11 : [code] ข้อความต้อนรับ แบบที่ไม่ใช้ alert() และไปแต่งเพิ่มได้

ถึงแม้ว่าหัวข้อจะใช้ชื่อว่าข้อความต้อนรับ แต่ว่าโค้ดนั้นไม่ได้ใช้ alert() เหมือนกับโค้ดของคนอื่นๆ แต่ว่าก็อาจจะใช้งานยากกว่าของคนอื่นๆ

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

อย่างไรก็ตาม ถ้าทุกท่านได้อ่าน ตอนที่ 74 : [design] แนวทางในการตกแต่ง My.iD และหน้านิยายที่ดี ภายในบทความ Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ของคุณ Caje จะพบว่าคุณ Caje ได้นำเสนอวิธีการตบแต่งต่างๆ ที่ควรทำไว้ ซึ่งข้อที่น่าสนใจคือ การไม่ใส่โค้ดจำพวกข้อความต้อนรับลงไปในบทความหรือหน้า My.iD โดยคุณ Caje ให้เหตุผลไว้ว่ามันจะเป็นการสร้างความรำคาญแก่ผู้อ่านมากกว่าการเชิญชวน

ดังนั้นโค้ดนี้อาจจะได้รับการปรับปรุงเพื่อเปลี่ยนการนำเสนอให้เป็นไปในทางที่ไม่รบกวนผู้อ่านมากจนเกินไป เพราะว่าโค้ดปัจจุบันนั้นยังคงมีส่วนของ overlay ที่ทำการขัดขวางผู้อ่านจากเนื้อหา และทำให้ตัวกล่องข้อความนั้นดูเด่นๆ และโจมตีผู้เข้าชมในลักษณะเดียวกันกับโค้ดเก่าที่ใช้งานฟังก์ชัน alert

โดยทั้งนี้บทความนี้ได้ใช้โค้ดบางส่วนจาก "Pure CSS Overlay" ของ JoshMesser และโค้ดบางส่วนจาก "Centering in CSS: A Complete Guide"

ตัวอย่างสามารถดูได้ที่นี่

See the Pen xGaPrO by Krerkkiat Chusap (@krerkkiat) on CodePen.