Tạo nút Tag cho bài viết với CSS

// HTML/CSS

Đây là một thủ thuật đơn giản để trang trí cho thẻ tag cho bài viết. Bạn có thể xem demo trực tiếp bên dưới bài viết này.

Tag CSS3 Demo

Tag CSS3 Demo

Chúng ta sẽ sử dụng thuộc tính Pseudo trong CSS để được kết quả như ý muốn.

HTML

Đây là code html đơn giản cho ra danh sách các tag của bài viết.

<ul class="tags">
	<li><a href="#">Tag 1</a></li>
	<li><a href="#">Tag 2</a></li>
	<li><a href="#">hutruc.com</a></li>
</ul>

Chúng ta sẽ thêm thuộc tính Pseudo :before và :after.

Tag CSS3

Tag CSS3

CSS

Bây giờ chúng ta sẽ thêm CSS vào.

.tags{
    margin:0;
    padding:0;
    list-style:none;
    }
.tags li, .tags a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:11px;
    }
.tags a{
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#0089e0;
    color:#fff;
    text-decoration:none;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;    
    border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;    
    border-top-right-radius:4px;    
    }
.tags a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #0089e0 transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;        
    }
.tags a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#fff;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
    }
.tags a:hover{background:#555;}    

.tags a:hover:before{border-color:transparent #555 transparent transparent;}​

Bạn có thể xem demo tại đây.

Nguồn tham khảo: cssglobe

20 Responses

  1. Thạch Phạm says:
    August 15, 2012 at 1:41 am

    Mấy nay làm gì mà mất hút vậy bác, giờ mới thấy bác post bài mới :chem:

  2. Trung Nguyen says:
    August 15, 2012 at 8:05 am

    Cao thủ tái xuất giang hồ rồi :D :D

  3. Tỏi says:
    August 15, 2012 at 7:45 pm

    bác k cho em cái code get tag à?, TT_TT, có css mà k có php à, phải :chem: vì tội ẩu :) )
    Welcome back bác!

  4. Mèo Khùng says:
    August 18, 2012 at 5:55 pm

    Blog của bác h đìu hiu quá. Trở lại thời huy hoàng nào bác. :2:

  5. Hoàng Huynh says:
    August 20, 2012 at 9:41 pm

    Cái này xinh lắm à nha :2:

  6. Hinh anh dep says:
    October 31, 2012 at 9:06 pm

    Cái này hay ghê vừa gắn vào web nhìn đẹp vãi “đơn giản mà đẹp”

  7. Xem Boi Tinh Yeu says:
    November 3, 2012 at 11:13 pm

    Đúng là Css3 & Html5 mạnh thiệt làm được nhiều hiệu ứng ghê để tìm hiểu học mới được