การสร้างเงาให้กับรูปภาพ และพื้นหลังต่าง ๆ ด้วย CSS3 : Box-shadow

หน้าแรก CSS การสร้างเงาให้กับรูปภาพ และพื้นหลังต่าง ๆ ด้วย CSS3 : Box-shadow

---

หลังจากวันก่อนคุยเกี่ยวกับเรื่องทำกล่องขอบโค้งไปแล้ว (บทความ สร้างขอบโค้งด้วย CSS3) กันแล้ว มาคราวนี้เลยเอาทำเงาให้พื้นหลังรูปภาพ หรือกล่องมาบอกเล่าต่อ

1.เริ่มด้วยเลือกสิ่งที่เราต้องการสร้างเงาพื้นหลังให้ได้ก่อน ซึ่งเราเลือกรูปที่คุณ Parkzz ทำมาใช้ดู ส่วนใครอื่้นก็สร้างนำรูป หรืออย่างอื่นก็ได้ตามใจชอบ



2.การทำเงานั้นใช้โค้ดว่า box-shadow ซึ่งเงาเราให้มีขนาดเท่าไหร่นั้นก็ขึ้นกับแต่ละบุคคลตามใจชอบ

box-shadow:10px 10px 5px #888;

ต่อมาเราก็ต้องทำให้ Browser ที่เราใช้รองรับตามที่บทความที่แล้ว (เรื่องสร้างขอบโค้งด้วย CSS3) ได้บอกไว้ ให้ใส่โค้ด

-moz-box-shadow:10px 10px 5px #888;
-webkit-box-shadow:10px 10px 5px #888;

โดยที่เห็นข้อมูล 4 อย่างนั้นคงไม่รู้ว่าอะไรใช้มั๊ย จะมาอธิบายความหมายกันว่ามีอะไรบ้าง

box-shadow:Apx Bpx Cpx #xxx;

Apx คือ เงาตามแกน X มีหน่วยเป็น px
Bpx คือ เงาตามแกน Y มีหน่วยเป็น px
Cpx คือ ค่าความพล่ามัวของเงาที่เราต้องการ ถ้าใส่ 0 เงามันจะเข้มตามสีที่เราเลือก
#xxx คือ สีเงาที่เราต้องการ

โดยจะได้ผลลัพธ์ดังรูป



3.คราวนี้เมื่อบทความที่แล้วได้ทำกล่องโค้งเลียนแบบหน้าแรกของเว็บไซต์ web.ofebia.com แต่ยังไม่มีเงา วันนี้จะมาทำเงาให้ดูกัน



โค้ดที่เพิ่มเข้าไป

box-shadow:0px 2px 5px #D4D4D4;
-moz-box-shadow:0px 2px 5px #D4D4D4;
-webkit-box-shadow:0px 2px 5px #D4D4D4;

ส่วนเงาในขอบนอกก็ใช้คำสั่งเดียวกัน แต่ค่าที่ใช้นั้นต่างกัน เมื่อเสร็จแล้วผลลัพธ์ก็ได้ออกมาคล้าย ๆ กัน แต่พอดีจำค่าสีเงาไม่ค่อยได้ เลยเลือกที่ใกล้เคียงกัน

สีขอบข้าง ๆ กล่องไม่ค่อยเหมือนสักเท่าไหร่ แต่ก็โอเคพอเหมือนต้นฉบับนิดหน่อย ไว้คราวหน้าเดี๋ยวจะทำ Animation กับ CSS3 ให้ดูกัน^^

ขึ้นไปด้านบน