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

- Trong quá trình làm việc, cũng như là trong quá trình viết bài, khó tránh khỏi sai sót, rất mong các bạn, anh chị em bỏ qua. Đồng thời do trình độ lập trình & kinh nghiệm thực tiễn còn hạn chế nên giao diện và bài viết còn nhiều lỗi ! Em rất mong nhận được ý kiến đóng góp từ mọi người, để bản thân học hỏi thêm được nhiều kinh nghiệm và sẽ cố gắng hoàn thiện trong tương lai. Em xin chân thành cảm ơn !
- Mọi chi tiết xin liên hệ:
• Phone number: 038.689.7757
• Facebook: fb.com/leanhduc.pro.vn
• Email: Admin@leanhduc.pro.vn

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.

DEMO AND CODE


Thông Báo: 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!
Lời Nhắn: 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é!
Chú Ý: 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.

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 ! Và đừng quên click quảng cáo ủng hộ mình nhé =)) Cảm ơn rất nhiều !

Copyright © Lê Anh Đức

6 nhận xét:


Cùng tham gia bình luận bài viết này nhé!