精通 CSS 造型设计元素

CSS 是现代网页设计的重要基石。Web 标准要求使用 CSS 来格式化和造型网页。其轻量级的特性，大大超越以往诸如表格之类的布局方法。

CSS 并没有想象中的难以捉摸。以下是一些利用 CSS 创建造型设计元素的技巧和技术，也包括一些结合 JavaScript 或 XHTML 以扩展网站功能的案例，适合作为学习 CSS 的基本指南。当然对于经验丰富的设计师，同样值得阅读。

1. 布局和用户界面技术

当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面，有几乎无限的可能性。下面是一些更有趣的技术。

The simplest way to horizontally and vertically center a DIV
本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码，但这个特殊方法仅使用一个 DIV 元素，并且简单得多。

New CSS Sticky Footer - 2009
一个棘手的完全跨浏览器兼容的页脚技术，兼容 Google Chrome 浏览器，并且不需要空 DIV 辅助。

Simple Page Peel Effect with jQuery & CSS
此教程结合 jQuery 和 CSS 创建网页剥离效果。大多数网站都使用 Flash 来实现这种效果。因此如果不热衷于 Flash 技术，这会是一个不错的选择。

Equal height boxes with CSS
一个使用 CSS 创建等高栏式布局的基本实例，彻底抛弃表格布局的代码冗杂与混乱。

Adaptable view - how do they do it?
让用户手动改变网站的表现，似乎可以大大提高网站的易用性和用户粘度。本教程将介绍如何为网站实施和部署浏览器适应技术。

CSS: The All-Expandable Box
一个创建自适应 CSS 容器的教程。容器会自动向各个方向扩大，以适应所包含的内容，而不只是垂直增长。适用于用户可控字号导致使 CSS 容器撑开的情况。

Four Methods to Create Equal Height Columns
一个使用 CSS 创建等高列的教程，共涉及四个不同的技术。兼容所有主流浏览器（甚至 IE6 浏览器）。

Vertical Centering With CSS
这篇文章包括各种使 CSS 元素垂直居中于网页的最佳技术。同时也介绍了如何利用这些技术，创建一个简单小巧的垂直居中的站点。

CSS vertical center using float and clear
使用浮动 (float) 和清除 (clear) 创建垂直居中的 CSS 容器，甚至兼容 IE5 版本。

Cross-Browser Inline-Block
本教程涵盖在多重内容情况下，创建一个内联块 (inline-block) 布局的方法，而不打破布局的完整性。

The CSS “Ah-ha!” Moment
谈论大多数设计师，在其职业生涯的某个时候发出 "Ah-Ha!" 感叹的时刻。以及一些重要的关于 CSS 容器布局的灵感突现。

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
本文给出了关于 CSS 层，相对和绝对定位。以及 Z-Index 属性的全面概述。

The CSS Overflow Property
详解了 CSS 溢出属性的工作流程。包括可见 (visible)，隐藏 (hidden)，滚动 (scroll)，自动 (auto)，以实例说明逐一说明。

Absolute, Relative, Fixed Positioning: How Do They Differ?
分析容易混淆的绝对 (absolute)，相对 (relative)，固定位置 (fixed) 之间的差异性，详细说明各个属性的区别。

display: inline-block
介绍在不同的样式中创建内联块 (inline-block) 的方法，并兼容不同的浏览器环境。

2. 导航和菜单技术

良好的导航是网站中非常重要的一部分。良好的导航既方便用户使用，也补充和完整了网站的其他设计元素。以下是一些关于创建导航的技巧和提示，使其两者兼备。

Create dropdown menus with CSS only
一份创建 CSS 下拉菜单的完整教程，该方法快速而且易于实施。

Simple scalable CSS based breadcrumbs
在网站上使用面包屑导航，可以方便访问者浏览。本教程介绍了一种创建基于 CSS 的，可伸缩面包屑导航的方法。

Horizontal Sub-nav with CSS & jQuery
一份关于使用 CSS 技术创建横向导航子菜单的完整教程。如果希望正常工作于 IE6 浏览器，可能需要执行一些 jQuery 代码。

CSS Step Menu
建立一个阶梯式菜单（也称为“向导菜单”）可能会非常棘手，特别是当它需要根据实际应用做出一些改变的时候。本文给出了创建该类菜单的实例。

The Tabbed Breadcrumb Navigation
一份关于创建面包屑导航，并格式化为标签式的全面教程。

Apple’s Navigation bar using only CSS
该教程说明如何创建一个类似苹果网站的导航栏，仅仅使用 CSS 和 HTML 代码（不附加任何图片）。

Sitemap Celebration
一款跨浏览器兼容（即使是 IE5 版本），并且基于嵌套列表的网站地图 (Sitemap) 风格。

Nice CSS menu with feed reader icons list
使用 CSS 创建一个供稿 (Feed) 阅读器图标菜单。可以方便地适用于其他类型的菜单。

