CSS Corner Badges

首先预览在这里:badges.html, 可能有效果的浏览器:

Firefox 3.6b+, Safari 4+, Chrome 3, IE 5.5+

先进浏览器(不包括悲剧opera)应该用到这些CSS特性:

  • box-shadow 物体阴影
  • RGBA Color
  • text-shadow 文本阴影
  • transform CSS transform
  • gradient CSS 颜色渐变

至于IE,用filter试了一下,不是很完美~

13 Responses to CSS Corner Badges

  1. gravatar wayneReplyDec 22, 17:00

    太酷了,这不就是kiwi的那个demo标志么,哈哈

    gravatar fireyyReplyDec 22, 17:06

    @wayne, 对的,就是看到那个才想起来的 :P

  2. gravatar wayneReplyDec 22, 17:03

    我决定下次也在css里加上你那样的ascii标志,哈哈

    gravatar fireyyReplyDec 22, 17:08

    @wayne, 给你个网站 BigText

    gravatar dimlauReplyDec 22, 21:14

    @fireyy, 其实我也想问这个东西呢…甚好

  3. gravatar dimlauReplyDec 22, 21:20

    opera下果然很杯具,你一向如此彪悍阿…一般人遇到这种情况都会直接做成图片的吧?
    佩服佩服

    gravatar fireyyReplyDec 22, 21:25

    @dimlau, 做成图片的话就没了学习的机会了 :P
    另外opera 10.5会改善,除了CSS gradient以外,其他都会跟上

    gravatar dimlauReplyDec 22, 21:44

    @fireyy, 我就是用的10.5,之前10.10更悲剧,貌似直接是横条…

    gravatar fireyyReplyDec 22, 21:48

    @dimlau, 那应该还好,就是背景渐变色的问题

  4. gravatar dimlauReplyDec 22, 21:52

    关键是对比…如果不是看了safari下半透明又渐变的效果,也就不会觉得这么悲剧了

    PS。为什么顶上slogan的字体在opera里面也不一样?

    gravatar fireyyReplyDec 22, 22:29

    @dimlau, 是,字体改成Arial以后,还是有些许不同,opera的比较扁瘦...

  5. gravatar Twitter Trackbacks for CSS Corner Badges - ifireyy [fireyy.com] on Topsy.com ReplyDec 23, 11:53

    tweet CSS Corner Badges - ifireyy...

  6. gravatar HicroKeeReplyJan 20, 9:22

    这个好玩~ 把FF3.5换成Chrome才打得开让我压力很大~
    抄之~

Leave a Reply

Email address is not published

You should say a Chinese word to pass spam check. If you can not input Chinese, just copy 你好 and paste them into comment text box.

www.eYongs.com (mt) mediatemple