เงาตกกระทบคือเอฟเฟ็กต์ที่ทิ้งหรือเพิ่มเงาด้านหลังองค์ประกอบ HTML ที่เลือกเมื่อแสดงผลบนหน้าเว็บ เอฟเฟกต์นี้สามารถทำได้โดยใช้ “ เงา() ” วิธีการเป็นค่าสำหรับ CSS “ กรอง ” ทรัพย์สินหรือการใช้ “ กล่องเงา ' คุณสมบัติ. ด้วยการใช้คุณสมบัติ 'box-shadow' การปรับปรุงภาพ ประสบการณ์ผู้ใช้ การเน้น และการโฟกัสสามารถดึงไปยังองค์ประกอบ HTML เป้าหมายเฉพาะได้
คู่มือนี้สาธิตขั้นตอนการสร้างเอฟเฟกต์เงาโดยใช้คุณสมบัติ box-shadow:
-
- สร้าง Solid Drop Shadow โดยใช้คุณสมบัติ box-shadow
- สร้าง Blurry Drop Shadow โดยใช้คุณสมบัติ box-shadow
- ขยายพื้นที่ Drop Shadow
วิธีสร้าง Drop Shadows ใน CSS3 โดยใช้คุณสมบัติ box-shadow
“ กล่องเงา คุณสมบัติ ” ช่วยให้นักพัฒนาสร้างลำดับชั้นภาพโดยระบุตำแหน่งสัมพัทธ์ขององค์ประกอบในหน้า ผู้สร้างหน้าเว็บสามารถสร้างภาพลวงตาของวัตถุที่ทอดเงาบนพื้นผิว ทำให้องค์ประกอบต่างๆ มีความรู้สึกโต้ตอบมากขึ้น
ไวยากรณ์
คุณสมบัติ 'box-shadow' มีไวยากรณ์ของ:
กล่องเงา: [ ชดเชยแนวนอน ] [ ชดเชยแนวตั้ง ] [ รัศมีเบลอ ] [ รัศมีการแพร่กระจาย ] [ สี ] ;
คำอธิบายของคำศัพท์ที่ใช้ในไวยากรณ์ข้างต้น:
-
- ในเบื้องต้น “ ชดเชยแนวนอน ” ดึง/จัดเก็บตำแหน่งแกน X และ “ เชิงลบ ” ค่ากำหนดเงาไปทางซ้ายและในทางกลับกัน
- “ ชดเชยแนวตั้ง ” ค่าเก็บตำแหน่งแกน Y, the “ เชิงบวก ” ค่ากำหนดเงาในทิศทางลง และในทางกลับกันในกรณีของ “ เชิงลบ ' ค่า.
- ต่อไป “ รัศมีเบลอ ค่า ” ตามชื่อกำหนดความพร่ามัวของเงา
- “ รัศมีการแพร่กระจาย ค่า ' ระบุว่ารัศมีของเงาควรขยายเท่าใด
- “ สี ” กำหนดสีเงา สามารถอยู่ใน “ เอชเอสแอล ' หรือ ' อาร์จีบี ” รูปแบบอีกด้วย
ตอนนี้ ให้เราอธิบายตัวอย่างสองสามตัวอย่างเพื่อความเข้าใจที่ดีขึ้น:
ตัวอย่างที่ 1: ใช้ Solid Drop Shadow โดยใช้คุณสมบัติ box-shadow
สำหรับการตั้งค่าเงาทึบ เฉพาะทิศทางและสีของเงาเท่านั้นที่จะถูกแทรกเป็นค่าให้กับ ' กล่องเงา ' คุณสมบัติ:
< สไตล์ >.boxShadowตัวอย่าง {
ความกว้าง: 210px;
เส้นขอบ: 2px แข็ง cornsilk;
ความสูง: 210px;
สีพื้นหลัง: #f0f0f0;
กล่องเงา: 10px 10px ป่าสีเขียว;
}
สไตล์ >
ในรหัสด้านบน:
-
- ขั้นแรก เลือกองค์ประกอบ HTML ที่มีคลาสเป็น “ boxShadowตัวอย่าง '. และมูลค่าของ “ 210px ” ให้กับ “ ความสูง ' และ ' ความกว้าง ' คุณสมบัติ. นอกจากนี้ยังใช้ “ ชายแดน ' และ ' สีพื้นหลัง ” คุณสมบัติสำหรับการแสดงภาพที่ดีขึ้น
- จากนั้นตั้งค่าของ “ 10px 10px ฟอเรสต์กรีน ” ถึง “ กล่องเงา คุณสมบัติ CSS “ 10px ” คือออฟเซ็ตแนวนอนและแนวตั้งที่กำหนดตำแหน่งที่เงาต้องการใช้ และ ' ป่าไม้เขียวขจี ” คือสีของเงา
หลังจากคอมไพล์แล้ว หน้าเว็บจะมีลักษณะดังนี้:
ผลลัพธ์ยืนยันว่ามีการวางเงาแบบทึบโดยใช้คุณสมบัติ box-shadow
ตัวอย่างที่ 2: ใช้ Blurry Drop Shadow โดยใช้คุณสมบัติ box-shadow
หากต้องการทำให้เงาที่ทาไปแล้วพร่ามัว ให้ใส่ค่าตัวเลขอีกหนึ่งค่าก่อนสีสำหรับ ' กล่องเงา ' คุณสมบัติ. เยี่ยมชมรหัสที่อัปเดตด้านล่าง:
< สไตล์ >.boxShadowตัวอย่าง {
ความกว้าง: 210px;
เส้นขอบ: 2px แข็ง cornsilk;
ความสูง: 210px;
สีพื้นหลัง: ควันขาว;
กล่องเงา: 10px 10px 15px ป่าสีเขียว;
}
สไตล์ >
ตามโค้ดข้างต้น ตอนนี้เงาคือ “ 15พิกเซล “เบลอ. หลังจากสิ้นสุดขั้นตอนการรวบรวม หน้าเว็บจะมีลักษณะดังนี้:
รูปด้านบนแสดงให้เห็นว่าตอนนี้เงาเบลอ
ตัวอย่างที่ 3: การขยายพื้นที่ Drop Shadow
ค่าสเปรดจะมอบให้กับ “ กล่องเงา ” คุณสมบัติสำหรับการขยายขอบเขตของเงา ค่าของสเปรดจะต้องอยู่ในรูปแบบตัวเลข เช่นเดียวกับตัวอย่างโค้ดด้านล่าง พื้นที่เงาจะขยายเป็น “ 20px ”:
< สไตล์ >.boxShadowตัวอย่าง {
ความกว้าง: 210px;
เส้นขอบ: 2px แข็ง cornsilk;
ความสูง: 210px;
สีพื้นหลัง: ควันขาว;
กล่องเงา: 10px 10px 15px 20px ป่าสีเขียว;
}
สไตล์ >
หลังจากการดำเนินการ เงาตกกระทบจะปรากฏดังนี้:
อย่างที่คุณเห็น ตอนนี้พื้นที่ของเงาเพิ่มขึ้น 20px
บทสรุป
“ กล่องเงา ” คุณสมบัติใช้สำหรับการสร้าง “ เงา ” มีผลกับองค์ประกอบ HTML ที่เลือก “ เงา ” คุณสมบัติยอมรับห้าค่า “ ชดเชยแนวนอน ”, “ ชดเชยแนวตั้ง ”, “ รัศมีเบลอ ”, “ รัศมีการแพร่กระจาย ' และ ' สี '. ค่า 'ออฟเซ็ตแนวนอน' และ 'ออฟเซ็ตแนวตั้ง' กำหนดขนาดสำหรับเงาจากตำแหน่งที่เงาตกกระทบควรปรากฏขึ้น ค่า 'รัศมีการเบลอ' ทำให้เงาพร่ามัว และค่า 'รัศมีการแผ่' จะขยายขอบเขตของเงา