Tạo Khung Thông Báo Nổi Bật Nhiều Màu Sắc

Bạn là một người thích đăng bài lên web của mình, bạn viết bài nhưng muốn làm cho đoạn thông báo nổi bật hơn, để người đọc có thể thấy và cập nhật. Hôm nay mình sẽ share tip cho các bạn nhé.

Tạo Khung Thông Báo Nổi Bật Nhiều Màu Sắc

Các Bước Thực Hiện

Bước 1: Các bạn tạo CSS cho khung thông báo



.codepro-colorbox {
    overflow: hidden;
    position: relative;
    margin: .5rem 0 1rem;
    transition: box-shadow.25 s;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 20px;
    font-size: 16px
}

.codepro-colorbox.blue {
    background: #03a9f4
}

.codepro-colorbox.green {
    background: #4CAF50
}

.codepro-colorbox.red {
    background: #F44336
}

.codepro-colorbox.orange {
    background: #ff9800
}

.codepro-colorbox.purple {
    background: #673ab7
}

Bước 2: Các sử dụng -> gọi đến class tương ứng với từng màu, ví dụ:

Hắc Hường Area

<p class="codepro-colorbox blue">chèn thông báo vào đây</p>

Hắc Hường Area

<p class="codepro-colorbox green">chèn thông báo vào đây</p>

Hắc Hường Area

<p class="codepro-colorbox red">chèn thông báo vào đây</p>

Hắc Hường Area

	<p class="codepro-colorbox orange">chèn thông báo vào đây</p>

Hắc Hường Area

<p class="codepro-colorbox purple">chèn thông báo vào đây</p>

Lời Kết

Toàn bộ code và bài  viết mình tham khảo từ Code Pro, nếu có thắc mắc hay khiếu nại bản quyền thì cmt bên dưới nhé, gud luck!.
Bài viết liên quan:

Đánh giá của Bạn về bài viết này?
Star Rating WIDGET PACK