原文：101 CSS Techniques Of All Time- Part 1

翻译：帕兰映像

CSS从根本上改变了网页设计，它让网页样式与网页基本元素分离，只需要通过一个小小的style.css文件里面，对相应元素定义众多的属性，就可以实现完全的整站改变。CSS是强大的，是伟大的，是不可或缺的。

要掌握CSS并不困难，帕兰随时自信满满的跟一些想学习CSS的朋友说:学会CSS所需要的时间，最短一天，最长一个星期。事实也确实如此。但要成 为一个真正的CSS高手，那就不是一两天的事情了。你需要掌握一些比较高级的CSS应用技巧，甚至是去创建一些还未发掘出来的CSS应用技巧。

Noupe为我们收集了101个CSS技术的高级应用，这些CSS应用技巧里面，有的你甚至可能从来都没有听过，但如果你是一个网页设计爱好者，你 应该去了解它。它们代表着当前最流行最实用的CSS应用，如果你能把它们都掌握并加以运用，你完全可以晋升为一个标准的CSS高手。
CSS Sprites － CSS背景图片的绝对定位应用
CSS sprites，CSS妖精？这是一个无法用中文正确表达的意思，如果一定要找一个词，那就叫CSS背景图片的绝对定位应用好了。这项CSS技术是利用利 用对一张背景图片的绝对定位来实现减少HTTP请求，从而达到网页提速。CSS sprite最适合作用于背景图标或是背景装饰性的图片。

这样说你可能还是不太明白。换言之，就是把许多背景图片整合成一张背景图片，然后通过限制要使用背景图片的元素的宽高，再通过background-repeat, background-position来对图片进行定位，这样做的好处就是减少网页加载时的HTTP请求，因为你每使用一张背景图片，加载网页时就会发出一个HTTP请求。

平常你可能不太注意，其实这项CSS技术在很多大型网站都有应用，比如Google韩国首页那个著名的动画工具条，你可以查看一下背景图片，其实所有的图标都在一张背景图上面。再比如土豆网，你点击导航栏，选择查看背景图片，可以看到，整个网页的大多数地方的背景图片都是集成在一张图片里的。

你还可以在AOL、Yahoo之类的知名网站找到类似的CSS sprites应用，个人网页设计好像用的还比较少。CSS sprites也具有一定的局限性，比如每次都需要添加图片到整张背景图片中，而且需要精准的定位测量。

下面是一些英文的关于CSS Sprites的使用技巧，如果你要看中文，也可以自己去搜索一些。

• CSS Sprites: Image Slicing’s Kiss of Death
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance

CSS Rounded Corners － CSS圆角效果

圆角效果是网页设计中最流行和最常使用的。下面是一些教你如何利用CSS达到圆角效果的技巧。

• Even More Rounded Corners With CSS- 基于PNG格式的图片建立圆角效果，并且支持边框，透明过渡, 渐变, 图案背景以及任何其它你能想象得到的效果
  Demo :
  
• Rounded corners in CSS- 利用4个DIV层和4张背景图片实现圆角效果。
• Liquid rounded corners
• Mountaintop Corners- 一个简单的方法来实现圆角效果。

Image Replacements Technique －图像替换技巧

Thierry Image Placement: 图片定位和图像替换

这一项技术主要是应用于网页标题，用CSS对背景图片的定位来替换原来的HTML元素，达到更加漂亮的视觉效果。

如果你需要这种CSS图片替换技巧， 你可以查看 Dave Shea 为你描述的如何达到利用CSS让文本达到镀金效果和闪电效果，或者是如何替换链接文本为CSS支持并且兼容IE和Mac， the Gilder Levin Ryznar Jacoubsen IR method.

Sliding Doors － 滑动门

Sliding Doors 是CSS引入的一项用来创造漂亮且实用的界面的新技术，它使用简单,我们只需要使用两张单独的背景图片，结合灵活的接口组件，就可以实现。

Sliding Doors” Box– Rounded Corners for All

Image Text Wrap Technique －文本环绕图像技巧

网页排版中最重要的一个元素就是图文混搭，以实现杂志志的效果。下面一些教程将告诉如何利用CSS实现文本环绕图像的效果，从而美化你的网页设计。

• BIG BAER advanced CSS technique - the sandbag div.
• CSS Image Text Wrap
• Fancy text wrapping around an image

Equal Height Technique －自适应高度的布局技巧

