Học Thiết Kế Website Online Miễn Phí

Tổng hợp kiến thức, tài liệu để bạn học thiết kế website online miễn phí. hướng dẫn học thiết kế website từ đơn giản đến nâng cao một cách hoàn thiện nhất

Liên Kết : Chuyển Nhà Thanh Hóa | Thiết Kế Website | Học Lái Xe OTo Tại Thanh Hóa |Chuyển Hà Hà Nội |

Code tạo huy hiệu cực đẹp cho website, blog

Share Button

Code tạo huy hiệu cực đẹp cho website, blog

Dưới đây là 2 code tạo huy hiệu cực đẹp dành cho website và blog. Tạo điểm nhấn và điểm khác biệt đẳng cấp cho website của bạn.


Giới Thiệu :

   Là hiệu ứng khi khách truy cập di chuyển chuột hoặc chạm tay vào (đối với điện thoại cảm ứng ) thì lúc đó hiệu ứng của huy hiệu sẽ mở ra cho khách truy cấp biết nội dung bên trong.
   Khi di chuyển chuột ra ngoài thì hiệu ứng sẽ đóng lại. Nhìn rất đẹp và chuyên nghiệp cho website của bạn.
Bạn có thể xem qua hình ảnh minh họa :
Code tạo huy hiệu cực đẹp cho website, blog

Code tạo hiêu hiệu đẹp cho website, blog

Code tạo huy hiệu hình tròn :
<style>.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:1000;font-size:1.6em;line-height:9.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}.circle:after{transform:rotate(45deg)}.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}</style><div class="circle"><h1><a href="https://ngocmanhweb.com">NgocManhWeb.Com</a></h1></div>

Bạn thay 2 nội dung màu đỏ thành nội dung của bạn nhé

Code tạo huy hiệu hình vuông :

<style>.square{background:#fff;border-radius:4px;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}.square h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:1000;font-size:1.6em;line-height:9.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}.square h1 a{color:rgba(189,185,199,0);text-decoration:none}.square:before,.square:after{border-radius:4px;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}.square:after{transform:rotate(45deg)}.square:hover:before,.square:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}.square:hover > h1 a,.square:hover > h1{color:rgba(185,185,185,1)}</style><div class="square"><h1><a href="https://ngocmanhweb.com">NgocManhWeb.Com</a></h1></div>

Bạn cũng thay 2 nội dung mầu đỏ thành nội dung của bạn nhé

Hướng dẫn sử dụng code :

Đối với Blogger / Blogspor : Bạn vào phần bố cục >>> thêm tiện ích >>> Thêm HTML/Javascript. Hoặc là bạn cũng có thể dán code vào phần html của bài viết.

Đối với WordPress : Bạn vào giao diện >>> chọn Widget >>> Thêm Văn bản hoặc HTML nào đó. Hoặc bạn cũng có thể dán code vào phẩn HTML của bài viết.

Đối với các website khác cũng tương tự. Bạn chỉ cần dán trong cặp thẻ <body>…..</body>

Chúc bạn thành công !

Share Button

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Học Thiết Kế Website Online Miễn Phí © 2017 Frontier Theme