[CSS Đẹp – P2] – Hiệu ứng Reflection Effects phản chiếu mặt hồ với CSS

Hiệu ứng Reflection Effects

reflection effects

Lưu ý:

  • box-reflect: chỉ hỗ trợ bởi các các trình duyệt nhân chromium (Chrome, Microsoft Edge, Opere phiên bản mới) và Safari. Thậm chí Firefox cũng không hỗ trợ hiệu ứng box-reflect này.

Code:

<img id="reflect" src="pic-ball.png">
<style type="text/css">
    #reflect {
    -webkit-box-reflect: below;
    	-webkit-box-reflect: below 8px; /*nhân đôi ảnh xuống dưới padding 8px, nếu ko thích padding thì bỏ 8px đi*/
    	-webkit-box-reflect: below 8px -webkit-gradient(linear, right top, right bottom, from(transparent), to(rgba(255, 255, 255, 0.4)));
    	-webkit-box-reflect: below 8px -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(40%, transparent), to(rgba(255, 255, 255, 0.1))); /*tạo độ mờ hơn nữa*/
    }
</style>

Sử dụng transform để tương thích trình duyệt tốt hơn

  • Reflection Effects rất tiện dụng và mới mẻ song hỗ trợ một số trình duyệt nhất định. Còn thuộc tính  transform thì cân tất, nó hỗ trợ mọi trình duyệt trừ Opera mini (mà opera mini thì chắc chẳng còn mấy người dùng)
  • image-mask: không được hỗ trợ bởi IE, Edge, Opera Mini và phiên bản mới hơn của Firefox.

Code:

    
<img id="real" src="pic-ball.png">
<img id="refl" src="pic-ball.png">
<style type="text/css">
#real-img {
    display:block;
    margin-bottom: 8px;
}
#refl-img {
    display:block;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(40%, transparent), to(rgba(255, 255, 255, 0.1)));
}
</style>

Hiệu ứng phản chiếu dùng cho text (transform kết hợp mask-image)

transform+mask-image

<div id="para_div">
    <p id="real">My Text</p>
    <p id="refl">My Text</p>
</div>
<style type="text/css">
#real {
    font-size: 40px;
    color: white;
    margin: 0;
}
#refl {
    font-size:40px;
    color: white;margin: 0;
    -moz-transform: scaleY(-1);
       -o-transform: scaleY(-1);
       -webkit-transform: scaleY(-1);
       transform: scaleY(-1);
    -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(20%, transparent), to(rgba(0, 0, 0, 0.4)));
}
#para_div {
    display:inline-block;
    background-color: black;
    padding: 20px 40px;
    border-radius:10px;
}
</style>

Link Demo cho cả bài: https://daivietweb.com/demo/reflection-effects.html

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Bình luận
Inline Feedbacks
View all comments
.
.
.