[tintuc]

Tạo khung thông báo

Bước 1: 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ách sử dụng → gọi đến class tương ứng với từng màu, ví dụ:

Code Pro - Chia sẻ kiến thức, tư duy sáng tạo!

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

Code Pro - Chia sẻ kiến thức, tư duy sáng tạo!

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

Code Pro - Chia sẻ kiến thức, tư duy sáng tạo!

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

Code Pro - Chia sẻ kiến thức, tư duy sáng tạo!

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

Code Pro - Chia sẻ kiến thức, tư duy sáng tạo!

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

Lời kết

Trên đây là toàn bộ code và hướng dẫn tạo khung thông báo nhiều màu với CSS đơn giản. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

 [/tintuc]