quang cao hosting

Hướng dẫn làm CSS3 Navigation cùng hiệu ứng Transitions

Xem: 1073    Tải: 2   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 4 đánh giá ) File đã được kiểm thử
Miễn Phí [megacode]huong-dan-lam-css3-navigation-cung.rar (1.18 KB)
Tải miễn phí
Xem Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-lam-css3-navigation-cung.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Chào các bạn, trước đây mình đã từng giới thiệu rất nhiều về cách tạo menu cho trang web, nhưng cách tạo menu mà mình giới thiệu trong bài viết này cùng với hiệu ứng Transitions sẽ mang lại cho các bạn một cái nhìn hoàn toàn mới mẻ và mình chắc chắn là các bạn sẽ ấn tượng với hiệu ứng mà nó mang lại.

Chào các bạn, trước đây mình đã từng giới thiệu rất nhiều về cách tạo menu cho trang web, nhưng cách tạo menu mà mình giới thiệu trong bài viết này cùng với hiệu ứng Transitions sẽ mang lại cho các bạn một cái nhìn hoàn toàn mới mẻ và mình chắc chắn là các bạn sẽ ấn tượng với hiệu ứng mà nó mang lại. Hiệu ứng transition sẽ áp dụng cho các pseudo-elements như là :before:after, nhưng nó lại có nhược điểm là hiện nay chỉ có trình duyệt Firefox là hỗ trợ hiệu ứng transitions cho các pseudo elements. Do đó để có thể xem demo với kết quả tốt nhất, các bạn nên xem trên trình duyệt Firefox.

HTML
Đầu tiên, chúng ta sẽ có khung html chuẩn cho việc tạo menu như sau :

<ul>
    <li class="effects"><a href="#">HOME</a></li>
    <li class="effects"><a href="#">ABOUT</a></li>
    <li class="effects"><a href="#">PORTFOLIO</a></li>
    <li class="effects"><a href="#">BLOG</a></li>
    <li class="effects"><a href="#">CONTACT</a></li>
</ul>

CSS
Bây giờ, chúng ta sẽ định dạng cơ bản cho menu như sau :

ul {
   list-style:none;
   padding-top:50px;
}
 
li {
    position:relative;
    float: left;
    width:150px;
    text-align:center;
    padding-top:35px;
    padding-bottom:35px;
    color:#fff;
    margin-right:20px;
    border-radius:5px;
    background:#161616;
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    cursor:pointer;
}

Kế tiếp, chúng ta sẽ định dạng css riêng cho  class tên là ” effects ” và  ấn định vào các  pseudo-elements như là  :after:before . Các bạn nhớ là đoạn css bên dưới hiện tại chỉ có Firefox là hỗ trợ thôi.

.effects:after, .effects:before {
    -moz-transition:width 0.5s ease 0s;
    height: 0px;
    width: 0px;
    position: absolute;
    content: ' ';
    display: block;
    opacity:0;
    box-shadow: 0px 0px 5px #00c6ff;
}
 
.effects:after {
    background: -moz-linear-gradient(left, #0ad, #08b);
    top: 84px;
    left: 75px;
}
 
.effects:before {
    background: -moz-linear-gradient(right, #0ad, #08b);
    top: 84px;
    right:75px;
}
 
.effects:hover:after, .effects:hover:before{
    width: 72px;
    height: 1px;
    opacity:1;
}

Thế là xong rồi đó các bạn, tuy nhược điểm là chỉ có thể chạy tốt trên Firefox, nhưng mình mong là qua bài viết này, các bạn sẽ có thêm lựa chọn cho việc tạo menu cho website hay blog của mình. Ngoài ra các bạn còn có thể nâng cao trình độ CSS của mình.

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

Hướng dẫn làm CSS3 Navigation cùng hiệu ứng Transitions

Hướng dẫn làm CSS3 Navigation cùng hiệu ứng Transitions Đăng ngày 11-08-2014  Chào các bạn, trước đây mình đã từng giới thiệu rất nhiều về cách tạo menu cho trang web, nhưng cách tạo menu mà mình giới thiệu trong bài viết này cùng với hiệu ứng Transitions sẽ mang lại cho các bạn một cái nhìn hoàn toàn mới mẻ và mình chắc chắn là các bạn sẽ ấn tượng với hiệu ứng mà nó mang lại. 5/10 1073

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Số di động (Hotline): 092.129.6329
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2020. All rights reserved. Bản quyền thuộc VinaGon
Văn phòng giao dịch: C6,C7 Khuất Duy Tiến, Thanh Xuân Bắc, Thanh Xuân, Hà Nội.
Điện thoại: 092.129.6329;
Công ty TNHH Công nghệ số Rồng Việt
Người đại diện: Vũ Thị Hoa.
Số chứng nhận đăng ký kinh doanh: 0105801198. Ngày đăng ký: 10/07/2012