Tạo khung thông báo nhiều màu với CSS đơn giản

Bạn là một nhà phát triển web hay đơn giản chỉ là một người sáng tạo nội dung trên internet thì có lẽ thông báo là một việc làm rất thường xuyên. Hôm nay, Code Pro sẽ chia sẻ cho các bạn code khung thông báo nhiều màu với CSS đơn giản.

Tạo khung thông báo nhiều màu với CSS đơn giản

Bằng một vài bước dưới đây bạn sẽ biến thông báo của chính mình trở nên nổi bật và bắt mắt hơn. Còn chần chừ gì nữa mà không thử ngay nào?

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!

Copyright © Code Pro