SonicHTML – 高品质 HTML+CSS 服务

层叠样式表（CSS）是现代网络设计的重要组成部分，没有它们，网站看起来将会非常丑陋，就像十年前的网页设计一样。随着时间的推移，高质量的CSS教程有在网路上已大大增加。这里有21惊人的CSS技巧，你可能不会想到这些都是单纯靠CSS来实现的。

1. Cross Browser CSS SlideShow（夸浏览器CSS幻灯片）

演示如何创建一个跨浏览器的图像廊仅使用CSS 。

2. CSS Based Image Maps（CSS图像地图）

本教程演示如何建立一个公正的图像地图使用的CSS 。

3. No JavaScript LightBox Using CSS（无JS的LightBox ）

创建一个CSS LightBox，没有使用JavaScript

4. Image Replacement for Buttons（使用图片替换按钮）

使用CSS将提交按钮用图片替换，如果CSS被禁用，则变为系统原来的提交按钮。

5. Animated Navigation Menu using CSS（CSS动画导航菜单）

如何创造一个动画导航菜单中仅使用的CSS 。

6. Tree Like Navigation Using CSS（CSS树型导航）

创建一个树导航使用嵌套列表的链接，建立网站地图时非常有用。

7. CSS Gradient Text Effect（CSS渐变文字效果）

创建引人注目的梯度渐变文字仅使用CSS 。

8. CSS Menu List Design（CSS菜单列表设计）

创建一个菜单列表使用的CSS边框风格或背景图像。

9. Creating Liquid Layouts With Negative Margins（创建液体布局负边距）

负边距布局创建教程

10. Making Your Footer Stay Put With CSS（CSS页脚固定底部）

当页面已经没有足够的内容，以填补该网页，页脚会因此而上升。本教程讲解如何处理页脚固定留在底部，即使内容是不够的。

11. Simple, Scalable CSS Based BreadCrumbs（简单，可升级的CSS面包屑）

创建可扩展的CSS面包屑

12. Snazzy Pullquotes for Your Blog(时髦的博客引用)

使引用文字在您的内容或博客帖子突出显示，突出重点在内容网页上。

13. CSS Stacked Bar Graphs（CSS层叠式条形图）

无JS或其他插件，纯CSS实现CSS的图表

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

15. Multi-Column Lists（多列列表）

本文介绍了一个无序清单分成多个栏目。

16. Date Display Technique with Sprites（使用CSS精灵的日期显示技术）

If you have ever visited Learning jQuery then you might have noticed the awesome date display next to each blog post. This tutorial will show you how to achieve that using CSS Sprites.
使用CSS精灵为每个博客帖子旁边显示日期。

17. Date Badges and Comment Bubbles for your Blog（日期徽章和评论气泡为您的blog）

显示日期和评论博客帖子在一个不错的方式，需要更少的空间。

18. How To Build a CSS Image Viewer The Clever Way（CSS建立一个图像浏览器）

创建一个不错的图像浏览器使用CSS，即使用户已禁用Flash和JavaScript也能正常将工作，

19. Creating a CSS Image Preloader（用CSS创建图像预加载）

使用的CSS背景图像预载入图像

20. Fade Out The Bottom of Pages（淡化页面底部）

如何使网页内容到页面的底部时消失

21. Creative and Cool Uses of the CSS Border Property（使用CSS边框属性的创新方法）

本文将告诉您如何使用CSS边框属性来实现一些很酷的效果。

原文：21惊人的CSS技巧

译自：21 Amazing CSS Techniques You Should Know

Popularity: unranked