开发者

Quarter circle tag cloud [closed]

开发者 https://www.devze.com 2023-03-22 06:49 出处:网络
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical andcannot be reasonably answered in its current form. For help clari
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarif开发者_开发百科ying this question so that it can be reopened, visit the help center. Closed 11 years ago.

What would be the best way of building a tag cloud in the shape of a quarter circle, any pointers to good resources will be helpful, rest assured I've already searched google for this.


This should get you started ;)

HTML:

    <div id="tag_cloud">
        <div style="float:left;clear:left;height:15px;width:131px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:92px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:71px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:51px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:38px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:26px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:17px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:13px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:10px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:7px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:5px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:4px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:2px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:right;clear:right;height:15px;width:0px"></div>

    <!-- TAGS GO HERE -->
    blue, d70, ddlatt, deborahlattimore, dlattimore, dragonfly, drops, eau, eye, f18, f28d, fernandinabeach, flickr, florida, fly, fun, fungyuenbutterflyreserve, fv10, gato, germany, harbor, india, interestingness, keurboomstrand, lattimore, leaf, leaves, macro, may, nightphotography, nikon300mmf28vr, nikon55mmmacro, nikonvr, oscarl\u00F3pez, panorama, ph213, pink, religion, ring, sf, southafrica, spring, storm, street, tahoe, telephoto, thereseflanagancom, topv444, urban, wow
</div>

CSS:

#tag_cloud {
    background-color:pink;
    border-top-left-radius:200px;
    -moz-border-radius-topleft:200px;
    height:140px;
    width:140px;
    overflow:hidden;
    padding-top:60px;
    padding-left:60px;
    font-size:12px;
    font-family:Arial, sans-serif;
    color:#FFF;
}

http://jsfiddle.net/AlienWebguy/RN5zV/3/

Also a good resource for this idea: http://www.csstextwrap.com

0

精彩评论

暂无评论...
验证码 换一张
取 消