Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh
Một số mẫu hộp thoại thông báo đơn giản bằng CSS + Icon Fontawesome

Hôm nay tôi dành thời gian để soạn sẵn ra những mẫu hộp thông báo thường áp dụng trên Web và Code của nó để khi nào các bạn cần thì có thể sao chép nhanh mà không cần phải Code từ đầu.

Trong các mẫu này, tôi sử dụng Icon trong Fontawesome để đặt ở vị trí đầu tiên để tạo sự chú ý cho người đọc. Để sử dụng Fontawesome trên Website của bạn, các bạn nhớ làm theo các bước sau:

Chèn Icon thư viện Font Awesome

Để sử dụng các Icons của thư viện Font Awesome, hãy truy cập Fontawesome.com tạo tài khoản, đăng nhập và nhận mã để thêm vào phần <head> của trang HTML của bạn. Mã có dạng này:

Lấy mã thư viện Icon Font Awesome chèn vào Website

Các mẫu thông báo đơn giản

Mẫu chú ý

HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border: 1px dashed #F44336;"><span style="font-size: 15px;"><span style="color: #ff0000;"><strong><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Chú ý:</strong></span></span><span style="font-size: 15px;"> Đây là nội dung cần chú ý.</span></div>

Hiển thị trên trình duyệt:

Chú ý: Đây là nội dung cần chú ý.

HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border: 2px dashed #F44336;"><span style="font-size: 15px;"><span style="color: #ff0000;"><strong><i class="fa fa-ban" aria-hidden="true"></i>
 Chú ý:</strong></span></span><span style="font-size: 15px;"> Đây là nội dung cần chú ý.</span></div>

Hiển thị trên trình duyệt:

 Chú ý: Đây là nội dung cần chú ý.

HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border-left: 3px dashed #ff9c00;"><span style="font-size: 15px;"><span style="color: #ff0000;"><strong><i class="fa fa-bell" aria-hidden="true"></i> Chú ý:</strong></span></span><span style="font-size: 15px;"> Đây là nội dung cần chú ý.</span></div>

Hiển thị trên trình duyệt:

Chú ý: Đây là nội dung cần chú ý.

Mã HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border-left: 3px solid #c31d1c;"><span style="font-size: 15px;"><span style="color: #c31d1c;"><strong><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Chú ý:</strong></span></span><span style="font-size: 15px;"> Đây là nội dung cần chú ý.</span></div>

Hiển thị trên trình duyệt:

Chú ý: Đây là nội dung cần chú ý.

Mã HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border: 1px dashed #FF8F00;"><span style="font-size: 15px;"><span style="color: #ff8f00;"><strong><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Cảnh báo:</strong></span> Đây là nội dung cần chú ý.</span></div>

Hiển thị trên trình duyệt:

Cảnh báo: Đây là nội dung cần chú ý.

 

Mẫu đề xuất

Mã HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border: 1px dashed #4308f6;"><span style="font-size: 15px;"><span style="color: #4308f6;"><strong><i class="fa fa-check-circle-o" aria-hidden="true"></i> Đề xuất:</strong></span> Đây là nội dung đề xuất.</span></div>

Hiển thị trên trình duyệt:

 Đề xuất: Đây là nội dung đề xuất.

Mã HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border: 1px dashed #8BC34A;"><span style="font-size: 15px;"><span style="color: #8bc34a;"><strong><i class="fa fa-check-circle-o" aria-hidden="true"></i> Đề xuất:</strong></span> Đây là nội dung đề xuất.</span></div>

Hiển thị trên trình duyệt:

 Đề xuất: Đây là nội dung đề xuất.

Mã HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border-top: 1px dashed #1ac312; border-right: 1px dashed #1ac312; border-bottom: 1px dashed #1ac312; border-left: 4px dashed #1ac312;"><span style="font-size: 15px;"><span style="color: #1ac312;"><strong><i class="fa fa-check-circle-o" aria-hidden="true"></i> Đề xuất:</strong></span> Đây là nội dung đề xuất.</span></div>

Hiển thị trên trình duyệt:

 Đề xuất: Đây là nội dung đề xuất.

Mã HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border: 1px dashed #4DD0E1;"><span style="font-size: 15px;"><span style="color: #4dd0e1;"><strong><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Ý tưởng:</strong></span> Đây là nội dung ý tưởng.</span></div>

Hiển thị trên trình duyệt:

 Ý tưởng: Đây là nội dung ý tưởng.

Những mẫu phức tạp hơn 1 tý

Mã HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border-left: 10px solid #ff5722; border-top: 1px solid #ff5722; border-right: 2px dashed #ff5722; border-bottom: 1px solid #ff5722;"><span style="font-size: 15px;"><span style="color: #ff5722;"><strong><i class="fa fa-cog fa-spin" aria-hidden="true"></i> Hướng dẫn:</strong></span> Đây là nội dung hướng dẫn.</span></div>

Hiển thị trên trình duyệt:

Hướng dẫn: Đây là nội dung hướng dẫn.

Mã HTML:

<div style="text-align: center; vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border-left: 1px dashed #AB47BC; border-top: 1px dashed #AB47BC; border-right: 1px dashed #AB47BC; border-bottom: 4px solid #AB47BC;"><span style="font-size: 15px;"><span style="color: #ab47bc;"><strong><i class="fa fa-question-circle" aria-hidden="true"></i> Thông tin:</strong></span>
Đây là thông tin.</span></div>

Hiển thị trên trình duyệt:

Thông tin:
Đây là thông tin.

Mã HTML:

<div style="vertical-align: inherit; margin-top: 16px; padding: 20px 16px; border-left: 1px solid #16d731; border-top: 1px solid #16d731; border-right: 5px dashed #16d731; border-bottom: 1px solid #16d731;"><span style="font-size: 15px;"><span style="color: #16d731;"><strong><i class="fa fa-certificate fa-spin" aria-hidden="true"></i> Ý tưởng:</strong></span> Đây là nội dung ý tưởng.</span></div>

Hiển thị trên trình duyệt:

Ý tưởng: Đây là nội dung ý tưởng.

 

Tôi sẽ tiếp tục cập nhật thêm!


Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!


avatar
1 Số lượng chủ đề bình luận
0 Số lượng phản hồi cho các chủ đề bình luận
1 Người theo dõi
 
Bình luận được phản hồi nhiều nhất
Chủ đề bình luận sôi nổi nhất
1 Các tác giả bình luận
Mr Tech Những người bình luận gần đây
  Nhận thông tin qua email  
Mới nhất Cũ nhất Bình chọn nhiều nhất
Nhận thông báo cho
Mr Tech
Admin
Mr Tech

Hay dùng!