芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
6

21 个令人惊叹的 CSS 技巧

作者 芒果/分类 代码/发布于 2009-08-11 00:03

CSS 是现代网络设计的重要构成,没有它,网页在视觉上将会非常丑陋。随着时间的推移,网络上的 CSS 教程大大增加,而且质量逐步提高。以下是芒果翻译的 21 个令人惊叹的 CSS 技巧。

1. Cross Browser CSS SlideShow
演示如何使用 CSS 创建一个跨浏览器的图像画廊。

2. CSS Based Image Maps
本教程演示如何使用 CSS 为图像建立锚点标记。

3. No JavaScript LightBox Using CSS
不使用任何 JavaScript 语句,用纯粹的 CSS 打造 LightBox 视觉效果。

4. Image Replacement for Buttons
使用 CSS 将提交按钮 (submit) 替换为图片。如果 CSS 被禁用,则还原为默认的按钮样式。

5. Animated Navigation Menu using CSS
使用纯 CSS 创建动态导航菜单。

6. Tree Like Navigation Using CSS
使用链接的嵌套列表创建一个树导航,适合于建立网站地图。

7. CSS Gradient Text Effect
使用 CSS 创建引人注目的文字梯度渐变效果。

8. CSS Menu List Design
利用 CSS 的边框 (border) 以及背景图像 (background-image) 属性,创建一个菜单列表。

9. Creating Liquid Layouts With Negative Margins
一种使用负边距 (negative margin) 特性创建液体(自适应)布局的方法。

10. Making Your Footer Stay Put With CSS
页面可能会发生没有足够的内容的情况,页脚会因此上升。本教程教你使页脚留在底部的处理方法,即使内容不够。

11. Simple, Scalable CSS Based BreadCrumbs
创建一个美观的可扩展的面包屑导航。

12. Snazzy Pullquotes for Your Blog
使引用文字在页面中突出显示,用于强化内容呈现。

13. CSS Stacked Bar Graphs
无需使用 JavaScript 或者任何插件,使用纯 CSS 展现图表。

14. How To Create a Block Hover Effect For List of Links
创建一个块悬停效果的链接列表。

15. Multi-Column Lists
本文介绍了多种将无序列表分栏的方法。

16. Date Display Technique with Sprites
如果访问过 Learning jQuery 这个站点,可能会注意日志左上方的日期呈现,本教程详解了实现该效果的 CSS Sprites 技术。

17. Date Badges and Comment Bubbles for your Blog
以优化的方式显示日期和评论,使其占用更少的空间。

18. How To Build a CSS Image Viewer The Clever Way
使用 CSS 创建图像浏览幻灯片效果,即便禁用 Flash 和 JavaScript 亦可正常工作。

19. Creating a CSS Image Preloader
使用 CSS 背景图像技术实现图像的预载入。

20. Fade Out The Bottom of Pages
一种使网页内容向页面的底部消失的页面过渡效果,演示参考 fortuito.us

21. Creative and Cool Uses of the CSS Border Property
本文详解如何利用 CSS 边框属性实现一些很酷的效果。

英文原稿:21 Amazing CSS Techniques You Should Know | Web Developer Plus
翻译整理:21 个令人惊叹的 CSS 技巧 | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/21-amazing-css-technique/" title="21 个令人惊叹的 CSS 技巧" rel="bookmark">21 个令人惊叹的 CSS 技巧 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 6 条群众意见

  1. bolo /2009-08-11 10:47

    这个不错,收藏了。 回应

    #1
  2. Hiro /2009-08-11 15:43

    我在原博客看到过,很不错!不过博主该文是为了充文章更新数呢,还是什么,和看原文没什么区别。
    最好是把每个链接都翻译过来? 回应

    #2
  3. 芒果Hiro/2009-08-11 18:27

    感谢提醒,翻译经验不足,望见谅。 回应

    #3
  4. 购物返现金 /2009-08-15 09:57

    很好,收下了! 回应

    #4
  5. ?
    55+ 网页设计中的幻灯片设计案例[激发灵感] | PlayTime /2010-05-10 21:27

    […] 库提供的强大功能,使这种复杂交互的实现更为简单。之前也有介绍过CSS 实现的幻灯片效果,不过毕竟还是各种瓶颈。所以,现在向你展示 55+ […] 回应

    #5
  6. dongbinghua /2010-09-13 19:21

    不知道和 Godaddy 对比如何? 回应

    #6

下面我简单说几句