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 plain print ?
1. <div class="clean-gray">Clean message box</div>
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 )

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ộp
thoạ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 plain print ?
1. <div class="round-a-gray"><div>Alternated rounded borders message bo
x</div></div>
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 plain print ?
1. <div class="tooltips-gray">Solid message box<div></div></div>
và mã CSS là:
1. .tooltips-gray{
2. background:#444444;
3. color:#FFFFFF;
4. text-align:center;
5. padding-top:4px;
6. }