CSS Notification Boxes - Tạo Hộp Thông Báo Tuyệt Đẹp Với CSS

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 và khác biệt. Hôm nay, Lê Anh Đức sẽ hướng dẫn các bạn cách tạo ra những CSS Notification Boxes - 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. 

HƯỚNG DẪN THỰC HIỆN 

BƯỚC 1: Chèn tòa bộ Css phía dưới vào trước thẻ đóng ]]></b:skin>. 

.alert-box {
    color: #555;
    border-radius: 10px;
    font-family: Tahoma, Geneva, Arial, sans-serif;
    font-size: 11px;
    padding: 10px 10px 10px 36px;
    margin: 10px;
}
.alert-box span {
    font-weight: bold;
    text-transform: uppercase;
}
.information_leanhduc {
    background: #e3f7fc url('https://i.imgur.com/RnSpOvJ.png') no-repeat 10px 50%;
    border: 1px solid #8ed9f6;
} 
.success_leanhduc {
    background: #e9ffd9 url('https://i.imgur.com/txjPE8Z.png') no-repeat 10px 50%;
    border: 1px solid #a6ca8a;
}
.error_leanhduc {
    background: #ffecec url('https://i.imgur.com/QzrDQQq.png') no-repeat 10px 50%;
    border: 1px solid #f5aca6;
}

BƯỚC 2: Chèn code phía dưới vào bất kì chỗ vào bạn thích. 

<div class="alert-box information_leanhduc"><span>Thông Báo: </span>Do thiếu hụt kinh phí nên chúng tôi buộc phải chạy quảng cáo để duy trì website. Chúng tôi rất xin lỗi về sự bất tiện này!</div>
<div class="alert-box success_leanhduc"><span>Lời Nhắn: </span>Mọi thứ trên website đều là miễn phí. Nếu thấy bài viết hay và quảng cáo phù hợp hãy click để ủng hộ chúng tôi nhé!</div>
<div class="alert-box error_leanhduc"><span>Chú Ý: </span>Tuyệt đối không click spam (click tặc quảng cáo). Hãy là một người sử dụng internet thông minh và có văn hóa! Xin cảm ơn.</div>

Chúc các bạn thành công! 

Copyright © Lê Anh Đức