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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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; 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); } |
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
