威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

CSS3下拉菜单

一个很不错CSS3下拉菜单的演示,很不错,配色我也比较喜欢。是一个类似MAC风格的多级下拉菜单,这个效果使用了 border-radius,box-shadow,和text-shadow属性。它在Firefix,Safari和Chrome上的渲染效果都很赞。
CSS3下拉菜单

今天网上随便乱窜,然后发现了一个很不错CSS3下拉菜单的演示,很不错,配色我也比较喜欢,所以有必要分享一下。

是一个类似MAC风格的多级下拉菜单,这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性。它在 Firefox,Safari 和 Chrome 上的渲染效果都很赞,IE8以下的就不谈了。

CSS3应该是时下一个比较热门的话题,虽然现在没有唯一的标准,而且浏览器的支持也不是很好,特别是在天朝这个特殊的国度,IE6依然是一个难以逾越的鸿沟。不过这不妨碍对新技术的追求。

这个菜单带有多级分类,可惜PJBlog不支持多级分类,不然使用起来将会是非常漂亮的。

看原文你就点击这里

看演示你就点击这里

下面的图片展示的是浏览器支持CSS3和不支持CSS3时菜单样子的对比。

CSS3下拉菜单

使用一个渐变图层

一个白色过渡到透明的图片被用来实现渐变效果。因为新CSS3渐变功能不是所有的浏览器都支持的,渐变的背景图片是更安全的选择。

CSS3下拉菜单

渐变的强度是可以通过改变图片上下偏移量来实现的,此外,渐变颜色可以很容易地通过改变背景颜色调整。

CSS3下拉菜单

我不会一行一行地解释CSS代码。下面的图片重点说明了,这个这个下拉菜单是如何编码出来的关键。

CSS3下拉菜单

CSS3下拉菜单

您可能还会对这些文章感兴趣!

CSS3下拉菜单:目前有 16 条评论

  1. 怎么去痘印
    16楼
    怎么去痘印:Google Chrome 14.0.835.186 Windows XP

    我一直把那个css这个文件的隐藏功能没有搞明白,还是因为自己是新手,慢慢学习吧

    William 于 2010-08-01 05:11 PM 回复

    CSS隐藏?貌似藏不住,CSS目前的技术是藏不住,再怎么藏都是能看到的

    2010-08-01 16:06 回复
  2. 小叶榄仁
    15楼
    小叶榄仁:Internet Explorer 6.0 Windows XP

    好像挺好看的

    2010-07-01 15:45 回复
  3. winw
    14楼
    winw:傲游浏览器 3.3.6.2000 Windows 7

    技术文章,路过

    2010-07-01 15:44 回复
  4. QuietBoy
    13楼
    QuietBoy:Opera IBIS 11.51 Windows XP

    浏览器的不统一造成技术的偏差,很多好的东西都实现不了,对于网站开发的人来说的确是个悲哀。。

    William 于 2010-07-01 03:49 PM 回复

    是的,特别是IE6,现在是深恶痛绝。真希望微软强制升级IE6

    2010-07-01 15:22 回复
  5. HCONLY
    12楼
    HCONLY:Google Chrome 6.0.472.62 Windows XP

    信息更新得太快了,往往还没反应过来就又冒出来一个新东西

    William 于 2010-06-30 05:54 PM 回复

    这个已经出来很久了,只是没有一个真正的标准出来。所以想统一思想还有难度

    2010-06-30 14:10 回复
  6. 老七
    11楼
    老七:360安全浏览器 Windows 7

    效果不错。。

    William 于 2010-06-28 11:32 PM 回复

    恩,是的

    2010-06-28 23:02 回复
  7. Jungle
    10楼
    Jungle:UC浏览器 5.6.12860.10 Windows XP

    在IE7里是方的,CHROME 和FF是圆边。

    William 于 2010-06-27 09:53 PM 回复

    是的啊,IE6/7/8都不支持CSS3,Chrome、FireFox、Opera、Safari支持CSS3,但是又各有各的标准,所以CSS3还要发展。

    2010-06-27 20:53 回复
  8. Firm
    9楼
    Firm:Internet Explorer 6.0 Windows XP

    效果做出来实在是好,要仿照简单,要自己创造一个咋那么难呢

    William 于 2010-06-27 06:15 PM 回复

    呵呵,这个就要看一个人的设计想象力了~

    2010-06-27 00:00 回复
  9. 木易
    8楼
    木易:Google Chrome 17.0.963.56 Windows 7

    CSS3的功能在这里再次使我折服!

    William 于 2010-06-26 02:49 PM 回复

    呵呵,我也是,所以要多多研究CSS3

    2010-06-26 09:02 回复
  10. Tony
    7楼
    Tony:Google Chrome 29.0.1547.15 Windows XP

    呃 真得很好看!都用上图片移动!厉害!

    William 于 2010-06-26 02:48 PM 回复

    他的那个渐变构思还是很不错的

    2010-06-26 00:30 回复
  11. 苏扬
    6楼
    苏扬:Google Chrome 13.0.782.107 Windows XP

    你还别说 CSS3还真的好看!

    William 于 2010-06-26 02:48 PM 回复

    恩,这个演示还是CSS3的基本样子,还有旋转,渐隐等等,就更炫了

    2010-06-26 00:17 回复
  12. 凯说
    5楼
    凯说:Firefox 9.0.1 Windows XP

    不知道pj4会不会支持多级分类

    William 于 2010-06-25 05:32 PM 回复

    不支持的

    2010-06-25 17:10 回复
  13. 沉冰浮水
    4楼
    沉冰浮水:Firefox 4.0.1 Windows XP

    好像用不到这个效果。。

    William 于 2010-06-25 02:34 PM 回复

    看个人所需了,我觉得挺实用的。

    2010-06-25 14:22 回复
  14. littlebear
    地板
    littlebear:傲游浏览器 3.0 Windows XP

    字体很好看, 是什么啊?

    William 于 2010-06-25 02:33 回复

    font: normal .8em/1.5em Arial, Helvetica, sans-serif;
    就是很常见的英文字体,主要是他的颜色搭配的比较合理,看着舒服。

    2010-06-25 11:25 回复
  15. 海天无影
    板凳
    海天无影:Internet Explorer 7.0 Windows XP

    我还在想颜色变色 是怎么变的呢
    原来是图片移动效果 很好 很好~

    William 于 2010-06-25 02:30 PM 回复

    是的,里面用到图片了,开始我也以为是纯CSS3写的渐变。

    2010-06-25 10:51 回复
  16. 木本无心
    沙发
    木本无心:傲游浏览器 3.0 Windows XP

    恩,确实很棒,如能移植到pj上就好了……

    William 于 2010-06-24 10:13 PM 回复

    我在构思着了,嘿嘿

    2010-06-24 22:01 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry