Cách tạo thông báo ấn tượng cho website bằng CSS

 ™» CGC Blog «™ Không cần phải dùng đến hình ảnh, bạn vẫn có thể tạo được những thông báo đẹp mắt cho website với những tính năng của CSS.

Bắt đầu thủ thuật:

Bước 1:Bạn vào Bảng điều khiển - Bố cục - tạo 1 Html/javarscript sau đó paste hết code bên dưới vào:

<!---Code ChipKool---->

<style type="text/css">

.chat-bubble {  

  background-color:#EDEDED;  

  border:2px solid #666666;  

  font-size:15px;  

  line-height:1.3em;  

  margin:10px auto;  

  padding:10px;  

  position:relative;  

  text-align:center;  

  width:300px;  

  -moz-border-radius:10px;  

  -webkit-border-radius:10px;  

  -moz-box-shadow:0 0 5px #888888;  

  -webkit-box-shadow:0 0 5px #888888;  

}  

.chat-bubble-arrow-border {  

  border-color: #666666 transparent transparent transparent;  

  border-style: solid;  

  border-width: 10px;  

  height:0;  

  width:0;  

  position:absolute;  

  bottom:-22px;  

  left:30px;  

}  

.chat-bubble-arrow {  

  border-color: #EDEDED transparent transparent transparent;  

  border-style: solid;  

  border-width: 10px;  

  height:0;  

  width:0;  

  position:absolute;  

  bottom:-19px;  

  left:30px;  

}  

</style>

<div class="chat-bubble">  

    Cảm ơn các bạn đã ghé thăm chipkool! Chúc các bạn một ngày vui vẻ :)  

  <div class="chat-bubble-arrow-border"></div>  

  <div class="chat-bubble-arrow"></div>  

</div>

Bước 2:Bạn muốn thay đổi dòng thông báo thì sửa dòng Cảm ơn các bạn đã ghé thăm chipkool! Chúc các bạn một ngày vui vẻ :)  

Bước 3:Save widget lại

Nguồn : chipkool.tk

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!