CSS也有让人失望的一些地方，比如元素的高度。下面一些方法，给够教会你如何使所有栏目都达到相同高度。

• Faux Columns- 最简单的方法就是使用背景图像的纵向平铺来实现自适应高度
• Equal Height Columns - revisited- 不使用图片就能达到所有栏目高度相同的方法。

• Equal height boxes with CSS- 这篇文章的技巧是教你如何使用CSS的属性让HTML元素像Table一样，包括display:table, display:table-row, display-cell等来实现相同高度布局。但我也没有实际试用，不知道这些CSS属性的兼容性如何。

  
  这里是CSS代码:

  .equal {display:table;}    

  .row {display:table-row;}    

  .row div {display:table-cell;}    

Turning A List Into A Navigation bar 创建一个列表导航栏

为什么要使用列表来创建导航栏？因为导航或者是导航菜单，本身就是串文本链接组成的列表。下面的文章中，教你如何使用列表元素来创建一个导航栏或导航菜单。

• Turning a list into a navigation bar- 非常简单的一个教程，将你如何使用一个无序列表来创建导航菜单。

• Uberlink CSS List Menus

• CSSMenus - 如何创建一个水平和垂直的4级列表菜单
• Listamatic
• 7 Advanced CSS Menu-7个高级CSS菜单技巧

Making Headlines With CSS －使用CSS优化Headlines标题

Headers就是指网页中的 h1, h2, h3, h4, h5或者 h6元素–它主要用来帮助浏览者区别网页中中的各种元素，以及突出显示一些内容。一个良好的Headlines设计将更利用浏览者的访问体验。

• Heading Style Gallery- 这是一个专门收集Heading样式的网站，如果你不确定你的网站Heading要使用哪种效果，可以到这里找一下，里面提供了不同字体、太小和颜色的Heading演示。
• Typography for Headlines -如何进行Headlines的字体排版。
• Making Headlines With CSS- 如何设计一个优秀的Headlines吸引读者的眼球并让他们继续阅读

CSS Shadows Techniques － CSS阴影技巧

• CSS Drop Shadows-这是一种用来建立灵活的CSS下拉阴影的技术，可被应用于任意块元素。
  
• Fun with Drop Shadows- 大多数CSS阴影效果都是使用margnin的负值来实现，而这个CSS阴影技巧有点特别，使用相对定位。
• Drop Shadows By Phil Baines-
• CSS Drop Shadows II: Fuzzy Shadows
  
  
• An improved CSS shadow technique- 一个非常强大和易于使用的技术运用，漂亮阴影效果，只需要预先使用几个简单的元素准备。

CSS Transparency － CSS透明

用CSS使元素达到前景和后景的透明度交叉视觉效果。

• Partial Opacity- 把文本放在图片上面，通常会造成阅读的困难。但此文提供了一种方法，在让图片背景图片弯透明的同时，加强文字的清晰显示效果。

• Cross-Browser Variable Opacity with PNG- 这篇文章将教你如何使用PNG格式图片达到透明效果，最重要的是让它支持所有主流浏览器。
• Two Techniques for CSS Transparency

Various Link Techniques

• Showing Hyperlink Cues with CSS- 这篇CSS技巧将向你展示如何把一个小图标放置到超链接中，支持IE7, Firefox和Safari.
• The ways to style visited Links- 这篇文章主要介绍如何区别已经点击的链接和未点击链接的样式，提高用户的浏览体验。
• Link Thumbnail-链接缩略图，当浏览者鼠标悬浮在你网页中的站外链接上时，显示该网页的一个小缩略图。
• Iconize Textlinks with CSS- 这个之前帕兰专门做过介绍，请点这里查看。不过据yichi留言说，似乎也不支持IE6.

原文：101 CSS Techniques Of All Time- Part2

翻译：帕兰映像

之前已经翻译了《101个CSS技术高级应用教程(上)》，现在我们就将为你带来更多的CSS高级应用，让你在网页设计中，使用CSS的时候更加得心应手。

Block Hover Effect Links 链接悬浮特效

• How to Create a Block Hover Effect for a List of Links- 学习如何创建一个链接悬浮特效 demo 演示.
• How To Make Clickable Areas Bigger -交互设计的一个基本原则就是保持规模较大的链接，这样能够更加吸引用户的点击。
• Anchor tags for block elements- demo 演示.

  

Style an A to Z Index 样式化一个A到Z的目录索引

