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

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 box</ 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!