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ạngthá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 CSSbạ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...
Nội dung trích xuất từ tài liệu:
CSS Cách tạo một số kiểu Message Box CSSCách tạo một số kiểu Message BoxCập nhật: 18/8/2008 với no commentsXếp trong: Lập trình, CSSCá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ạngthá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 CSSbạ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ạngthá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 CSSbạ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ếtkế những hộp thoại thông báo tùy ý hay những phần hình ảnh khác.Clean message boxTô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êuthí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ảnview plainprint? 1. Clean message boxvà 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ơncho 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 icontrong 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 boxvà mã CSS đi kèm như sau: 1. .icon-heart{ 2. border:solid 1px #DEDEDE; 3. background:#FFFFCC url(img/icon-heart.png) 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 download, bao gồmnhững icon như bạn thấy ở dưới đây:Bạn có thể dùng nó để thiết kế các hộp thoại thông báo có icon hoặc các nút CSS vàcác phần tử hình ảnh khác trong project của mình.Solid message boxKhông có gì đơn giản hơn: một message box không có đường viền và với màu sắc textđối lập với màu nền là được.Mã HTML là:view plainprint? 1. Solid message box green...và mã CSS là: 1. .solid-green{ 2. background:#008000; 3. color:#FFFFFF; 4. font-weight:bold; 5. padding:4px; 6. text-align:center; 7. }...hãy chọn màu nền mà bạn yêu thích!Alternated rounded borders message boxĐây là một giải pháp khác với các đường viền bo tròn góc (top-left, bottom-right). Hộpthoại tương thích tự động các vị trí bo góc với độ rộng và chiều cao của nó.Mã HTML như sau:view plainprint? 1. Alternated rounded borders message bo x...một DIV layer nằm trong DIV layer chính với round-a-gray class có mã CSS là: 1. .round-a-gray{ 2. background:#444444 url(img/round_gray-left.png) left top no-repeat; 3. color:#FFFFFF; 4. text-align:center; 5. } 6. .round-a-gray div{ 7. background:url(img/round_gray-right.png) right bottom no-repeat; 8. padding:4px; 9. }Solid tooltip message boxĐây là một kiểu kinh điển. Một hộp thoại thông báo kiểu tooltip.HTML như sau:view plainprint? 1. Solid message box...và mã CSS là: 1. .tooltips-gray{ 2. background:#444444; 3. color:#FFFFFF; 4. text-align:center; 5. padding-top:4px; 6. } 7. .tooltips-gray div{ 8. background:url(img/tips_gray.png) left bottom no-repeat; 9. padding-top:4px; 10. height:18px; 11. }Bạn có thể thay đổi lại hình ảnh mong muốn để tạo ra arrow cho tooltip của bạn.Bạn có thể download mã nguồn tại đây.Chúc bạn thành công!