Liên kết dịch chuyển layer với CSS3

Lê An    3/07/2014    CSS , Thủ thuật blog    Comments   

Hôm nay mình giới thiệu đến các bạn một thủ thuật cho Blogger. Các tạo một liên kết đẹp với hiệu ứng dịch chuyển bằng CSS3 một cách đơn giản.
Bước thực hiện như sau:

CSS

1. Bạn đăng nhập vào Blogspot
2. Chọn đến Mẫu -> Chỉnh sửa HTML -> Tìm đến đoạn mã  ]]></b:skin> ( Dùng tổ hợp phím Ctrl + F tìm cho nhanh)
3. Sau đó bạn dán toàn bộ Code phía dưới vào ngay trên thẻ ]]></b:skin>. Lưu lại

 ul.nudging {
  margin:10px 10px;
  padding:0px 0px;
  font:normal 14px Comic Sans;
}
ul.nudging li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}
ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:black;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.29s ease-out;
  -moz-transition:all 0.29s ease-out;
  -ms-transition:all 0.29s ease-out;
  -o-transition:all 0.29s ease-out;
  transition:all 0.29s ease-out;
}
.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
} 

HTML

Bạn muốn hiển thị Liên kết ở bất kỳ vị trí nào của Blog thì bạn vào phần Bố Cục -> Thêm một tiện ích HTML và dán code như sau:

<ul class="nudging">
    <li><a href="#">Nhạc Trẻ</a></li>
    <li><a href="#">Nhạc Vàng</a></li>
    <li><a href="#">Hip Hop</a></li>
    <li><a href="#">Dance</a></li>
    <li><a href="#">House</a></li>
</ul>  

Demo 

www.aiizahh.com