Customize tag cloud cực đẹp bằng css

Bài ngày hôm nay mình xin chia sẻ một tuts viết về cách customize tag cloud cực đẹp bằng css

Bạn có thể vận dụng bài này vào customize lại cho blog của bạn thêm đẹp, hoặc những ai sử dụng wordpress thì có thể sử dụng style này cực kỳ đỉnh của đỉnh.
OK, bắt tay vào nhé. Cấu trúc tag cloud của chúng ta như sau

<div class="container">
  <ul class="tags">
    <li><a href="#">Interface <span>4</span></a></li>
    <li><a href="#">Icon <span>8</span></a></li>
    <li><a href="#">Typography <span>15</span></a></li>
    <li><a href="#">Color <span>16</span></a></li>
  </ul>

  <ul class="tags green">
    <li><a href="#">Design <span>23</span></a></li>
    <li><a href="#">Illustration <span>42</span></a></li>
    <li><a href="#">Component <span>108</span></a></li>
    <li><a href="#">Misc <span>12</span></a></li>
  </ul>

  <ul class="tags blue">
    <li><a href="#">Infrastructure <span>31</span></a></li>
    <li><a href="#">Application <span>33</span></a></li>
    <li><a href="#">Mobile <span>65</span></a></li>
    <li><a href="#">Desktop <span>160</span></a></li>
  </ul>
</div>

<li><a href="#">Interface 4</a></li>

<li><a href="#">Typography 15</a></li>

<li><a href="#">Color 16</a></li>

</ul>

<li><a href="#">Design 23</a></li>

<li><a href="#">Illustration 42</a></li>

<li><a href="#">Component 108</a></li>

</ul>

<li><a href="#">Infrastructure 31</a></li>

<li><a href="#">Application 33</a></li>

<li><a href="#">Mobile 65</a></li>

<li><a href="#">Desktop 160</a></li>

</ul>

</div>

Rất đơn giản, chỉ là những thẻ ul và li thôi mà
Còn dưới đây là đoạn css của tag cloud

.tags {
  zoom: 1;
}

.tags:before, .tags:after {
  content: '';
  display: table;
}

.tags:after {
  clear: both;
}

.tags li {
  position: relative;
  float: left;
  margin: 0 0 8px 12px;
}

.tags li:active {
  margin-top: 1px;
  margin-bottom: 7px;
}

.tags li:after {
  content: '';
  z-index: 2;
  position: absolute;
  top: 10px;
  right: -2px;
  width: 5px;
  height: 6px;
  opacity: .95;
  background: #eb6b22;
  border-radius: 3px 0 0 3px;
  -webkit-box-shadow: inset 1px 0 #99400e;
  box-shadow: inset 1px 0 #99400e;
}

.tags a, .tags span {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tags a {
  height: 26px;
  line-height: 23px;
  padding: 0 9px 0 8px;
  font-size: 12px;
  color: #555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #fafafa;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #dadada #d2d2d2 #c5c5c5;
  border-radius: 3px 0 0 3px;
  background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tags a:hover span {
  padding: 0 7px 0 6px;
  max-width: 40px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.tags span {
  position: absolute;
  top: 1px;
  left: 100%;
  z-index: 2;
  overflow: hidden;
  max-width: 0;
  height: 24px;
  line-height: 21px;
  padding: 0 0 0 2px;
  color: white;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #eb6b22;
  border: 1px solid;
  border-color: #d15813 #c85412 #bf5011;
  border-radius: 0 2px 2px 0;
  opacity: .95;
  background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -o-linear-gradient(top, #ed7b39, #df5e14);
  background-image: linear-gradient(to bottom, #ed7b39, #df5e14);
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  -webkit-transition-property: padding, max-width;
  -moz-transition-property: padding, max-width;
  -o-transition-property: padding, max-width;
  transition-property: padding, max-width;
}

.green li:after {
  background: #65bb34;
  -webkit-box-shadow: inset 1px 0 #3a6b1e;
  box-shadow: inset 1px 0 #3a6b1e;
}

.green span {
  background: #65bb34;
  border-color: #549b2b #4f9329 #4b8b27;
  background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -o-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: linear-gradient(to bottom, #71ca3f, #5aa72e);
}

.blue li:after {
  background: #56a3d5;
  -webkit-box-shadow: inset 1px 0 #276f9e;
  box-shadow: inset 1px 0 #276f9e;
}

.blue span {
  background: #56a3d5;
  border-color: #3591cd #318cc7 #2f86be;
  background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -o-linear-gradient(top, #6aaeda, #4298d0);
  background-image: linear-gradient(to bottom, #6aaeda, #4298d0);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

.tags {

zoom: 1;

}

.tags:before, .tags:after {

content: '';

display: table;

}

.tags:after {

clear: both;

}

.tags li {

position: relative;

float: left;

margin: 0 0 8px 12px;

}

.tags li:active {

margin-top: 1px;

margin-bottom: 7px;

}

.tags li:after {

content: '';

z-index: 2;

position: absolute;

top: 10px;

right: -2px;

width: 5px;

height: 6px;

opacity: .95;

background: #eb6b22;

border-radius: 3px 0 0 3px;

-webkit-box-shadow: inset 1px 0 #99400e;

box-shadow: inset 1px 0 #99400e;

}

.tags a, .tags span {

display: block;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.tags a {

height: 26px;

line-height: 23px;

padding: 0 9px 0 8px;

font-size: 12px;

color: #555;

text-decoration: none;

text-shadow: 0 1px white;

background: #fafafa;

border-width: 1px 0 1px 1px;

border-style: solid;

border-color: #dadada #d2d2d2 #c5c5c5;

border-radius: 3px 0 0 3px;

-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);

box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);

}

.tags a:hover span {

padding: 0 7px 0 6px;

max-width: 40px;

-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);

box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);

}

.tags span {

position: absolute;

top: 1px;

left: 100%;

z-index: 2;

overflow: hidden;

max-width: 0;

height: 24px;

line-height: 21px;

padding: 0 0 0 2px;

color: white;

text-shadow: 0 -1px rgba(0, 0, 0, 0.3);

background: #eb6b22;

border: 1px solid;

border-color: #d15813 #c85412 #bf5011;

border-radius: 0 2px 2px 0;

opacity: .95;

-webkit-transition: 0.3s ease-out;

-moz-transition: 0.3s ease-out;

-o-transition: 0.3s ease-out;

transition: 0.3s ease-out;

-webkit-transition-property: padding, max-width;

-moz-transition-property: padding, max-width;

-o-transition-property: padding, max-width;

transition-property: padding, max-width;

}

.green li:after {

background: #65bb34;

-webkit-box-shadow: inset 1px 0 #3a6b1e;

box-shadow: inset 1px 0 #3a6b1e;

}

.green span {

background: #65bb34;

border-color: #549b2b #4f9329 #4b8b27;

}

.blue li:after {

background: #56a3d5;

-webkit-box-shadow: inset 1px 0 #276f9e;

box-shadow: inset 1px 0 #276f9e;

}

.blue span {

background: #56a3d5;

border-color: #3591cd #318cc7 #2f86be;

}

Vậy là xong, một chút css nhỏ là bạn có ngay một widget tag cloud cực đẹp phải không nào, chúc bạn thành công

Bài viết được chia sẻ bởi
Sharecodeweb.net

Customize tag cloud cực đẹp bằng css

Like this:

Có liên quan

Nguyễn Trung Hiếu

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu