Tạo Hiệu Ứng Phản Chiếu Với CSS3

Trong thiết kế web hiện đại, hiệu ứng đổ bóng (Reflection) giúp hình ảnh hoặc chữ cái trở nên lung linh và có chiều sâu hơn. Thay vì phải dùng Photoshop, bạn có thể thực hiện việc này chỉ với vài dòng CSS.

1. Sử dụng thuộc tính -webkit-box-reflect

Hiện tại, cách đơn giản nhất để tạo hiệu ứng này là sử dụng thuộc tính -webkit-box-reflect.

Cấu trúc cơ bản:

-webkit-box-reflect: [hướng] [khoảng cách] [mặt nạ (mask)];

-webkit-box-reflect: [hướng] [khoảng cách] [mặt nạ (mask)];

2. Ví dụ thực tế

Mã html

<h2>CSS3 Reflection (Webkit & Firefox) </h2>
<div id="someid">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog2.jpg">
<div/>

<h2>CSS3 Reflection (Webkit & Firefox) </h2>
<div id="someid">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/dog2.jpg">
<div/>

Mã CSS

#someid{
   position:relative;
    width: 400px;
    -webkit-box-reflect: below -5px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

#someid{
   position:relative;
    width: 400px;
    -webkit-box-reflect: below -5px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

3. Giải thích các tham số

• below: Hướng đổ bóng (có thể dùng above, left, right, below).
• 2px: Khoảng cách giữa vật thể và bóng.
• linear-gradient: Đây là phần quan trọng nhất để làm bóng mờ dần đi, giúp hiệu ứng trông thật hơn. Nếu không có phần này, bóng sẽ hiển thị rõ nét như một tấm gương.

4. Lưu ý về trình duyệt

Tính năng -webkit-box-reflect hoạt động rất tốt trên các trình duyệt sử dụng nhân Webkit như Chrome, Safari, và Edge.

Mẹo nhỏ: Để hiệu ứng trông chuyên nghiệp hơn, hãy kết hợp thêm opacity và transition để tạo cảm giác mượt mà khi người dùng di chuột (hover) vào ảnh!