Tạo ảnh phản chiếu (Image Reflection) với CSS3

CSS 01-5-2015

Trong các bài viết trước, chúng ta đã nói rất nhiều về những thuộc tính mới mà CSS3 mang lại. Tuy nhiên, cũng có một vài thuộc tính mà chúng ta vẫn chưa tìm hiểu mặc dù nó cũng rất thú vị. Một trong số đó là thuộc tính box-reflect , với chức năng chính là tạo ảnh phản chiếu cho một đối tượng.

ảnh phản chiếu, box-reflect, css3 reflection, css3 tips, thu thuat css

Tạo phản chiếu cơ bản :

Giả sử như chúng ta cần tạo ảnh phản chiếu bên dưới một đối tượng, thì chúng ta sử dụng như sau :

img {

    -webkit-box-reflect: below;

}

ảnh phản chiếu, box-reflect, css3 reflection, css3 tips, thu thuat css

Trong ví dụ này, chúng ta tạo ảnh phản chiếu ngay bên dưới đối tượng, Nếu muốn các bạn có thể tạo ảnh phản chiếu nằm bên trái, bên phải hoặc thậm chí là bên trên đối tượng với các giá trị right, left và above.

Giá trị Offset

Offset là giá trị dùng để tạo khoảng cách giữa đối tượng với ảnh phản chiếu của nó. Chúng ta cùng xem đoạn css sau :

img {

    -webkit-box-reflect: below 10px;

}

Trong đoạn code bên trên, chúng ta chia cách ảnh phản chiếu với đối tượng với khoảng cách là 10px.

ảnh phản chiếu, box-reflect, css3 reflection, css3 tips, thu thuat css

Ảnh phản chiếu mà chúng ta làm nãy giờ trông có vẻ vẫn chưa thực so với thực tế, vì thế chúng ta sẽ áp dụng thêm CSS3 Gradients để làm nó trông thực hơn .

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottombottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

Đoạn css trên sẽ cho ra kết quả như thế này :

ảnh phản chiếu, box-reflect, css3 reflection, css3 tips, thu thuat css

Chúng ta cũng có thể sử dụng color-stop để làm ảnh phản chiếu trông đẹp hơn :

img {

    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottombottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));

}

ảnh phản chiếu, box-reflect, css3 reflection, css3 tips, thu thuat css

Phương án thay thế dành cho trình duyệt Firefox

Thật không may cho chúng ta là tại thời điểm này,thuộc tính tạo ảnh phản chiếu chỉ có thể chạy trên các trình duyệt Webkit ( tức là Safari và Chrome) . Vì thế để tạo ảnh phản chiếu chạy trên trình duyệt Firefox, chúng ta cần sử dụng -moz-element() .
Giả sử chúng ta có một hình ảnh nằm bên trong thẻ <div> với id là moz-reflect

<div id="moz-reflect">

    <img src="images/everything_matters.large.jpg">

</div>

và tạo ảnh phản chiếu, chúng ta sử dụng :after pseudo-element như bên dưới :

#moz-reflect:after {

    content: "";

    display: block;

    background: -moz-element(#moz-reflect) no-repeat;

    width: auto;

    height: 375px;

    margin-bottom: 100px;

    -moz-transform: scaleY(-1);

}

Tuy nhiên, nó chỉ có thể làm được như thế này :

ảnh phản chiếu, box-reflect, css3 reflection, css3 tips, thu thuat css