Colorful CSS Notification Box - Các khung báo lỗi bằng CSS

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

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…

Nguồn: BlogHocTap