Tạo hiệu ứng màn hình cong cho Website/Blogspot

- 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.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- điều kiện chỉ hiện trên Mobile -->
</b:if>
Chúc bạn thành công!
Huỳnh Phụng Saler

TLQT là Blog chia sẻ kiến thức về Marketing, Digital Marketing, Kinh nghiệm làm SEO, Tối ưu Website và nhiều thứ khác

Đăng nhận xét

➔ Gửi kèm hình ảnh trên bài viết để được hỗ trợ tốt nhất.
➔ Để bình luận kèm hình ảnh, bạn vào trang Upload Ảnh, kéo thả để Upload hình ảnh lên.
➔ Bạn dán URL link hình ảnh vào khung bình luận và ấn Xuất bản, ảnh sẽ được tự động tải lên.
➔ Không spam trong khung bình luận, hạn chế viết tắt.
➔ Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin

Mới hơn Cũ hơn

POST ADS1

POST ADS 2