Hiệu ứng màn hình cong cho Blogspot/Website chuyên nghiệp

Khi lướt Web bằng di động bạn sẽ thấy 2 mép màn hình có hiệu ứng cong. Viêc này làm cho Website/Blogspot trở nên thích mắt hơn.

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.