Phản chiếu hình ảnh CSS3 [Mẹo CSS3]
Cho đến nay, chúng tôi đã thảo luận rất nhiều tài sản mới trong CSS3. Ngoài ra, thực sự có một vài thuộc tính khác hiện không được bao gồm trong các thông số kỹ thuật chính thức của CSS3 đáng để thử, một trong số đó là phản xạ hộp tài sản được khởi xướng bởi Webkit. Thuộc tính này có thể phản ánh trên các đối tượng được chỉ định.
Phản xạ cơ bản
Việc thực hiện cơ bản là khá trực quan; giả sử, chúng ta muốn sự phản chiếu bên dưới đối tượng thực sự. Chúng tôi có thể viết:
img -webkit-box-Refl: bên dưới;
Ví dụ này cho thấy cách chúng ta phản ánh một hình ảnh phía dưới (vị trí) đối tượng. Nhưng, trong trường hợp này, chúng ta cũng có thể giữ sự phản chiếu cho đúng, trái, và ở trên.
Phản xạ bù đắp
Bù lại được sử dụng để xác định khoảng cách giữa sự phản chiếu và đối tượng thực sự được phản ánh. Hãy xem đoạn mã dưới đây;
img -webkit-box-Refl: dưới 10px;
Trong đoạn mã trên, chúng tôi đã phân tách sự phản chiếu từ đối tượng thực bằng cách 10px;
- Xem bản demo
Đắp mặt nạ với học sinh
Hiệu ứng phản chiếu mà chúng ta thường thấy là sự mờ dần ở phía dưới và chỉ hiển thị một nửa hoặc ít hơn vật thật. Để nhân rộng loại hiệu ứng này, chúng ta có thể áp dụng Học sinh CSS3 để che dấu đối tượng, như vậy;
-webkit-box-Refl: dưới 0px -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ (trong suốt), đến (rgba (250, 250, 250, 0.1)));
Mã này sẽ dẫn đến việc trình bày sau đây;
Chúng tôi cũng có thể sử dụng dừng màu để kiểm soát các hiệu ứng chuyển tiếp và làm cho hình ảnh phản chiếu đẹp hơn:
img -webkit-box-Refl: dưới 0px -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ (trong suốt), dừng màu (70%, trong suốt), đến (rgba (250, 250, 250, 0.1 )));
- Xem bản demo
Các lựa chọn thay thế cho Firefox
Tuy nhiên, thuộc tính này hiện chỉ hoạt động trong các trình duyệt Webkit (có nghĩa là Safari và Chrome). Để cung cấp hiệu ứng tương tự trong Firefox, bạn cần một tuyến đường khác: sử dụng -phần tử moz () chức năng. Hàm này về cơ bản sẽ tạo hoặc sao chép nội dung từ các phần tử HTML cụ thể. Chúng ta hãy xem ví dụ sau đây;
Chúng tôi có một hình ảnh được bọc trong một Và, để giữ sự phản chiếu, chúng tôi sẽ sử dụng Các Thật không may, vẫn không có cách dễ dàng để tạo ra một tốt đẹp hiệu ứng phản chiếu trong Firefox bằng cách sử dụng thực hành này. Đoạn mã trên sẽ đơn giản tạo ra sự phản chiếu, không có hiệu ứng mờ dần.phản xạ ID;
:sau yếu tố giả, như sau; # moz-Refl: sau nội dung: ""; hiển thị: khối; nền: -moz-phần tử (# moz-Refl) không lặp lại; chiều rộng: tự động; chiều cao: 375px; lề dưới: 100px; -moz-biến đổi: scaleY (-1);
-biến đổi với tỷ lệ âm được sử dụng để lật ngược đối tượng được tạo. Ngoài ra, hãy chắc chắn rằng Chiều cao là đủ chính xác với đối tượng thực sự Chiều cao để tránh các dòng phụ không cần thiết để định vị sự phản chiếu.Tham khảo thêm
