บทช่วยสอน CSS Box Shadow: คำแนะนำทีละขั้นตอน (+ ตัวอย่าง)

เหตุใดคุณสมบัติ CSS box-shadow จึงสมควรได้รับบทช่วยสอนของตัวเอง เนื่องจากดังที่คุณเห็นด้านล่าง คุณสมบัตินี้เป็นหนึ่งในคุณสมบัติที่ซับซ้อนมากขึ้นซึ่งรับค่าจำนวนหนึ่งไปพร้อม ๆ กัน สิ่งนี้อาจทำให้มีความท้าทายเป็นพิเศษสำหรับผู้เริ่มต้น

หากคุณประสบปัญหาในการใช้ box-shadow อย่างถูกต้อง แสดงว่าคุณมาถูกที่แล้ว ในคำแนะนำด้านล่าง เราจะพูดถึงทุกสิ่งที่ควรรู้เกี่ยวกับคุณสมบัติ CSS นี้ เราจะพูดถึงสิ่งที่มันทำ วิธีใช้ไวยากรณ์ของมันอย่างถูกต้อง ตัวอย่าง CSS box-shadow เจ๋ง และสุดท้ายเครื่องมือสร้างบางอย่างที่ทำให้การทำงานง่ายขึ้น

CSS Box Shadow คืออะไร?

แม้ว่าคุณจะไม่ทราบคุณสมบัติของ CSS box-shadow จนถึงขณะนี้ คุณอาจเคยเห็นมันในเว็บแล้ว

ด้านบนเป็นตัวอย่างที่ดีของสิ่งที่ดูเหมือนในป่า (แม้ว่าฉันจะเพิ่มมันที่นี่เล็กน้อยเพื่อให้ประเด็น) box-shadow นั้นเป็นสิ่งที่ชื่อบอกไว้โดยพื้นฐาน: มันช่วยให้คุณเพิ่มเงาหล่นลงในเฟรมขององค์ประกอบเกือบทุกชนิด เงาจะยึดติดกับรูปร่างของสมอด้วย ไม่ว่าจะเป็นสี่เหลี่ยม สี่เหลี่ยม กลม หรือวงรี สิ่งนี้ยังคงเป็นจริงเมื่อคุณตั้งค่าคุณสมบัติ border-radius

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

ไวยากรณ์เงากล่องพื้นฐาน

เมื่อคุณดูองค์ประกอบที่มีเงากล่องโดยใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ คุณจะพบมาร์กอัปดังนี้:

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

ดูซับซ้อนไปหน่อยใช่มั้ย?

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

ดังที่คุณเห็นด้านบน box-shadow สามารถรับค่าได้ถึงหกค่า มาดูพวกเขาทีละคน

offset-x

ค่าแรกคือระยะทางแนวนอนของเงาตกกระทบจากด้านข้างขององค์ประกอบจุดยึด ค่าบวกจะเลื่อนไปทางขวา ค่าลบไปทางซ้าย

คุณสามารถใช้ประเภทข้อมูล CSS ทั่วไปทั้งหมดที่แสดงถึงความยาวของค่านี้ เช่น px , em , vh และอื่นๆ ที่ใช้กันมากที่สุดคือ px และ em

offset-y

เหมือนกับด้านบนแต่สำหรับแกนตั้ง ค่าบวกย้ายเงาใต้องค์ประกอบ ค่าลบอยู่ด้านบน

เบลอรัศมี

สิ่งนี้กำหนดความเบลอของเงาของกล่อง ยิ่งค่าสูงเท่าไรก็ยิ่งเบลอมากขึ้นเท่านั้น blur-radius ยังรับค่าความยาว CSS ทั่วไปทั้งหมด แต่ไม่มีค่าลบ

รัศมีการแพร่กระจาย

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

สี

