CSS3 Box Shadow : ทำ Drop shadow ด้วย CSS3

บทความเปิดศักราชใหม่ จาก thaicss.com เรามาว่ากันในเรื่องง่ายๆ แต่ใช้ได้ใช้ดี โดยไม่ต้องพึ่งพา ไดเกียว แต่ประการใด นั่นก็คือการทำเงา ให้กับ Element ใดๆ ที่เราต้องการ

CSS3 Box Shadow เป็น Property ที่บรรจุเอาไว้ใน CSS Backgrounds and Border Module Level 3 ถือเป็น Miscellaneous Effects ของ Module นี้ โดยใน Miscellaneous Effects มี 2 ตัว ตัวแรกคือ box-shadow ที่กำลังจะพูดถึง และตัวที่สองคือ box-decoration-break เอาไว้พูดถึงในโอกาสหน้า (ถ้ายังมีอยู่)

box-shadow สามารถใส่ค่าการทำ drop-shadow ได้มากกว่า 1 สี โดยการใช้ คอมม่า ในการแบ่งการสั่งงาน

หลักการสั่งงานของคำสั่งมีดังนี้
ตัวอย่าง Code:

หรือ

  1. เลขค่าแรก คือการสั่งงาน เงา แนวนอน เลขบวกคือ ด้านขวา เลขลบ คือด้านซ้าย
  2. เลขตัวที่สอง คือการสั่งงาน แนวตั้ง เลขบวกคือ ด้านล่าง เลขลบ คือด้านบน
  3. เลขตัวที่สาม คือการสั่ง ค่าการเบลอ ว่าจะเบลอประมาณไหน เริ่มจากค่า โรงงานคือ ศูนย์ และเป็นค่าบวก
  4. เลขตัวที่สี่ คือการสั่งขอบเขตการขยายตัวของการเบลอ (a spread distance) ใช้เป็นค่า บวกเท่านั้น
  5. สีของเงา สามารถใส่ได้ตามหลักการของ W3C ซึ่ง อ้างอิงจาก CSS Colors Module Level 3
  6. inset คือคำสั่งให้ เงาเด้งกลับเข้าไปในกล่อง ซึ่งคล้ายๆ การสั่ง inner shadow ของ Adobe Photoshop

ตัวอย่างเช่น

ตัวอย่าง css box shadow

ต่อไปเราลองมาเขียนแบบผสม เพื่อให้ box นั้นแสดง เงา มากกว่า 1 แบบลองดูครับ

ตัวอย่าง การเขียน CSS3 box-shadow จาก บราวเซอร์ต่างๆ
ตัวอย่าง การเขียน CSS3 box-shadow จาก บราวเซอร์ต่างๆ

การนำไปประยุกต์ใช้งาน

เราจะนำการเขียน box-shadow ไปประยุกต์ใช้กับงานของเราในอนาคตได้อย่างไร ตอนนี้ผมขอยกตัวอย่างการทำ Horrizontal Navigation หรือ การทำ เมนูแนวนอน ง่ายๆ แล้วใช้ box-shadow เข้าร่วมด้วย พอเป็นยาถ่ายก็แล้วกันนะครับ

HTML:

CSS:

ภาพตัวอย่าง:

ภาพตัวอย่าง

หรือสามารถเข้าไปดูตัวอย่างโค้ดได้จาก:

ตัวอย่างการเขียน CSS Box-shadow

หมายเหตุ:
จากตัวอย่างโค้ด ผมเขียน Properties แปลกๆ อย่างเช่น box-sizing: border-box; เข้ามา หลายคนอาจจะเกิดอาการ งง ว่ามันคืออะไร ขออธิบายเพิ่มเติมน้อยๆ เล็กๆ นะครับ box-sizing: คือการกำหนดขนาดการแสดงผลของ box model ซึ่งมี ค่า content-box และ border-box โดยปกติแล้ว เวลาที่เรากำหนดขนาดของ box ใดๆ โดยให้ความกว้าง เช่น width: 100px; เมื่อเราใส่ padding เข้าไป อีกข้างละ 10px ความกว้างนั้นจะกลายเป็น 120px ทันที แต่เมื่อไหร่ก็ตามที่เราสั่ง box-sizing เป็น content-box เข้าไป ความกว้างนั้นจะไม่ขยาย กลายเป็นพื้นที่การแสดงผลต่างหากที่ถูกลดลง

จริงๆ แล้วผมเขียนบทความเรื่อง Box model เอาไว้แล้ว หรือเปล่าวะ

มีความสุขกับการใช้ชีวิตครับ

Back to Top

4 Responses to CSS3 Box Shadow : ทำ Drop shadow ด้วย CSS3

  1. aoon

    ได้ความรู้ขึ้นอีกเยอะเลย ผมอยากรู้เรื่อง transition ให้ละเอียดอีกหน่อยอ่ะครับ อยากให้พี่อธิบาย โค๊ดแบบวรรคต่อวรรคแบบนี้เลยอ่ะครับ เข้าใจดีมากเลยครับ

    Reply

  2. aoon

    เรื่อง transfrom ด้วยก็ดีนะครับ

    Reply

  3. kiak

    เขียนผิดแล้วหละครับ

    เลขตัวที่สาม คือการสั่ง ค่าการเบลอ ว่าจะเบลอประมาณไหน เริ่มจากค่า โรงงานคือ ศูนย์ และเป็นค่าบวก

    เลขตัวที่สี่ คือการสั่งขอบเขตการขยายตัวของการเบลอ (a spread distance) ใช้เป็นค่า บวกเท่านั้น

    จริงๆแล้วต้องเป็น
    ตัวเลขที่สาม คือ ถมสีลงขอบ แบบไม่เบลอ px
    ตัวเลขที่สี่ คือ เบลอ สีออกไป เรื่อยๆ ตามจำนวน px

    Reply

    • Sitthiphorn Anthawonksa
      Sitthiphorn Anthawonksa

      อันนี้ น่าจะถูกกว่า ขอรับ :)
      เดี๋ยวผมเอาไปแก้ไขบทความด้านบนนะคร๊าบบบ ขอบคุณหลาย
      ;)

      Reply

Leave a Reply

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

Connect with Facebook

Back to Top