• Anchor tags for block elements- Creating an A to Z index along the same lines that doesn’t break when you resize your text. You can see a demo here.

  

Typography Techniques 字体排印技巧

• CSS StyleFun- 如何使用CSS来实现各种效果，这算是一个CSS的补习，它包括各种教程，比如首字下沉、字符间距、样式化blockquotes、悬停特效等等。
• CSS Fonts, CSS Typography- 这篇教程主要教你用CSS对字体大小的控制以及随着浏览的发展，使用哪种字体表达更加合适，是百分比？还是 em? px? pt? 从而达到优秀的字体排印效果。

  

CSS Pagination － CSS分页导航

分页是一个机制，它为用户提供更多的选择，给单篇文章设置导航浏览，通常我们使用数字，暗示，箭头，以及”上一页”和”下一步”的按钮。

• CSS Pagination Links- 这个CSS分页链接导航的设计灵感来源于digg.com底部的分页链接。
• Pagination 101-给你许多很好的资源，帮助你创建一个良好的分页系统。
• Some styles for your pagination-提供一些分页导航系统设计供你选择。

  

CSS Tabs －CSS选项卡设计

Tab选项卡同样是CSS界面设计中的一个设计基础。它允许多个内容显示在单一的窗口区域里面。然后可能通过Tab选项卡的切换进行浏览或是Ajax实时载入。下面是一些有趣的CSS选项卡设计。

• Glowing Tabs Menu-一个简单的CSS Tab选项卡菜单。
• DOMTab- 这是一个强大的JavaScript的CSS TAB导航菜单，可以将所列出的链接连接到内容章节成为一个选项卡界面。
• Control.Tabs- Control.tabs重视创建一个标签式界面，从无序链接列表/锚链接到网页中的任何元素，而只需要给元素指定一个ID属性。
• Tabifier- 自动创建一个HTML标签界面采用即插即用的JavaScript 。

  

CSS Pullquotes －摘录设计

Pullquotes,摘录引用，如果你经常看报志或杂志，你会经常看到这些片段。

• Simple CSS Blockquotes and Pullquotes-如何创建一个可爱清新的blockquotes.
• Automatic pullquotes- 用JavaScript技术为基础，以补充pullquotes不必重复文字标记。
• CSS Pull Quotes-在本教程中，你将学会把pullquote文本中的title属性的一个段落或页面分区，并使用 :before伪元素来产生内容。

  

CSS Blockquote - CSS引用设计

Blockquote用来从另一个来源引用文本，通常是另一个博客或网站。 blockquotes是为了容纳大量的文本，所以作为通常情况下，当你引述一句以上的话时，使用blockquotes。

• Quotations and citations: quoting text- 提供多种引用文本的方法
• Swooshy Curly Quotes Without Images
• Styling Blockquotes with CSS
• Blockquotes with Image

Star Rater Techniques － 星形评级设系统计技巧

• CSS Star Rating Part Redux-这个实例教程将告诉你如何使用CSS创建一个星形评级系统
• CSS Ratings Selector-使用HTML列表项目结合CSS来创建星级评级系统
• Starbox: Rate like a star- 允许你通过一张PNG图片来创建一个简单的星级评级系统，基于Prototype javascript 框架创建，你可以添加一些特效到评级图标上面去。
• Unobtrusive AJAX Star Rating Bar

  

CSS Image Pop-Up CSS图片弹出

• Cool CSS Image Pop-up-一个图片弹出效果。但不需要任何Javascript，仅仅只要CSS。
• CSS Popup Image Viewer- 使用CSS的 “:hover”伪元素, 结合relative和absolute 定位, 实现简单的在一个HTML页面中放在图片浏览。
• Pop-up images on inline links-教你如何实现当鼠标悬浮在一个图片链接上面时，弹出图片显示。
• Hoverbox Image Gallery- 一个超轻量级公8kb的图片弹出效果 演示示例.

  

CSS Sitemaps －CSS 网站地图 设计

• Hierarchical Sitemap with Dashed Lines- 利用无序列表来创建一个层次分明的网站目录， 演示.
• Sitemap Styler: Style your Sitemaps with CSS and Javascript- 一个轻巧的CSS/JavaScript应用，样式化你的网站地图。查看演示.
• Spruced-Up Site Maps- 创建一个简洁的网站地图。
• Sitemap Celebration
• CSS SiteMap