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
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é
tạo viền cong nhẹ hai bên cho bài đăng blog

1 Nhận xét

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .

  1. Một hiệu ứng khá hay cho blog để các bạn thử và trải nghiệm..mình đã chèn thử lên blog của mình rồi nhưng chỉ cho hiển thị lên chế độ mobile thôi..còn chế độ we màn hình quá rộng nên không hiệu quả mấy

    Trả lờiXóa
Mới hơn Cũ hơn