Định dạng thẻ tags chuyên nghiệp dùng CSS

Chào mọi người, ngoài category thì tags cũng là một trong những link mô tả từ khóa liên quan tuyệt vời, hôm nay chúng ta sẽ dùng CSS định dạng cho các thẻ tags này, rất chuyên nghiệp mà không cần một hình ảnh photoshop nào.

Tag là gì?

Sẳn tiện trong bài này mình sẽ nói cho các bạn biết tag là gì và tác dụng như thế nào. Tag là một từ khóa, nhãn tập hợp các bài viết theo một chủ đề nào đó (Gần tương tự như category). Tuy nhiên cat thì tổng quát hơn, tag thì ở phạm vi nhỏ hơn. WordPress là thể hiện tốt nhất cho phần này.
dinh dang tags bang css

CSS cho tags

Thông thường để đinh dạng một tag đẹp và chuyên nghiệp sẽ dùng đến background image bằng Photoshop thiết kế ra, tuy làm bằng cách này đẹp và tương thích tuy nhiên tốn nhiều công sức và làm web chúng ta load chậm đi đáng kể. Với công nghệ hiện đại trong việc design Web bây giờ thì chỉ cần dùng CSS là đủ. 😀 DEMO TAGS CSS

Tuy nhiên có một khuyết điểm là IE mà thôi, ở các trình duyệt Google Chrome, Firefox, Safari and Opera IE 10 thì hoạt động bình thường, còn IE9 thì khác tí mà không mấy khó coi, nhưng từ IE8 trở xuống thì nhìn hơi kỳ một tí 😀 Dạo này mấy em nó chơi Win8 hết rồi nên cũng không lo phần này đâu. Bắt đầu là việc thôi, bạn tạo file HTML và code đoạn sau vào.

<!--
    <div class="tags">  
        <a href="#">BCDONLINE.NET</a>  
        <a href="#">WordPress</a>  
        <a href="#">Joomla</a>  
        <a href="#">SEO</a> 
    </div>  
-->

Đầu tiên định dạng cơ bản trước, bỏ gạch chân tạo gradient background hình chữ nhật bao quanh thẻ, định dạng padding margin … và hình demo bên dưới.

<!--
.tags a {
	display: inline-block;
	height: 21px;
	margin: 0 10px 0 0;
	padding: 0 7px 0 14px;
	white-space: nowrap;
	position: relative;

	background: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: linear-gradient(to bottom, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	color: #963;
	font: bold 11px/21px Arial, Tahoma, sans-serif;
	text-decoration: none;
	text-shadow: 0 1px rgba(255,255,255,0.4);

	border-top: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-right: 1px solid #DCA03B;
	border-radius: 1px 3px 3px 1px;
	box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);
}
-->

Hình demo kết quả:

CSS Cơ bản cho tags

CSS Cơ bản cho tags

Tiếp theo chúng ta sẽ tạo một hình tam giác bên góc trái, bằng cách tạo một hình vuông và cho hình đó xoay một góc 45 độ là sẽ có được kết quả mong muốn, đồng thời tạo border cho nó ở hai mặt trái và dưới giống như định dạng của tags lúc đầu.

<!--
a:before {
	content: '';
	position: absolute;
	top: 5px;
	left: -6px;
	width: 10px;
	height: 10px;

	background: -moz-linear-gradient(45deg, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(-45deg, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(45deg, #fed970 0%,#febc4a 100%);
	background: linear-gradient(135deg, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	border-left: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-radius: 0 0 0 2px;
	box-shadow: inset 1px 0 #FEDB7C, 0 2px 2px -2px rgba(0,0,0,0.33);
}
-->
tao goc bo cho tags bang css

Góc bo vuông

Tiếp đến là xoay hình vuông lại theo cách làm như sau:

<!--
a:before {
	-webkit-transform: scale(1, 1.5) rotate(45deg);
	-moz-transform: scale(1, 1.5) rotate(45deg);
	-ms-transform: scale(1, 1.5) rotate(45deg);
	transform: scale(1, 1.5) rotate(45deg);
}
-->
xoay hinh vuong css

Góc bo hoàn chỉnh

Còn bây giờ là nốt tròn ở đầu tags, chỉ đơn giản là tạo một hình vuông, bo góc lại cho tròn và định thuộc tính position CSS cho chính xác ở đầu là OK.

<!--
a:after {
	content: '';
	position: absolute;
	top: 7px;
	left: 1px;
	width: 5px;
	height: 5px;
	background: #FFF;
	border-radius: 4px;
	border: 1px solid #DCA03B;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.21);
}
-->
tao not cham trong tags CSS

Hoàn chỉnh CSS tags

Bước sau cùng là hover cho chữ màu trắng lên là hoàn chỉnh.

<!--
.tags a:hover {
	color: #FFF;
	text-shadow: -1px -1px 0 rgba(153,102,51,0.3);
}
-->

Kết luận: Vậy là xong được một bài về CSS nữa, mong là sẽ giúp các bạn được những thẻ tags đẹp cho blog của mình. Chúc thành công.
Nguồn: http://dimox.net

VN:F [1.9.22_1171]
Rating: 7.3/10 (3 votes cast)
Định dạng thẻ tags chuyên nghiệp dùng CSS, 7.3 out of 10 based on 3 ratings
Share This