tailieunhanh - CSS Cách tạo một số kiểu Message Box

Các hộp thoại thông báo là những thành phần hữu ích để hiển thị các thông báo trạng thái trên website. Hôm nay tôi muốn chia sẻ với các bạn một bộ sưu tập các style CSS bạn có thể áp dụng vào trong các hộp thoại thông báo của mình (clean, solid, iconized. | CSS Cách tạo một số kiểu Message Box CSSCách tạo một số kiểu Message Box Cập nhật: 18/8/2008 với no comments Xếp trong: Lập trình, CSS Các hộp thoại thông báo là những thành phần hữu ích để hiển thị các thông báo trạng thái trên website. Hôm nay tôi muốn chia sẻ với các bạn một bộ sưu tập các style CSS bạn có thể áp dụng vào trong các hộp thoại thông báo của mình (clean, solid, iconized. Các hộp thoại thông báo là những thành phần hữu ích để hiển thị các thông báo trạng thái trên website. Hôm nay tôi muốn chia sẻ với các bạn một bộ sưu tập các style CSS bạn có thể áp dụng vào trong các hộp thoại thông báo của mình (clean, solid, iconized, alternated rounded borders, tooltip). Tôi cũng đưa ra liên kết để tải gói icon đẹp để sử dụng cho project của bạn để thiết kế những hộp thoại thông báo tùy ý hay những phần hình ảnh khác. Clean message box Tôi thích thiết kế cân đối và đơn giản và nói chung đây là dạng message box được yêu thích của tôi: viền có độ rông 1px và màu nền sáng nhẹ nhàng. Mã HTML thì rất đơn giản view plainprint? 1. Clean message box và có một layer DIV với đoạn text trong đó. Mã CSS có thể giống như sau: 1. .clean-gray{ 2. border:solid 1px #DEDEDE; 3. background:#EFEFEF; 4. color:#222222; 5. padding:4px; 6. text-align:center; 7. } Tôi khuyên bạn nên dùng màu sắc "pastel" (phấn lam) cho màu nền và màu sắc tối hơn cho dòng text. Iconized message box Đây là một kiểu hộp thoại khác tôi ưa thích. Một hộp thoại đơn giản với một icon trong background miêu tả một cách trực quan sự kiện mà nó thể hiện (ok, error, alert) Mã HTML tương tự như bạn đã thấy ở ví dụ trước. view plainprint? 1. Clean message box và mã CSS đi kèm như sau: 1. .icon-heart{ 2. border:solid 1px #DEDEDE; 3. background:#FFFFCC url(img/) 8px 6px no-repeat; 4. color:#222222; 5. padding:4px; 6. text-align:center; 7. } Nếu bạn tìm kiếm các icon đẹp, tôi cung cấp cho bạn gói icon này