Multi-level Menus with jQuery and CSS
使用纯 CSS 以及 CSS/JS 创建多级联动菜单的技术集锦。也涵盖了更先进和富有创造性的实例。

3. 图像风格和画廊

在网页设计中，图片造型是一个经常被忽视的因素。以下这些精选的的技术和技巧，将帮助你纠正和改善这种情况。

Centering images with CSS
一些关于图片居中的基本资料，使用 CSS 控制而不是过时的纯 HTML 布局。

Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript
一份关于如何在博客上，建立各种图片边框样式的完整纲要。使用 JavaScript 和 CSS 技术相结合。

Sexy Music Album Overlays
为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。

Create CSS pin balloons with ease
这是一个强大的技术，从简单的锚点标记，扩大过渡到为图像增加引脚气球、气泡提示或地图标示。

Create an Image Rotator with Description (CSS/jQuery)
一份关于如何使用 CSS 和 jQuery 技术建立图片旋转/画廊的教程。本文将创建一个干净的界面，用于显示一般的或组合的图像廊。

5 Popular CSS Speech Bubbles
收集了使用 CSS 创建气泡提示的 5 个不同的技术（有些纯粹用 CSS 实现）。

How to Make a Threadless Style T-Shirt Gallery
创建一种类似 Threadless 网站的图像画廊效果，以字幕或覆盖图片或缩略图的顶部。功能的实现技术值得借鉴。

CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)
基于 CSS 样式表打造针对打印用途和屏幕显示优化的图像。

Beautiful new CSS: box-shadow
关于利用 CSS 创建容器阴影效果的教程，德文网站。

4. 版式设计技术

CSS 擅长于版式设计。无论是字体类型，重量还是颜色，都需要使用 CSS 来定义。以下是一些指南，帮助你创建更好的网页版式。

Truetype, Font Variants and Antialiasing
一篇关于使用 Truetype 字体的文章，分析了为何有时字体显示效果不像所期望那样的原因。

Styling Ordered Lists with CSS
使用 CSS 创建一个极具吸引力的有序列表。

Beautiful fonts with @font-face
关于 @font-face 属性的基本使用教程，以及如何在网页设计中插入 Truetype 字体。

Forgotten possibilities of :first-letter in CSS
关于 CSS 中的 :first-letter 属性的使用，俄文网站。

8 Definitive Web Font Stacks
基于确切字体格式的 8 个通用 CSS 字体集，以帮助设计人员决定网站版式设计，选用适当的字体集，并调整到需要的合适效果。

Mike’s Experiments - CSS: Perspective Text
一个创建文字角度效果的有趣实例（即使文字块的底部看起来更接近顶端）。

Fonts for web design: a primer
一份适用于网页设计师的版式设计指南，包括字体类型的选择及其合适的用法。

CSS text-shadow Fun: Realtime Lighting Demo
使用 CSS 的文字阴影属性结合 JavaScript 技术，来创建一个发光效果实例。

Rendering Quotes With CSS
一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。

Six Ways to Style Blockquotes
使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。

Make OL list start from number different than 1 using CSS
教你如何自定义有序列表起始数字的简明教程。

Use CSS to Override Default Text Selection Color
这篇文章介绍使用任何颜色为文字设置高亮颜色的方法。

CSS Drop Cap Effect
为文章内容设定首字下沉的 CSS 方法，尤其适用于杂志型或书籍型网站。

5. 图标，按钮和链接

图标，按钮和链接在许多网页上经常是被忽视的因素。但是实际上它们也会对整体设计产生巨大的影响。以下是一些使网页造型更佳的资源。

Add Progressive Icons to Your Site Using :after pseudo-element
此教程说明如何为链接添加图标描述，按照不同文件类型指定不同图标（如 PDF 或 ZIP 文档）。

Super Awesome Buttons with CSS3 and RGBA
关于使用 CSS3 和 alpha 混合技术创建按钮的教程。

Scalable CSS Buttons Using PNG and Background Colors
使用 PNG 图像创建横向或纵向的可伸缩菜单。该技术能实现优雅降级，即便使用 IE6 浏览器仍可看到按钮（只是没有了 PNG 图像）。

Add File Type Icons next to your links with CSS
为链接添加文件类型图标的教程。

22 CSS Button Styling Tutorials and Techniques
一份涉及 20 多个技术的全面资源清单。关于如何使用 CSS 创建不同形状，不同尺寸的图标。

CSS Tricks’ Link Nudge
创建当鼠标停留时的缩进菜单效果的教程。

Sanscons
一些可以使用 CSS 重设图标颜色的图标集。

英文原稿：Mastering CSS, Part 1: Styling Design Elements | Smashing Magazine
翻译整理：精通 CSS 造型设计元素 | 芒果