อย่างที่คุณอาจเดาได้ วิธีนี้ทำให้คุณสามารถกำหนดสีของเงากล่องได้ตามปกติ ส่วนใหญ่มักจะแสดงเป็นเลขฐานสิบหก (เช่น #ededed ) หรือ rgba (เช่น rgba rgba(46, 182, 142, 0.9) ) ส่วนหลังยังช่วยให้คุณควบคุมความทึบซึ่งมักใช้สำหรับเงาตกกระทบ

หมายเหตุ หากคุณไม่ได้ตั้งค่าสี เบราว์เซอร์จะใช้สีข้อความที่ใช้อยู่ในปัจจุบัน

สิ่งที่ใส่เข้าไป

สุดท้าย คุณสามารถเลือกเพิ่มสิ่งที่ inset ที่จุดเริ่มต้นของการประกาศได้ การดำเนินการนี้จะเปลี่ยนเงาจากเงาหล่นไปเป็นเงาภายในองค์ประกอบ โดยจะปรากฏภายในเส้นขอบ เหนือพื้นหลัง แต่อยู่ใต้เนื้อหาขององค์ประกอบ จึงไม่ครอบคลุมข้อความใดๆ เป็นต้น

การใช้ค่าตามลำดับ

นี่คือลำดับที่ค่าของคุณสมบัติ box-shadow ปรากฏขึ้น

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

ในการกำหนดเงาของกล่อง คุณต้องมีค่าความยาวอย่างน้อยสองค่า เบราว์เซอร์จะใช้สิ่งเหล่านั้นสำหรับ offset-x และ offset-y โดยอัตโนมัติ หากคุณเพิ่มอันที่สาม มันจะถูกตีความว่าเป็น blur-radius อันที่สี่เป็น spread-radius สิ่งที่ inset และ color เป็นตัวเลือกและสามารถปรากฏที่ส่วนท้ายหรือจุดเริ่มต้นและในลำดับใดก็ได้ CSS ด้านล่างทั้งหมดจะมีผลลัพธ์เหมือนกัน

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

การกำหนดเงากล่องหลายอัน

สิ่งที่ทุกคนไม่ทราบคือคุณสามารถตั้งค่าเงาหลายกล่องสำหรับองค์ประกอบเดียวกันได้ สำหรับสิ่งนั้น เพียงระบุค่ามากกว่าหนึ่งกลุ่มและคั่นด้วยเครื่องหมายจุลภาค

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

รหัสด้านบนออกมามีลักษณะดังนี้:

คุณยังสามารถใช้สิ่งนี้เพื่อสร้างเส้นรอบองค์ประกอบ ในการนั้น คุณเพียงแค่ต้องเพิ่มเงาหลายๆ อันในสีต่างๆ และตั้งค่าออฟเซ็ตและเบลอให้เป็นศูนย์

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

ส่งผลให้เส้นขอบมีสีต่างกัน:

โปรดทราบว่าสิ่งนี้ไม่ส่งผลกระทบต่อขนาดของโมเดลกล่อง ดังนั้นเงาของกล่องจะไม่เพิ่มขนาดโดยรวมขององค์ประกอบในลักษณะของ margin หรือ border

ความเข้ากันได้ของเบราว์เซอร์

ความเข้ากันได้ของเบราว์เซอร์สำหรับ box-shadow ไม่ใช่สิ่งที่คุณต้องกังวลจริงๆ เป็นคุณสมบัติ CSS ที่ได้รับการยอมรับจากแทบทุกเบราว์เซอร์ รวมถึงมาร์กอัปอย่างสิ่งที่ inset และเงาหลายอัน

เพื่อรองรับเวอร์ชันเก่าของเบราว์เซอร์บางรุ่น เป็นเรื่องปกติที่จะรวมคุณสมบัติ -webkit-box-shadow และ -moz-box-shadow ด้วยค่าเดียวกัน อย่างไรก็ตาม สำหรับเวอร์ชันล่าสุดของเบราว์เซอร์ทั่วไปส่วนใหญ่ สิ่งนี้ไม่จำเป็นอีกต่อไป

ตัวอย่าง CSS Box Shadow

ถัดไปในบทช่วยสอน box-shadow นี้ เราต้องการดูตัวอย่างของ CSS box shadows เพื่อให้คุณเห็นว่าคุณสมบัตินี้เป็นไปได้อย่างไร เราจะย้ายจากแอปพลิเคชันมาตรฐานไปเป็นแอปพลิเคชันที่ไม่ธรรมดา เพราะอย่างที่คุณเห็น คุณสามารถทำสิ่งที่น่าตื่นเต้นกับมันได้

เพิ่มเงาให้กับปุ่ม

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

มาร์กอัปประกอบมีลักษณะดังนี้:

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

ซอฟต์บ็อกซ์เงา

หากคุณต้องการสร้างเงากล่อง CSS ที่ค่อนข้างอ่อน คุณต้องทำงานกับการเบลอและกระจายเป็นส่วนใหญ่ในขณะที่ตั้งค่าออฟเซ็ตเป็น 0 วิธีนี้จะทำให้เงาไม่ได้มีรูปร่างที่ชัดเจนแต่จะค่อยๆ ปรากฏขึ้นรอบๆ ขอบเท่านั้น

เพื่อให้บรรลุผลข้างต้น คุณสามารถใช้มาร์กอัปต่อไปนี้:

 box-shadow: 0 0 50px 10px #999;

นี่เป็นวิธีที่ยอดเยี่ยมในการสร้างเงากล่องในทุกด้านขององค์ประกอบ หากคุณต้องการทำให้มันชัดเจนยิ่งขึ้น เพียงเพิ่มส่วนต่าง ลดความเบลอ และใช้สีเข้มขึ้น

เงาหลายกล่อง

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

มันง่ายอย่างน่าประหลาดใจ: คุณเพียงแค่ต้องซ้อนเงาของกล่องทับกันโดยเพิ่มออฟเซ็ตเท่าๆ กันในขณะที่ลดความทึบลงในเวลาเดียวกัน อีกอย่าง เมื่อใช้กล่องเงาหลายๆ ช่อง การเขียนการประกาศแยกเป็นบรรทัดช่วย แทนที่จะเป็นการประกาศแบบยาวๆ ทำให้เข้าใจง่ายขึ้นมาก

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

คุณยังสามารถทำสิ่งนี้เพิ่มเติมได้โดยการแนะนำเงากล่องสีขาวที่มีค่า spread-radius เป็นลบในระหว่างนั้น ส่งผลให้เกิดภาพลวงตาขององค์ประกอบหลายอย่างซ้อนทับกัน

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

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

ตัวอย่างสุดท้ายของ CSS box shadows หลายๆ แบบคือวิธีการดังกล่าวในการตั้งค่า offsets และ blur to 0 ดังที่เราได้เห็นข้างต้น ส่งผลให้องค์ประกอบมีโครงร่างหลายแบบและมีสีสันในกรณีนี้ อย่างไรก็ตาม วิธีนี้ใช้ได้เพราะค่า spread-radius เพิ่มขึ้นสำหรับเงาแต่ละกล่อง

หากคุณต้องการลองด้วยตัวเอง คุณสามารถเริ่มต้นด้วยสิ่งนี้:

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

เครื่องกำเนิดเงากล่องที่ดีที่สุด

ดังที่เราได้กล่าวไปแล้ว box-shadow ใช้ค่ามากมาย ดังนั้นจึงอาจต้องใช้การทดลองและข้อผิดพลาดเล็กน้อยจนกว่าคุณจะได้เงาที่คุณต้องการ

เพื่อให้ง่ายขึ้น มีเครื่องมือสร้างเงากล่องจำนวนมากที่ให้คุณเล่นกับการควบคุม ดูผลลัพธ์ทันที จากนั้นคัดลอกมาร์กอัปเมื่อพอใจแล้ว

นี่คือตัวเลือกที่ดีที่สุดสำหรับเครื่องกำเนิดเงาแบบกล่อง:

• box-shadow.dev — เครื่องมือเอนกประสงค์นี้มีฟังก์ชันทั้งหมดที่คุณต้องการและอินเทอร์เฟซผู้ใช้ที่ดีที่สุดของพวง คุณสามารถใช้ inset สร้างเงาหลายช่อง ควบคุมออฟเซ็ต เบลอ และกระจายผ่านแถบเลื่อน และป้อนสีด้วยตนเอง เมื่อพอใจแล้ว ให้คลิก แสดงโค้ด เพื่อคัดลอกมาร์กอัป CSS ข้อเสียเพียงอย่างเดียวคือไม่มีรหัสสำหรับเบราว์เซอร์รุ่นเก่า
• CSSmatic Box Shadow CSS Generator — คล้ายกับด้านบน ให้คุณควบคุมคุณสมบัติของ box-shadow เลื่อนและป้อนตัวเลขด้วยตนเอง มีการควบคุมความทึบของตัวเองซึ่งเป็นสิ่งที่ดี ในทางกลับกัน ไม่มีฟังก์ชันการทำงานสำหรับเงาหลายเงา โค้ดมาร์กอัปที่คุณได้รับรวมถึงเบราว์เซอร์รุ่นเก่า
• Box Shadow CSS Generator — ตัวเลือกที่มั่นคงที่มีความสามารถในการเลือกสีและให้รหัสสำหรับเบราว์เซอร์รุ่นเก่าเช่นกัน คุณสามารถคัดลอกด้วยการคลิกง่ายๆ มีการควบคุมความทึบ แต่สามารถสร้างเงาได้เพียงอันเดียว
• CSS3gen CSS3 Box Shadow Generator — ตัวสร้างเงาอีกตัวหนึ่ง คุณลักษณะที่ยอดเยี่ยมของที่นี้คือ แทนที่จะออฟเซ็ต x และ y คุณสามารถเลือกมุมเงาและระยะทาง และเครื่องมือจะจัดการส่วนที่เหลือโดยอัตโนมัติ ด้วยเหตุผลบางอย่าง spread-radius และสิ่งที่ inset มีเมนูของตัวเอง CSS ที่คุณเพียงแค่คัดลอกและวางยังรวมมาร์กอัปสำหรับเบราว์เซอร์รุ่นเก่าๆ ด้วย

ความคิดสุดท้าย: CSS Box Shadow

คุณสมบัติ box-shadow สามารถครอบงำในตอนแรก เป็นหนึ่งในคุณสมบัติที่ใช้ค่าจำนวนมาก ดังนั้นมันจึงอาจดูซับซ้อนกว่าที่เป็นจริง หวังว่าบทช่วยสอน CSS box-shadow นี้จะทำให้ความรู้สึกนั้นสงบลง

ด้านบน เราได้ศึกษาว่า CSS box-shadow คืออะไรและทำงานอย่างไร เราได้อธิบายไวยากรณ์ ค่านิยม และวิธีการทำงานร่วมกัน นอกจากนี้ เราได้ดูตัวอย่างมากมายเกี่ยวกับวิธีใช้เงากล่อง CSS ในชีวิตจริง รวมถึงมาร์กอัปที่คุณสามารถใช้ได้ทันที สุดท้าย สำหรับผู้ที่ต้องการความช่วยเหลือเล็กน้อย เราได้แสดงรายการ CSS box-shadow generators จำนวนหนึ่งที่สามารถช่วยคุณได้มาก

ถึงตอนนี้ คุณควรรู้สึกว่าสามารถใช้คุณลักษณะ CSS นี้บนเว็บไซต์ของคุณได้ เราหวังว่าจะได้เห็นสิ่งที่คุณทำกับมัน

คุณใช้ CSS box shadow บนเว็บไซต์ของคุณอย่างไร? กรณีการใช้งานที่น่าตื่นเต้นใด ๆ ที่เราไม่ได้กล่าวถึงข้างต้น แจ้งให้เราทราบในความคิดเห็นด้านล่าง!