Có bao giờ bạn thấy một trang web không dùng bất kì mã JavaScript nào nhưng vẫn thực hiện hiệu ứng ẩn/hiện nội dung sau khi nhấn chuột? Thật không thể tin được nhưng đó lại là sự thật, hãy kiểm tra hiệu ứng CSS này để xem tác giả đã làm điều đó như thế nào :).
Đây là ví dụ mẫu của bài viết Tạo khung tìm kiếm dạng thẻ với CSS và JavaScript. Chỉ với một vài dòng mã lệnh, bạn sẽ tạo được một khung tìm kiếm dạng thẻ đơn giản trên website của mình.
Đoạn mã CSS này sử dụng thuộc tính hover để gạch chân các liên kết khi người dùng rê con trỏ chuột đến, một kĩ thuật đơn giản nhưng đang rất thịnh hành hiện nay để tô sáng liên kết. Tuy nhiên, điểm đặc biệt của đoạn mã CSS này nằm ở chỗ hình ảnh được sử dụng - các mũi tên di chuyển liên tục, nên khá vui nhộn. Một đoạn mã rất thích hợp với các website có nội dung là truyện tranh, chuyện cười, vui nhộn,...
Hiệu ứng này sẽ tạo ra các khung chứa nội dung của bạn với các đường viền đổ bóng rất đẹp mà không dùng bất cứ hình ảnh nào. Bạn có thể sử dụng các định dạng đường viền khác nhau trên cùng một trang.
Hiệu ứng JavaScript này sử dụng hình ảnh cho việc trang trí nền của trình đơn.
Đoạn mã này sử dụng hình ảnh và CSS để tạo một trình đơn JavaScript mang kiểu dáng XP và rất dễ cài đặt và chỉnh sửa. Tuy nhiên, bạn phải định nghĩa chính xác loại tài liệu đối với trang web sử dụng trình đơn JavaScript này là <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">.
Hiệu ứng tạo ra các khu vực văn bản khác nhau trên trang web và mổi thời điểm chỉ hiển thị một khu vực, để di chuyển qua các khu vực khác, người dùng nhấn vào nút được chỉ định.
Hiệu ứng tự động kiểm tra các hàng trong bảng và tô màu xen kẽ cho nó. Bạn cũng có thể áp dụng hiệu ứng JavaScript này cho các danh sách hay các thẻ khác.
Bằng cách dùng CSS, bạn có thể tạo ra nhiều con trỏ chuột khác nhau trên trang web của mình. Đây là bộ sưu tập đầy đủ các con trỏ chuột mà IE6+ hỗ trợ cùng với phần hướng dẫn cách thay đổi các con trỏ chuột tùy vào các sự kiện.
Một đoạn mã JavaScript khác để tạo trình đơn hai cấp ở phía đỉnh của trang web.





26/10/2010
1

