CSS Boxs: Style một kiểu Bubble đơn giản

http://backend.thegioiweb.vn/Uploaded/huyenctt/Tailieu/bubble-1.zipĐể giúp các bạn có thói quen áp dụng các kiểu Typography vào trong Website của mình. Trong bài viết này tôi xin hướng dẫn các bạn làm một kiếu bubble đơn giản

Dạng bubble thường được sử dụng trong việc trích dẫn lời nói của một tác giả nào đó, hoặc trong các lời bình luận trong các blog.

1. Định dạng HTML

<div class="bubblewrapper">
<div class="comment">
Đây là ví dụ của một kiểu bubble đơn giản, các bạn có thể ứng dụng chúng vào ngay trong site của mình. Chúc các bạn thành công! </div>
<div class="commentfooter">
<span class="author">Tác giả:</span> <a href="www.cssyeah.com" target="_blank" title="Tác giả">CSSYeah.com</a>
</div>
</div>

Để làm kiểu bublle đơn giản này chúng ta sẽ sử dụng hai thẻ <div>. Thẻ <div class="comment"> chứa lời bình luận, còn thẻ <div class="footercomment"< sẽ được dùng chứa thông tin tác giả.

Thẻ <div class="bubblewrapper"> trong trường hợp này có tác dụng giới hạn kích thước cho hai thẻ <div> bên trong. Khi đưa vào trong Website bạn có thể thay đổi kích thước của nó để cho phù hợp với nội dung Website.

2. Định dạng CSS

Ta có định dạng CSS của kiểu bublle trên như sau:

#wrapper {

 width: 400px;

 margin: 0 auto;

 padding: 0;

}

div.comment {

 margin: 0;

 padding: 10px;

 background: #E8ECEF;

}

div.commentfooter {

 padding: 8px 0 0 22px;

 background: url(arrow-down.gif) no-repeat 20px 0 #FFFFFF;

}

span.author {

 padding-left: 15px;

 background: url(author.gif) no-repeat left center;

 font-weight: bold;

}

div.commentfooter a {

 color: #CC0000;

}

div.commentfooter a:hover,

div.commentfooter a:active {

 text-decoration: none;

}

Trong phần nội dung do chúng ta có thể dùng nhiều lần đạng bubble này, do vậy chúng ta định dạng thuộc tính class cho thẻ <div>