Hôm nay đang lướt mấy website của mình, thấy mấy cái notification box dễ thương nên viết bài này chia sẽ tới các bạn – những web designer quan tâm đến các ô thông báo thành công, báo lỗi…trên website.
Do kinh nghiệm và quan sát nên mình thấy có 4 loại box chính thường xuất hiện trong các website.
1. Success box: Ô này thường hiện khi một chức năng, một xử lý nào đó đã xử lý thành công và thông báo kết quả thành công cho người dùng biết.
2. Error box: Khi xử lý có vấn đề, ô Error thường xuất hiện để báo hiệu cho người dùng biết.
3. Warning box: không nghiêm trọng như ô Error, ô warning thường chỉ những xử lý cần cung cấp thêm chi tiết để nhắc nhở người dùng.
4. Notification box: ô cung cấp các thông tin cho người dùng.
———-
Các box có sử dụng bo tròn 4 góc bằng CSS, nên các trình duyệt không hỗ trợ round corner sẽ không thấy (Opera, IE).
Mình có 2 version cho các bạn:
– Phiên bản có sử dụng jQuery để tăng thêm tương tác cho nút đóng các box. Download | Demo
– Phiên bản không có nút đóng (không sử dụng jQuery) dành cho những ai chỉ muốn show các box thôi. Download | Demo
Enjoy Coding…
4 replies on “Colorful CSS Notification Box”
Chơi cỡ http://www.coders.me/ejemplos/sexy-alert-box/ cho nó khủng bố 😛
Cái alert box là một dạng Modal Dialog. Dạng này thì nhiều khi không được dùng lắm vì hầu như các tương tác submit cần Inline Notification. Cảm ơn đã chia sẽ.
Kool! Nhưng Opera browser vẫn hỗ trợ rounded corner tốt mà 🙂
😀 opera 10 đã hổ trợ corner còn gì, nếu IE thì thêm thằng này vào http://css3pie.com/, còn không thì dùng jQuery Corner: http://www.methvin.com/jquery/jq-corner-demo.html