Hướng dẫn tạo khung ghi chú tuyệt đẹp với CSS đơn giản

Ghi chú là hành động ghi chép lại một cái gì đó để nhớ, hoặc là các chi tiết được ghi thêm để bổ sung ý hay giải thích cho người khác hiểu. Vì vậy việc là đẹp cho khung ghi chú là khá quan trọng.

Hướng dẫn tạo khung ghi chú tuyệt đẹp với CSS đơn giản

Hôm nay, Code Pro sẽ hướng dẫn các bạn tạo khung ghi chú với CSS đơn giản, cùng theo dõi ngay nào!

Các bước tạo khung ghi chú

Bước 1: Tạo CSS cho khung ghi chú

<style>
    .codepro-note {
        position: relative!important;
        padding: 20px 20px 20px 50px!important;
        background: #e1f5fe!important;
        color: #01579b!important;
        font-size: .85rem!important;
        font-family: var(--fontB)!important;
        line-height: 1.6em!important;
        border-radius: 10px!important;
        overflow: hidden!important;
    }
    .codepro-note:before {
        content: ''!important;
        width: 60px!important;
        height: 60px!important;
        background: #01579b!important;
        display: block!important;
        border-radius: 50%!important;
        position: absolute!important;
        top: -8px!important;
        left: -12px!important;
        opacity: .05!important;
    }
    .codepro-note:after {
        content: '\002A'!important;
        position: absolute!important;
        left: 18px!important;
        top: 20px!important;
        font-size: 22px!important;
        min-width: 15px!important;
        text-align: center!important;
    }
</style>

Bước 2: Cách sử dụng → gọi đến class codepro-note

Code Pro: Hướng dẫn tạo khung ghi chú với CSS đơn giản - Chia sẻ kiến thức, tư duy sáng tạo!

<p class="codepro-note"><b>Chú ý:</b>Chèn ghi chú vào đây!</p>

Lời kết

Trên đây là toàn bộ code và hướng dẫn tạo khung ghi chú tuyệt đẹp 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