Thiết kế thông báo bằng CSS.
Cập nhật: 19/8/2008 với no comments
Xếp trong: Lập trình, CSS
Đôi khi làm việc thiết kế các dòng sự kiện xảy ra, các lập trình viên hay bỏ qua việc đưa ra
các lời thông báo cho người dùng. Điều này làm cho người sử dụng có thể bối rối và lầm
tưởng về quy trình hoạt động của ứng dụng. Thêm vào đó, nếu việc đưa ra...
Đôi khi làm việc thiết kế các dòng sự kiện xảy ra, các lập trình viên hay bỏ qua việc đưa ra
các lời thông báo cho người dùng. Điều này làm cho người sử dụng có thể bối rối và lầm
tưởng về quy trình hoạt động của ứng dụng. Thêm vào đó, nếu việc đưa ra thông báo
không hợp lệ cũng có thể gây ra những sai lệch không thể ngờ được. Ví dụ, khi bạn đến
ngân hàng để kiểm tra lại tài khoản. Nhân viên ngân hàng nhập thông tin cá nhân của bạn
và gửi yêu cầu cho ứng dụng. Ứng dụng web sẽ trả lời bằng việc hiển thị một hộp thông
báo màu vàng với một icon dấu chấm than nói rằng việc xử lý dữ liệu vẫn đang xảy ra.
Người nhân viên có thể sẽ phải check một vài lần lại nếu không thấy hiện ra ngay dòng
thông báo "Account avaiable". Nhưng hộp thông báo thì không thay đổi gì cả. Anh ấy tiếp
tục check thêm một vài lần và cuối cùng anh ta nhận ra rằng yêu cầu đã thực hiện thành
công.
Tôi sẽ chỉ cho bạn thấy các loại CSS message box mà tôi dùng cho các project mới nhất
của tôi ở đây. Tôi đã thay đổi một chút để cho nó đơn giản hơn cho các ví dụ này.
Nào chúng ta hãy duyệt qua một loạt các kiểu message này:
1. Information messages
Mục đích của các information message là để thông báo đến người sử dụng một điều gì đó
liên quan. Điều này nên trình bày ở dạng màu xanh da trời bởi vì người ta thường kết hợp
màu sắc này với thông tin bất kể là nội dung gì. Điều này cũng có thể tương ứng với thông
tin một hành động nào của người dùng.
Ví dụ, hộp thông báo thông tin có thể chỉ ra một vài trợ giúp đối với hành động người dùng
hiện tại hoặc là một vài gợi ý nào đó.
2. Success message
Các thông báo thành công nên được đưa vào sau khi người dùng thực hiện thành công một
thao tác nào đó. Ở đây là trường hợp thao tác hoàn chỉnh - không phải là một một thao tác
chia nhỏ và không phát sinh lỗi nào. Ví dụ, thông báo có thể nói: "Thông tin hồ sơ của bạn

view plain print ?
1.
2. body{
3. font-family:Arial, Helvetica, sans-serif;
4. font-size:13px;
5. }.info, .success, .warning, .error, .validation {
6. border: 1px solid;
7. margin: 10px 0px;
8. padding:15px 10px 15px 50px;
9. background-repeat: no-repeat;
10. background-position: 10px center;
11. }
12. .info {
13. color: #00529B;
14. background-color: #BDE5F8;
15. background-image: url('info.png');
16. }
17. .success {
18. color: #4F8A10;
19. background-color: #DFF2BF;
20. background-image:url('success.png');
21. }
22. .warning {
23. color: #9F6000;
24. background-color: #FEEFB3;
25. background-image: url('warning.png');
26. }
27. .error {
28. color: #D8000C;
29. background-color: #FFBABA;