Demo bài viết theo nhãn v2: Tạo hộp thoại thông báo với CSS

Thứ Tư, 26 tháng 11, 2014

Tạo hộp thoại thông báo với CSS

Như các bạn đã biết, trong một bài viết dài, ngoài nội dung chính của bài viết. Ta còn thường phải đưa những thông tin ngoài lề liên quan đến bài viết, hay những nhận xét cá nhân vào trong bài. Lúc này ta sẽ cần đến những hộp thoại để thu hút thị giác của người đọc. Trong bài viết này mình sẽ sử dụng CSS để tạo nên những hộp thoại đó, các bạn có thể tùy chỉnh theo ý thích .Các hộp thoại trong bài viết hay sử dụng có dạng như sau :

Hộp thoại thông tin,Hộp cảnh báo,Hộp thoại thông báo kết quả, hộp báo lỗi:

Trong bắt mắt lắm phải không nào. Được rồi ta sẽ bắt tay vào hành động. Ta dễ nhận thấy các hộp thoại trên đều có layout chung sẽ như sau:

Với mỗi hộp khác nhau, chỉ cần thay đổi biểu tượng, màu nền, và màu chữ. Toàn bộ Style trên được gói gọn như sau:

.info, .success, .warning, .error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('https://lh4.googleusercontent.com/-W0Jc899-mXo/VHaNZwTys_I/AAAAAAAACQE/yVhGCkHM8rA/w140-h140-p/1.info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('https://lh6.googleusercontent.com/-muYXZ57kGkk/VHaNZpi1h2I/AAAAAAAACPw/pdVNaUR5yeU/w140-h140-p/3.ketqua.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('https://lh3.googleusercontent.com/-Jkc0a9PlGnY/VHaNZ8GBpEI/AAAAAAAACPs/NLewR4QSBF0/w140-h140-p/2.canh%2Bbao.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('https://lh4.googleusercontent.com/-jxEIbtUZxu4/VHaNayhmrGI/AAAAAAAACQU/4uzEv4YNqE4/w140-h140-p/4.loi.png');
}

Các bạn có thể tùy chỉnh màu nền và hình ảnh theo ý thích.

Thêm đoạn CSS trên vào style css trên trang web của bạn. Để sử dụng, ta có thể dùng thẻ <div> với class tương ứng:

<div class="info">Nội dung hộp thoại</div>
<div class="success">Nội dung hộp thoại</div>
<div class="warning">Nội dung hộp thoại</div>
<div class="error">Nội dung hộp thoại</div>

Chúc các bạn thành công