CSS3 có thêm nhiều tính năng mới cho các thiết kế web[/URL]| đặc biệt là việc tích hợp các nút. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng các thuộc tính CSS3 bao gồm cả biến đổi, chuyển tiếp, bóng hộp, hình nền và các góc tròn. Chúng tôi sẽ làm việc với một phần tử tạo hiệu ứng động vào nút khi nó ở trạng thái di chuột. Hầu hết các trình duyệt hiện đại hỗ trợ phần lớn các thuộc tính chúng ta sẽ được sử dụng, nhưng người dùng với các trình duyệt không hỗ trợ vẫn có thể xem và tương tác với các nút. Tạo nút nhấn có hiệu ứng động với CSS3, dich vu thiet ke web sẽ giúp xem xét cách tạo hiệu ứng trong các nút , nhằm thu hút sự chú ý cùa khách hàng ghé thăm website. Tạo trang và liên kết của bạn Hãy bắt đầu bằng cách tạo ra một trang HTML5 như sau: <!DOCTYPE html> <html> <head> <style type=”text/css”> </style> </head> <body> </body> </html> Trong phần body, chèn thêm một số yêu tố như sau: <div id=”container”> <a class=”anim” href=”index.html”> <img src=”note.png” alt=”link”/> <span>Music</span> </a> </div> Chúng tôi sẽ sử dụng bốn hình ảnh cho các nút liên kết, do đó tải chúng ngay bây giờ, hoặc sử dụng của riêng bạn nếu bạn thích. Hình ảnh này xuất hiện trong các nút và sẽ được quay trên di chuột: note Đây là hình ảnh nền chính cho các nút: button_background Chèn thuộc tính CSS Trước khi chúng ta làm việc với tính chất động, chúng ta có được các thuộc tính CSS cơ bản cho các nút được sắp xếp. Trong phần đầu của CSS trang của bạn, thêm những điều sau đây để định dạng các yếu tố container: /*basic properties*/ #container{ padding:20px; background:#FFCC00; width:300px; } Các màu sắc và chiều rộng đã được lựa chọn cho phù hợp với hình ảnh chúng tôi đang sử dụng, nhưng cảm thấy tự do để thay đổi chúng. Kiểu tiếp theo liên kết với các thuộc tính cơ bản: /*link*/ a.anim { margin:auto; display: block; background:#FF0000; width: 200px; height:60px; text-align:center; text-decoration:none; color:#000000; font-weight:bold; font-family:sans-serif; font-size:large; border:2px solid #FFFFFF; } Xem chi tiết tại: Tạo Nút Nhấn Có Hiệu Ứng Động Với CSS3
Ðề: Tạo Nút Nhấn Có Hiệu Ứng Động Với CSS3 Trước cũng mày mò làm một site nhỏ xinh với CSS, thấy thú vị phết
