Hiệu ứng màn hình cong cho Blogspot/Website
Xuất bản
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
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 == "true"'>Chúc bạn thành công!
<!-- điều kiện chỉ hiện trên Mobile -->
</b:if>
Đây là khu vực quản trị, bạn không có quyền truy cập vào!
bài viết hay lắm - đến từ Star Nam It
Trả lờiXóa