ภาพสะท้อน CSS
ในบทนี้ คุณจะได้เรียนรู้วิธีสะท้อนภาพ
ภาพสะท้อน CSS
คุณสมบัติbox-reflect
นี้ใช้เพื่อสร้างภาพสะท้อน
ค่าของbox-reflect
คุณสมบัติสามารถเป็น: below
, above
,
, left
หรือright
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Numbers ตามด้วย -webkit- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
ตัวอย่าง
ตัวอย่าง
เราต้องการแสงสะท้อนใต้ภาพ:
img {
-webkit-box-reflect: below;
}
ตัวอย่าง
เราต้องการให้ภาพสะท้อนทางด้านขวาของภาพ:
img {
-webkit-box-reflect: right;
}
CSS Reflection Offset
หากต้องการระบุช่องว่างระหว่างภาพกับการสะท้อน ให้เพิ่มขนาดของช่องว่างลงในbox-reflect
คุณสมบัติ
ตัวอย่าง
เราต้องการการสะท้อนใต้ภาพโดยมีค่าออฟเซ็ต 20px:
img {
-webkit-box-reflect: below 20px;
}
การสะท้อน CSS พร้อมการไล่ระดับสี
นอกจากนี้เรายังสามารถสร้างเอฟเฟกต์เฟดเอาท์บนเงาสะท้อนได้อีกด้วย
ตัวอย่าง
สร้างเอฟเฟกต์จางลงบนภาพสะท้อน:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}