@Utom 大神的FaveFaveFave.com的热门标签的CSS圆角是怎么做到的呢?

2011-01-11 08:24:54 +08:00
 zhaoyafei
RT
求助发问
4674 次点击
所在节点    问与答
8 条回复
karuto
2011-01-11 08:32:21 +08:00
CSS3吧?
karuto
2011-01-11 08:33:47 +08:00
呃我错了抱歉,看了下源码,是图片然后用background-position吧应该。
chone
2011-01-11 08:40:16 +08:00
背景图片是
http://favefavefave.com/images-black/tagbg.gif

DOM结构为
<a>
<span>text</span>
</a>

a节点有padding-left,background正常显示,no-repeat,
span节点background显示最左边的部分,也就是background-position: 100% 0px;
以上span显示的最左部分背景覆盖在正常的从右到左显示的a部分背景之上,就形成了一个完成的按钮
a:hover时背景向下偏移形成鼠标经过效果
sparklo
2011-01-11 08:58:34 +08:00
借问大家类似这样的图片都是自己做的么? 网上有比较好的诸如此类的图片库么? 我因为图片处理的功力几乎没有, 除非万不得已我都是css处理的.
Danny
2011-01-11 10:06:54 +08:00
不行就instagram 吧...
kaktos
2011-01-11 10:21:21 +08:00
这个圆角用的是css sliding door,两张背景,a一个,里面span一个,参见http://www.alistapart.com/articles/slidingdoors/
其实吧 ,直接用css3吧,IE9以下就让他们看直角呗~
spark
2011-01-11 10:38:59 +08:00
会的人不用教就会
不会的人教了也不会
cliff
2011-01-11 11:32:56 +08:00
都这么写网站现在,足够长的背景

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/7050

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX