CSS Notification Boxes

Các hộp thông báo là các thành phần gây chú ý trên các trang web. Để gây được sự chú ý với người truy cập, các hộp này phải được thiết kế bắt mắt, cuốn hút, khác biệt. Hôm nay tôi sẽ hướng dẫn các bạn cách tạo ra những CSS Notification Boxes – những hộp thông báo đẹp mắt một cách đơn giản bằng CSS. Nếu bạn biết CSS, bạn có thể tự sửa code để phù hợp hơn với các dự án web của mình.

CSS Notification Boxes – Tạo các hộp thông báo đẹp mắt bằng CSS

CSS Notification Boxes - Tạo các hộp thông báo đẹp mắt bằng CSS

CSS Notification Boxes – Tạo các hộp thông báo đẹp mắt bằng CSS

View Demo   Download Files

Trong bài hướng dẫn này, tôi sẽ hướng dẫn bạn có thể tạo ra 14 hộp thông báo phổ biến, mỗi hộp một icon và màu sắc khác nhau, tập trung vào 4 hộp phổ biến nhất:

1. Error Box
2. Success Box
3. Warning Box
4. Infomation Box (Notice Box)

Bước 1: Tạo style chung cho các hộp

CSS Code:
1
2
3
4
5
6
7
8
.alert-box {
    color: #555;
    border-radius: 10px;
    font-family: Tahoma, Geneva, Arial, sans-serif;
    font-size: 11px;
    padding: 10px 10px 10px 36px;
    margin: 10px;
}

Trong đó:
color: #555; – Màu chữ của các hộp thông báo.
border-radius: 10px; – Hiệu ứng bo tròn cho các hộp thông báo.
font-family: … – Thuộc tính font chữ.
padding: 10px 10px 10px 36px; – Khoảng cách từ chữ tới các viền xung quanh hộp.
margin: 10px; – Khoảng cách bên ngoài giữa các hộp.

Bước 2: Tạo style cho tên hộp

Trong mỗi hộp có một thẻ span để hiển thị tên loại thông báo, ví dụ Error, Success, Warning…

CSS Code:
1
2
3
4
.alert-box span {
    font-weight: bold;
    text-transform: uppercase;
}

Trong đó:
font-weight: bold; – Chữ đậm.
text-transform: uppercase; – Chữ in hoa.

Bước 3: Tạo icon cho các hộp

Mỗi hộp sẽ có các icon và màu nền, màu viền khác nhau.

CSS Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.error {
    background: #ffecec url('images/error.png') no-repeat 10px 50%;
    border: 1px solid #f5aca6;
}
.success {
    background: #e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border: 1px solid #a6ca8a;
}
.warning {
    background: #fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border: 1px solid #f2c779;
}
.information {
    background: #e3f7fc url('images/information.png') no-repeat 10px 50%;
    border: 1px solid #8ed9f6;
}

Bước 4: Hiển thị các hộp

Để hiển thị các hộp thông báo, bạn gõ vào đoạn code giống như dưới đây.

HTML Code:
<div class="alert-box error"><span>error: </span>Write your error message here.</div>
<div class="alert-box success"><span>success: </span>Write your success message here.</div>
<div class="alert-box warning"><span>warning: </span>Write your warning message here.</div>
<div class="alert-box information"><span>information: </span>Write your information message here.</div>

Kết quả:

Và đây là kết quả, rất đơn giản mà đẹp đúng không nào?

CSS Notification Boxes - Tạo các hộp thông báo đẹp mắt bằng CSS

Các bạn hãy thử làm theo và sửa đổi thêm theo ý mình nhé. Các bạn có thể xem demo hoặc download về máy ở link bên dưới.

View Demo   Download Files

Đây là một bản sửa đổi khác, bạn có thể tham khảo thêm:

View Demo   Download Files

Nguồn: mylop.edu.vn

Theo: CSS Portal

 

Tips and Tricks

HƯỚNG DẪN ĐẶT HÀNG

 

Bạn đang xem: CSS Notification Boxes
Bài trước Bài sau
popup

Số lượng:

Tổng tiền: