Khung CSS thông báo đẹp cho Blog

bùi sang thọ | 16.3.15 | Blog |

Bài viết giới thiệu đến bạn 4 mẫu khung thông báo cho 4 mục đích khác nhau rất đẹp.

Bài viết sẽ hướng dẫn bạn trang trí cho 4 loại khung thông báo, đó là

1. Thông báo lỗi (ERROR)
2. Thông báo thành công (SUCCESS)
3. Thông báo cảnh báo (WARNING)
4. Thông báo chú ý (NOTICE)

Bạn có thể xem kết quả sau khi đạt được ở hình bên dưới, hoặc xem trực tiếp và có thể chỉnh sửa tại chỗ ở link này. Những dòng code dưới đây có sử dụng màu riêng, nếu bạn muốn thay đổi màu, hãy vào trang này để tìm một màu mà mình ưng ý nhất nhé. Nếu bạn muốn xem sự thay đổi trực tiếp khi chỉnh sửa, hãy dùng Firebug hoặc vào cái link ở đoạn trên.

Lưu ý đoạn code từ Bước 1 đến Bước 3 là các bạn dán vào trước thẻ

]]></b:skin>

Bước 1. Tạo layout cho cả 4 khung này bằng đoạn code bên dưới

.alert-box {
    color:#555;
    border-radius:10px;
    font-family:Tahoma,Geneva,Arial,sans-serif; 

    font-size:11px;
    padding:10px 10px 10px 36px;
    margin:10px;
}

Và đây là ý nghĩa của từng dòng code

• color:#555; – đây là màu của chữ.
• border-radius:10px; – độ bo tròn của khung, số càng lớn thì càng bo tròn.
• font-family:… – font chữ được sử dụng, nếu xoá dòng này thì nó sẽ lấy font mặc định của trang.
• padding:10px 10px 10px 36px; – khoảng cách từ chữ đến viền của khung, theo thứ tự trên - phải - dưới - trái.
• margin:10px; – khoảng cách từ toàn bộ khung so với các phần khác của bài viết.

Bước 2.  Mỗi box sẽ có 1 thành phần <span> chứa mấy chữ như ERROR, WARNING,..., bạn thấy nó được tô đậm và viết hoa, dưới đây là đoạn code cho việc làm chúng như vậy.

.alert-box span {
    font-weight:bold;
    text-transform:uppercase;
}

Bước 3. Trang trí và tạo màu cho từng loại khung.

.error {
    background:#ffecec url('images/error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
}
.success {
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
}
.warning {
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
}
.notice {
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
}

Và ý nghĩa của từng dòng

• background:… – chọn màu và icon cho box (chú ý chỗ icon, bạn cần trích dẫn link đầy đủ cho icon của mình, kích thước của icon càng nhỏ càng tốt, khoảng 16x16 là vừa.
• border:… – xác định kiểu khung, độ rộng và màu cho đường viền bao quanh.

Bước 4. Cách dùng. Bạn đã xem được hình ví dụ ở đầu bài, dưới đây là đoạn code cho hình đó, khi bạn cần sử dụng cho mục đích riêng, chỉ việc thay đổi chút ít.

<div class="alert-box error"><span>error: </span>Write your error message here.</div>
<div class="alert-box success"><span>success: </span>Write your success message here.</div>
<div class="alert-box warning"><span>warning: </span>Write your warning message here.</div>
<div class="alert-box notice"><span>notice: </span>Write your notice message here.</div>

Theo CSSPortal.

Từ khoá tiếng Anh để tìm kiếm bài này : Beautiful CSS Notification Boxes for Blogger? How to create a beautiful notification box for website?

Bài viết đăng lại nguyên văn từ trang http://www.math2it.com/.