วิธีการใช้เอฟเฟกต์เงาหลายชั้นใน CSS

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

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

1. ใช้แอตทริบิวต์ BOX-SHADOW

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

ก่อนอื่น มาดูไวยากรณ์พื้นฐานของ box-shadow:

กล่องเงา: h-offset v-offset เบลอสีกระจาย;

h-offset (ออฟเซ็ตแนวนอน) และ v-offset (ออฟเซ็ตแนวตั้ง) ควบคุมทิศทางของเงา ความเบลอ (ระยะเบลอ) กำหนดว่าเงาจะเบลอแค่ไหน การแพร่กระจาย (รัศมีการแพร่กระจาย) สามารถทำให้เงาใหญ่ขึ้นหรือเล็กลงได้ สีกำหนดสีของเงา

หากต้องการสร้างเอฟเฟกต์เงาแบบหลายชั้น คุณสามารถเขียนโค้ด CSS ได้ดังนี้:

.องค์ประกอบ {

กล่องเงา: 0px 5px 5px rgba (0,0,0,0.3)

10px 10px 10px RGB (0,0,0,0.2)

15px 15px 15px RGB (0,0,0,0.1);

-

ในตัวอย่างนี้ .element จะแสดงเงาสามชั้น โดยแต่ละชั้นมีทิศทาง ความเบลอ และสีที่แตกต่างกัน ทำให้เกิดเอฟเฟ็กต์ภาพแบบเลเยอร์

2. ใช้แอตทริบิวต์ FILTER

คุณสมบัติตัวกรองเป็นอีกวิธีหนึ่งในการสร้างเอฟเฟกต์ที่คล้ายกับเงา แม้ว่าโดยปกติจะใช้เพื่อให้ได้เอฟเฟกต์ต่างๆ เช่น การเบลอ การเปลี่ยนสี ฯลฯ แต่ฟังก์ชัน filter: drop-shadow() สามารถใช้เพื่อสร้างเอฟเฟกต์เงาที่คล้ายกับ box-shadow ได้

ไวยากรณ์ของฟังก์ชัน drop-shadow() มีดังนี้:

ตัวกรอง: drop-shadow (h-offset v-offset สีเบลอ);

พารามิเตอร์ของมันคล้ายกับ box-shadow แต่โปรดทราบว่า drop-shadow() ไม่สามารถระบุรัศมีการแพร่กระจายได้

เพื่อให้เกิดเงาหลายชั้น คุณสามารถซ้อนฟังก์ชัน drop-shadow() ได้หลายแบบ:

.องค์ประกอบ {

ตัวกรอง: เงาหล่น (0px 5px 5px rgba (0,0,0,0.3))

วางเงา (10px 10px 10px rgba (0,0,0,0.2))

วางเงา (15px 15px 15px rgba (0,0,0,0.1));

-

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

3. บรรลุผลโดยการซ้อนหลายองค์ประกอบ

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

ตัวอย่างเช่น คุณสามารถใช้องค์ประกอบหลอก :before หรือ :after สำหรับแต่ละเลเยอร์เงา และใช้เงากล่องหรือสีพื้นหลังเพื่อจำลองเอฟเฟกต์เงา:

.องค์ประกอบ::ก่อน .องค์ประกอบ::หลัง {

เนื้อหา: ;

ตำแหน่ง: แน่นอน;

/* การตั้งค่าตำแหน่งและขนาด*/

-

.องค์ประกอบ::ก่อน {

กล่องเงา: 0px 5px 5px rgba (0,0,0,0.3);

-

.องค์ประกอบ::หลังจาก {

กล่องเงา: 10px 10px 10px rgba (0,0,0,0.2);

-

วิธีนี้เหมาะสำหรับการบรรลุเอฟเฟกต์เงาที่ปรับแต่งได้สูง โดยเฉพาะอย่างยิ่งเมื่อเงาต้องการรูปร่างหรือตำแหน่งที่ผิดปกติ

สรุปแล้ว

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

คำถามที่พบบ่อยที่เกี่ยวข้อง:

จะใช้สไตล์ CSS เพื่อเพิ่มเอฟเฟกต์เงาหลาย ๆ อันให้กับองค์ประกอบได้อย่างไร

ขั้นแรก เพิ่มเอฟเฟกต์เงาธรรมดาให้กับองค์ประกอบ โดยใช้แอตทริบิวต์ "box-shadow" ตัวอย่างเช่น: box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); สิ่งนี้จะสร้างเอฟเฟกต์เงาที่เบลอเล็กน้อยที่ด้านล่างและด้านขวาขององค์ประกอบ จากนั้นเราสามารถดำเนินการเพิ่มเอฟเฟกต์เงาหลายชั้นต่อไปได้ ซึ่งสามารถทำได้โดยการเพิ่มค่าหลายค่าให้กับคุณสมบัติ "box-shadow" แต่ละค่าแสดงถึงเลเยอร์เงา ตัวอย่างเช่น: box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 4px 4px 8px rgba(0, 0, 0, 0.3); สิ่งนี้จะสร้างเงาสองอันที่มีจุดแข็งต่างกันที่ด้านล่างและด้านขวาของ ระดับองค์ประกอบ สุดท้าย ให้เพิ่มระดับเงาต่อไปโดยเพิ่มค่า "box-shadow" หลายค่าซ้ำๆ ตัวอย่างเช่น: กล่องเงา: 2px 2px 4px rgba(0, 0, 0, 0.5), 4px 4px 8px rgba(0, 0, 0, 0.3), 6px 6px 12px rgba(0, 0, 0, 0.2); คือ คุณสามารถสร้างเอฟเฟ็กต์เงาด้วยความเข้มและความเบลอที่แตกต่างกันสามชั้น

จะสร้างเอฟเฟกต์พิเศษโดยใช้เอฟเฟกต์เงาหลายชั้นใน CSS ได้อย่างไร

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

จะสร้างเอฟเฟกต์เงาหลายชั้นที่มีสีต่างกันใน CSS ได้อย่างไร

ขั้นแรก คุณสามารถเพิ่มเอฟเฟ็กต์เงาให้กับองค์ประกอบได้โดยใช้แอตทริบิวต์ "box-shadow" เอฟเฟ็กต์เงาของสีต่างๆ สามารถทำได้โดยการปรับช่องอัลฟาในค่าสี "rgba" ตัวอย่างเช่น: box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5); สิ่งนี้จะสร้างเอฟเฟกต์เงาสีแดง ประการที่สอง เพื่อสร้างเอฟเฟกต์เงาหลายชั้นที่มีสีต่างกัน คุณสามารถใช้คุณสมบัติ "box-shadow" ซ้ำและเพิ่มค่าสีที่แตกต่างกันได้ ตัวอย่างเช่น: box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5), 4px 4px 8px rgba(0, 255, 0, 0.3); สุดท้ายนี้ ให้เพิ่มเอฟเฟ็กต์เงาของสีต่างๆ ต่อไป ซึ่งสามารถทำได้โดยการเพิ่มค่าหลายค่าในแอตทริบิวต์ "box-shadow" ซ้ำๆ และตั้งค่าสีที่ต่างกัน ตัวอย่างเช่น: กล่องเงา: 2px 2px 4px rgba(255, 0, 0, 0.5), 4px 4px 8px rgba(0, 255, 0, 0.3), 6px 6px 12px rgba(0, 0, 255, 0.2); คือ สามารถสร้างเอฟเฟกต์เงาด้วยสีที่แตกต่างกันสามสีได้

ฉันหวังว่าคำอธิบายโดยบรรณาธิการของ Downcodes จะช่วยให้คุณเข้าใจและใช้เอฟเฟกต์เงาหลายชั้นของ CSS ได้ดีขึ้น และเพิ่มความตื่นเต้นให้กับการออกแบบเว็บไซต์ของคุณ!