How to create a tags box like mixx & delicious?
i tried to search in google but no one talked about this.
i want a css solution to create a liquid tag box like the orange ones in this :
http://www.mixx.com/stories/10402914/haiti_us_gov_t_grants_matching_3_to_1_donations_to_worldvision_for_haiti
开发者_运维问答so, even if the word is long the tag box will fit it.
i want the same shape
Thanks
This is a css technique called sliding doors. You can find a good article about it here: http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx
Mixx uses this technique with just one image. The image is attached to the <li>
tag and to the <a>
tag. The overlapping of the images makes sure that the arrow is just as long as it is needed.
Mixx uses an ordered list, although an unordered one will do just fine:
<ol class="tag-list">
<li><a href="http://www.mixx.com/tags/crisis-assistance" rel="tag" title="crisis assistance">crisis assistance</a></li>
<li><a href="http://www.mixx.com/tags/earthquake" rel="tag" title="earthquake">earthquake</a></li>
<li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
<li><a href="http://www.mixx.com/tags/haiti" rel="tag" title="haiti">haiti</a></li>
<li><a href="http://www.mixx.com/tags/world-vision" rel="tag" title="world vision">world vision</a></li>
</ol>
Set your list at the top level so that there are no bullets or other graphics associated with the list items:
ol, ul {
list-style:none outside none;
}
Next, set your list items so that they display horizontally (inline). Mixx have used float: left;
but you might also use display: inline;
:
ol.tag-list li {
background:url("../images/layout/tag-bg.gif") no-repeat scroll 100% 0 transparent;
float:left;
margin:0 0.8em 0.8em 0;
padding:0 1em 0 0;
}
You'll notice that Mixx has the background for their list items set to this sprite:
(source: mixx.com)
The link within each list item also uses this same sprite, but changes the position of it in CSS (background: ... -19px...):
ol.tag-list li a {
background:url("../images/layout/tag-bg.gif") no-repeat scroll 0 -19px transparent;
color:#955C0F;
display:block;
height:1.4em;
padding:0.15em 0 0.2em 1.2em;
text-decoration:none;
}
This shifts the vertical position of the sprite (which is 38px high) up 19px, effectively showing the arrow-end.
That's essentially all there is to it.
精彩评论