ภาพสะท้อน CSS3 [เคล็ดลับ CSS3]
จนถึงตอนนี้เราได้พูดถึงคุณสมบัติใหม่มากมายใน CSS3. นอกเหนือจากนั้นมีคุณสมบัติอื่น ๆ อยู่เล็กน้อยซึ่งปัจจุบันไม่รวมอยู่ในข้อกำหนดอย่างเป็นทางการของ CSS3 ที่ควรลองใช้ซึ่งหนึ่งในนั้นคือ กล่องสะท้อนให้เห็นถึง คุณสมบัติที่ริเริ่มโดย Webkit. คุณสมบัตินี้สามารถสะท้อนวัตถุที่ระบุ.
การสะท้อนขั้นพื้นฐาน
การใช้งานพื้นฐานค่อนข้างง่าย สมมุติว่าเราต้องการการสะท้อนใต้วัตถุจริง เราสามารถเขียน:
img -webkit-box-reflect: ด้านล่าง;
ตัวอย่างนี้แสดงให้เห็นว่าเราสะท้อนภาพอย่างไร ด้านล่าง (ตำแหน่ง) วัตถุ แต่ในกรณีนี้เรายังสามารถสะท้อนภาพของ ขวา, ซ้าย, และ ข้างบน.
การสะท้อนกลับ
สาขา ใช้เพื่อกำหนดช่องว่างระหว่างการสะท้อนกับวัตถุจริงที่สะท้อน ลองดูตัวอย่างโค้ดด้านล่าง
img -webkit-box-reflect: ต่ำกว่า 10px;
ในโค้ดข้างต้นเราแยกการสะท้อนจากวัตถุจริงโดย 10px;
- ดูการสาธิต
กำบังด้วยการไล่ระดับสี
เอฟเฟกต์การสะท้อนที่เราเห็นโดยทั่วไปคือการเฟดออกที่ด้านล่างและแสดงวัตถุจริงเพียงครึ่งเดียวหรือน้อยกว่า ในการทำซ้ำเอฟเฟกต์ชนิดนี้เราสามารถนำไปใช้ได้ การไล่ระดับสี CSS3 เพื่อปกปิดวัตถุเช่นนั้น
-webkit-box-reflect: ด้านล่าง 0px -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, จาก (โปร่งใส) ถึง (rgba (250, 250, 250, 0.1)));
รหัสนี้จะส่งผลให้งานนำเสนอต่อไปนี้;
เรายังสามารถใช้ สีแบบครบวงจร เพื่อควบคุมการเปลี่ยนและทำให้ภาพสะท้อนกลับดูดีขึ้น:
img -webkit-box-reflect: ด้านล่าง 0px -webkit-gradient (เชิงเส้นด้านบนซ้ายล่างซ้ายจาก (โปร่งใส), สีหยุด (70%, โปร่งใส) ถึง (rgba (250, 250, 250, 0.1) )));
- ดูการสาธิต
ทางเลือกสำหรับ Firefox
อย่างไรก็ตามคุณสมบัตินี้ทำงานเฉพาะในเบราว์เซอร์ Webkit (หมายถึง Safari และ Chrome) ในขณะนี้ ในการส่งเอฟเฟกต์เดียวกันใน Firefox คุณต้องมีเส้นทางอื่น: กำลังใช้ -moz องค์ประกอบ () ฟังก์ชัน ฟังก์ชั่นนี้เป็นหลักจะสร้างหรือทำซ้ำเนื้อหาจากองค์ประกอบ HTML ที่เฉพาะเจาะจง ลองมาดูตัวอย่างต่อไปนี้
เรามีภาพห่อใน และเพื่อเก็บการสะท้อนเราจะใช้ น่าเสียดายที่ยังไม่มีวิธีง่ายๆในการสร้าง ดี ผลสะท้อนใน Firefox โดยใช้วิธีนี้ โค้ดด้านบนจะสร้างภาพสะท้อนโดยไม่มีเอฟเฟกต์จาง.moz-สะท้อนให้เห็นถึง ID;
:หลังจาก องค์ประกอบหลอก, ดังนี้ # moz-reflect: หลัง content: ""; จอแสดงผล: บล็อก; พื้นหลัง: -moz-element (# moz-reflect) ไม่ทำซ้ำ; ความกว้าง: อัตโนมัติ ความสูง: 375px; ระยะขอบล่าง: 100px; -moz-transform: scaleY (-1);
-moz-เปลี่ยน ด้วยมาตราส่วนเชิงลบจะใช้ในการพลิกวัตถุที่สร้างกลับหัว นอกจากนี้ตรวจสอบให้แน่ใจ ความสูง มีความแม่นยำเพียงพอกับวัตถุจริง ความสูง เพื่อหลีกเลี่ยงเส้นพิเศษที่ไม่จำเป็นสำหรับการจัดตำแหน่งการสะท้อน.อ้างอิงเพิ่มเติม
