สวัสดีครับ กลับมาพบกันอีกครั้งกับบทความของบักสนนะครับ หลังจากที่ผมกลับมาจากประเทศเนปาล ผมก็ได้ทำการ Redesign เว็บบล็อกท่องเที่ยวส่วนตัวของผมคือเว็บ www.backpackstory.com ครับ โดยครั้งนี้ผมได้ปรับเปลี่ยนให้เน้นการอ่านง่ายมากขึ้น และดูสบายๆตา จากรสนิยมส่วนตัว ผมชอบงานที่มีมิติครับ เมื่อเป็นเว็บตัวเองก็เลยเล่นได้เต็มที่ตามใจปรารถนา ผมก็เลยทำให้ตรงตัวที่ลิสต์บล็อกของผมที่มาแสดงในหน้าแรกมีลักษณะเป็นเงาๆ ครับ ซึ่งในภาษา CSS เราเรียกว่า Box Shadow
การทำ CSS box shadow เดี๋ยวนี้ก็ทำได้ง่ายมากครับ เรามีเครื่องมือช่วย Generate ออนไลน์กันเพียบ โดยลองค้นหาคำว่า css box shadow generator ก็ได้
และสำหรับบทความนี้ผมจะเอาโค้ด CSS ตัว Box Shadow ที่ผมใช้สำหรับทำเว็บนี้มาฝากครับ
สำหรับภาพแรกนั้นจะเป็นว่ากล่องมีเงาที่เด่นขึ้นมาเยอะเลย ใช้โค้ดนี้ครับ
-webkit-box-shadow: 0 30px 50px rgba(0,0,0,.2); box-shadow: 0 30px 50px rgba(0,0,0,.2);
ในภาพ กล่องถัดมา ตัวเงาจะน้อยกว่า ใช้โค้ดนี้ครับ
-webkit-box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
เดี๋ยวผมจะอธิบายสักหน่อยว่ามันคืออะไรนะครับ ยกตัวอย่างโค้ดนี้
box-shadow: 0 30px 50px rgba(0,0,0,.2);
ตัวเลข 0 ตัวแรก หมายถึง การบอกว่าให้สร้างเงา ในแนว “นอน” ถ้าเลขบวก เงาจะขยับไปทางขวา ถ้าเป็นลบ จะขยับไปทางซ้าย
ตัวเลขที่สอง 30px หมายถึง การให้สร้างเงา ในแนว “ตั้ง” ถ้าเลขบวก จะขยับลง ถ้าเลขติดลบ จะขยับไปด้านบน
ตัวเลขที่สาม 34px หมายถึง ค่าของการเบลอครับ ยิ่งเลขเยอะก็ยิ่งเบลอ
ตัวเลขที่สี่ rgba(0,0,0,.2) เป็นสีของเงาครับ
สำหรับใครที่กำลังมองหาตัว CSS เพื่อไปใช้สร้างมิติให้กับงาน ก็ลองนำไปประยุกต์ใช้ดูได้นะครับ
