Tạo hộp thoại, khung đẹp bằng CSS

Việc tạo các hộp thoại, các khung trong website là vô cùng phổ biến. Chúng ta có thể sử dụng để hiển thị các thông báo, trình bày nội dung làm cho website của chúng ta nhìn bắt mắt và sinh động hơn.

Dưới đây mình sẽ giới thiệu các bạn 1 số mẫu đẹp:
- Mẫu hộp thoại thông báo:

<style>
 .info, .success, .warning, .error, .validation
{
 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2qgi8hM7Dvh6kwzsClo7jhjiIhLj0pg7YGC7Bi9-aI0PLOpHIaE6WfqKU0lPoffD-3FE18uQsKR3AoYrWPAD85qAEQV3l5hEsidFSRel_OLBIA7gXgjmbsITOi0feO1_xhC-Qo5dF6g/s1600/info-32.png’);
 }
 .success {
 color: #4F8A10;
 background-color: #DFF2BF;
 background-image:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA7rGlQIi_UbCdl-LZK2ZgfIR2hbG1QWmLxlqrO-wRFzdo4TmE6bB2P2kr80XvUH70BF3OpuV3L_qJ4MWfmC-M41DISQxWof88WZaTCjsTzlTWlRQwEhbfQlwPL3LumLb3mXE9xEATy7I/s1600/Success-32.png’);
 }
 .warning {
 color: #9F6000;
 background-color: #FEEFB3;
 background-image: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGTHPOuGrUIDoCwVXt3TsEJ1IJbX-7ZL0RUsniOmkxgpj0L_WUH7mB9_wkRo4yFMcecxt1w-zcERFvsNkD3J9BVbvACx2pO3MYuRtd9mM_K23kdYq414T6WXZRTUbv3rHBPSjS2L59_B0/s1600/Warning-32.png’);
 }
 .error {
 color: #D8000C;
 background-color: #FFBABA;
 background-image: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumJAv6iopqrz60Pxj9czsd6yzeuSsLzVTNzYxdI-eN5Zu98arJBuf8HiDmwPJ34IGASntmTDNNKKIpw4i7zzLe76P3wvXmPxUJDIo7NlIwuv-38YxCygXPXW9b93wJnxModCM-g0cD6s/s1600/Error-32.png’);
 }
 </style>
 <div style=”width:50%; margin-left:25%;”>
<div class=”info”>Hộp thoại thông tin</div>
<div class=”success”>Hộp thoại thông báo thành công</div>
<div class=”warning”>Hộp thoại cảnh báo</div>
<div class=”error”>Hộp thoại báo lỗi</div>
</div>

*Kết quả hiển thị:

Info message

Successful operation message

Warning message

Error message

- Mẫu hộp thoại nội dung:
Nội dung hiển thị trong hộp thoại có hiệu ứng đổ bóng

<style>
.border-content
{
    border: 2px solid #0088c2;
    border-radius: 11px;
    float: left;
    box-shadow: 5px 5px 10px #333;
}
.content
{
    border: 6px solid #BBE1F0;
    padding: 10px;
    text-align: justify;
    background: #EDFAFF;
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    border-radius: 8px;
    float: left;
}
</style>
< div class="border-content">
< div class="content"> Nội dung hiển thị trong khung</div>
</div>

*Kết quả hiển thị:

Nội dung hiển thị trong khung: Tôi yêu Việt Nam!

- Hộp thoại có kèm tiêu đề:

<style>
.title-warning
{
   border-bottom: 1px solid #FACE8B;
   font-weight: bold;
}
 .warning
{
 border: 1px solid;
 margin: 10px 0px;
 padding:15px 10px 15px 50px;
 background-repeat: no-repeat;
 background-position: 10px center; }
 .warning {
 color: #9F6000;
 background-color: #FEEFB3;
 background-image: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGTHPOuGrUIDoCwVXt3TsEJ1IJbX-7ZL0RUsniOmkxgpj0L_WUH7mB9_wkRo4yFMcecxt1w-zcERFvsNkD3J9BVbvACx2pO3MYuRtd9mM_K23kdYq414T6WXZRTUbv3rHBPSjS2L59_B0/s1600/Warning-32.png’);
 }
 </style>
 <div style=”width:50%; margin-left:25%;”>
<div class=”warning”>Hộp thoại cảnh báo</div>
</div>

* Kết quả hiển thị

Tiêu đề cảnh báo

Nội dung cảnh báo