Hướng dẫn tạo khung thông báo nhiều màu sắc rất đơn giản và đẹp cho bài viết trên blog/web

Hướng dẫn tạo khung thông báo nhiều màu sắc

Bước 1: Chép toàn bộ đoạn code bên dưới trước thẻ đóng </style> và lưu lại

.modz-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
}

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

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

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

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

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

.modz-colorbox.Yellow {
    background: #FDBF14
}

Bước 2: Chèn code bên dưới vào bài viết, nhớ chuyển sang chế độ soạn thảo HTML

1. Blue