Tài liệu CSS Cách tạo một số kiểu Message Box pptx

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 )

Mã HTML tương tự như bạn đã thấy ở ví dụ trước.
view plain print ?
1. <div class="icon-heart">Clean message box</div>
và 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ồm
nhữ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 box
Khô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 plain print ?
1. <div class="solid-green">Solid message box green</div>
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ộ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. }

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!