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

Chia sẻ: Lại Văn Nghĩa | Ngày: | Loại File: DOC | Số trang:6

Thêm vào BST

Báo xấu

355
lượt xem 108
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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/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 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ộ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 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!