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!
TẠO HIỆU ỨNG MÀN HÌNH CONG CHO WEBSITE/BLOGSPOT Reviewed by Lê Quốc Dũng ✓ on 3/18/2019 03:11:00 AM Rating: 5

No comments:

Bản quyền thuộc về­Star Dũng IT © 2017 - 2018
Power ByBlogger | Phát Triển BởiLê Quốc Dũng | Facebook | Youtube

Biểu mẫu liên hệ

Name

Email *

Message *

Powered by Blogger.