CSS Box Shadow

วันนี้มาดูการทำให้เว็บของเราดูน่าสนใจขึ้นด้วยการใส่เงา (Shadow) ลงไปให้กับวัตถุกัน ซึ่งเทคนิคนี้ ผมชอบใช้นะ มันดูมีมิติดี..

โค้ด css ก็ไม่มีอะไรมาก ตามนี้

ค่าต่างๆ จะประกอบด้วย

  1. The horizontal offset : ขนาดของเงาตามแนวนอน
  2. The vertical offset : ขนาดของเงาตามแนวตั้ง
  3. The blur radius : ค่าความเบลอของเงา
  4. The spread radius : ค่าความฟุ้งกระจาย ถ้าค่าเป็นบวกมากๆ ก็จะเข้มขึ้นเรื่อยๆ โดยค่าเริ่มต้นคือ 0px (ศูนย์)
  5. Color : ค่าสี ใช้ได้ทั้งชื่อสีโดยตรง หรือ hex code หรือ rgb value ก็ได้ทั้งนั้น อ้อ ใส่ alpha ไปด้วยก็ไม่ผิดกติกานะ
  6. ถ้าอยากให้มีเงาเกิดขึ้นด้านใน ก็ใส่ค่า inset ลงไปนะ แบบนี้ box-shadow: 3px 3px 5px 6px #ccc inset;

 

สำหรับ Internet Explorer จะพิเศษหน่อย

 

 

ไปดูเพิ่มได้ที่บล็อกของนาย Chris Coyier ได้ที่นี่ http://css-tricks.com/snippets/css/css-box-shadow/

หรือลองสร้าง css เองเลยที่นี่ http://css3gen.com/box-shadow/

Leave a Reply