Cách tạo viền cong nhẹ hai bên cho bài đăng blogspot

Mẹo nhỏ sau đây sẽ giúp cho hiển thị bài đăng của blog trông bắt mắt và cuốn hút hơn khi tạo nét viền cong nhẹ và bo tròn ở hai bên. Điều mà có thể gây liên tưởng đến một số thiết kế điện thoại flag-ship cao cấp của samsung có viền cong hai bên

Hiệu ứng viền cong nhẹ hai bên cho bài đăng blogspot sau khi đã cài code. Các bạn có thể xem demo và trải nghiệm trên trang Pkientruc nhé

1. Cách tạo rất đơn giản với dòng code gọn nhẹ bên dưới cho các bạn trải nghiệm

Chép hết đoạn code sau rồi chèn trước thẻ đóng </body> là xong

<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"/>

2. Lưu ý

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 == &quot;true&quot;'>
<!-- đoạn code chèn -->
</b:if>

CÒn nếu các bạn chỉ cần hiển thị trên giao diện destop hay i-pad thì dùng đoạn code bên dưới

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- đoạn code chèn -->
</b:if>

Chúc bạn thành công có có trải nghiệm thú vị với hiếu ứng lạ mắt này nhé