101个CSS关键技术高级应用教程.doc

101个CSS技术高档应用教程(上)
原文: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 Y 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属性兼容性如何。
<div class="equal"> <div class="row"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> </div>
这里是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.
有关文章
· CSS盒模型详解
· CSS Overflow属性详解
· 8个CSS图表数据制作实例
· CSS背景属性Background详解
· 21个神奇CSS技巧
· CSS定位属性Position详解
· CSS浮动属性Float详解
· 15个CSS网格布局生成器
· 14个提高设计效率CSS工具
· 精通高档CSS选取器
101个CSS技术高档应用教程(下)
原文：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分页链接导航设计灵感来源于底某些页链接。
· Pagination 101-给你许多较好资源，协助你创立一种良好分页系统。
· Some styles for your pagination-提供某些分页导航系统设计供你选取。

CSS Tabs －CSS选项卡设计
Tab选项卡同样是CSS界面设计中一种设计基本。它容许各种内容显示在单一窗口区域里面。然后也许通过Tab选项卡切换进行浏览或是Ajax实时载入。下面是某些有趣CSS选项卡设计。
· Glowing Tabs Menu-一种简朴CSS Tab选项卡菜单。
· DOMTab- 这是一种强大JavaScriptCSS 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

Horizontal and Vertical Centering －CSS水平和垂直布局有关资源
· Vertical Centering with CSS
· Horizontal and Vertical Centering with CSS
· Horizontal And Vertical Centering
· How to：vertical centering with CSS
有关文章
· 37个Ajax和CSS实现Tab选项卡切换效果界面
· 40各种Ajax,DHTML和Javascript应用技术
· 60+CSS技巧教程资源大全
· Pop!：可用于制作下拉菜单jQuery弹出特效插件
· 50各种极富创意CSS演示和教程
· 30各种CSS和JS下拉菜单资源
· IzzyMenu：在线创立DHTML/CSS菜单
· 9款CSS菜单生成器/含在线CSS导航菜单生成和CSS菜单生成软件
· 50多套CSS导航菜单免费资源
· 60各种网页导航菜单设计实例欣赏