Bạn thường dễ thấy các Smartphone Samsung thiết kế màn hình cong 2 bên, thì nay chúng ta sẽ mang hiệu ứng này lên trên Website/Blogspot 1 cách dễ dàng
Hiệu ứng màn hình cong cho Website/Blogspot |
Bước 1: Truy cập vào Giao diện Blogspot
Vào Blogger.com → Giao diện.
Thủ thuật này hoàn toàn sử dụng HTML,CSS với thuộc tính box-shadow để tạo hiệu ứng đổ bóng cong ở 2 mép màn hình.
Bước 2: Tìm thẻ <body> và dán dưới nó đoạn code sau
<style> .screen-edge-right{z-index: 99999999;
background: #a8a8a8;
height: 100vh;
width: 0px;
box-shadow: 10px 0px 10px 12px #333;
position: fixed;
top: 0;
right: 0;}
.screen-edge-left{ z-index: 99999999;
background: #a8a8a8;
height: 100vh;
width: 0px;
box-shadow: 0px 0px 10px 3px #333;
position: fixed;
top: 0;
left: 0;}</style>
<div class="screen-edge-right"/>
<div class="screen-edge-left"/>
Nếu bạn muốn hiệu ứng màn hình cong chỉ xuất hiện trên giao diện di động mà không hiện trên Desktop. Bạn đặt đoạn code vào giữa cặp thẻ điều kiện bên dưới.
<b:if cond='data:blog.isMobileRequest == "true"'>Chúc bạn thành công!
<!-- điều kiện chỉ hiện trên Mobile -->
</b:if>