70 + 必备 CSS3 和 HTML5 教程资源收集

 

70 + 必备 CSS3 和 HTML5 教程资源收集

CSS3 和 HTML5 足以够彻底改变网站设计的现状。许多新的特性和功能，以前可能需要想破头皮使用各种手段去实现。然而当 CSS3 和 HTML5 将其纳入本地属性后，无论是圆角效果还是多栏布局，一切变得简单易用。

以下是70资源，教程和文章，让你开始对CSS3和HTML 5。所讨论的许多技术已经被支持了一些在一些一些现代网络浏览器（Safari和Firefox的程度上拥有最广泛的支持），这样你就可以立即开始。

CSS3 教程和资源

Get Started with CSS 3 - 一个基本的 CSS3 使用指南。

Cascading Style Sheets Current Work - W3C 所做的 CSS3 标准的进展细节。

Border-image: Using Images for Your Border - 一份 CSS3 新增图像边框功能的使用指南。

Overview of CSS3 Structural Pseudo-Classes - 方便的 CSS3 结构化伪类参考图表。

Push Your Web Design Into The Future With CSS3 - 介绍了一些 CSS3 规范的新功能。

CSS3 Property Tests - 概述了目前 CSS3 特性的浏览器支持情况。

Rounded Corner Boxes the CSS3 Way - 一份使用 CSS3 新方法创建圆角效果的教程。

CSS3 Selectors Explained - 概述了一些 CSS3 选择器，包括选择器语法。

CSS3 Borders Preview - 介绍了一些 CSS3 新的边框类型，包括圆角边框和梯度边框。

Box Shadow - 为元素创建阴影效果。

RGBA Colors - RGB 颜色的 Alpha 透明效果使用指南。

CSS3 Multiple Columns - 利用比以往更简便的 CSS3 方法，创建多栏式布局。

@font-face in IE: Making Web Fonts Work - 让 Internet Explorer 支持 @font-face 属性。

Progressive Enhancement with CSS3: A Better Experience for Modern Browsers - 使用 CSS3 逐步增强 Web 表现力的教程。

CSS3 RGBA - 使用新的 RGBA 功能创建透明颜色。

CSS3 Opacity - CSS3 透明/不透明效果指南。

Multiple Backgrounds - 虽然目前只有 Safari 支持，但能够使用多背景图片是一项非常酷的新功能。

CSS3 Color Names - CSS3 支持 147 种不同的颜色名称（包括 17 种标准色及另加的 130 种色彩）。当然，同样支持 RGB 和十六进制颜色代码。

CSS3 Background Images (Sizing and Multiple Images) - 一份多背景图片的具体执行教程。

CSS Template Layout Module - 此模块将使设计更加先进，多栏 CSS 布局容易很多。

CSS at Ten: The Next Big Thing - 介绍 CSS3 的新功能，包括大量有关字体支持的资料。

Fonts Available for @font-face Embedding - 涵盖目前所有被 @font-face 属性所许可的网页字体，提供字体下载链接。

Introduction to CSS3—Part 5: Multiple Columns - 介绍了 CSS3 的多栏布局功能，并使用实例说明。

CSS3 Multiple Columns - 又一份方便的 CSS3 多栏功能参考手册。

Word-Wrap - 介绍 CSS3 的文字换行功能。

Liquid Faux Columns with Background-Size - 使用背景尺寸属性创建液体（自适应）栏式布局的教程。

Six Questions: Eric Meyer on CSS3 - 一篇关于 CSS3 及其对网页设计的未来影响的采访。

Semantic Code: Put More In, Get More Out - 一个快速教程，涉及 CSS3 选择器使用和语义，以及为网站添加新功能的方法。

The CSS3 ‘Box-Sizing’ Concept - 概述 box-sizing 属性的概念和工作方式。

Super Awesome Buttons with CSS3 and RGBA - 使用 CSS3 的 RGBA 特性建立很酷的网页按钮。

A Mock-Up Interface Using CSS3 Color - 使用 CSS3 的颜色模块创建和模拟桌面应用的窗口界面效果。

Enhance Internal Page Links - 改善网站内部链接的可用性。

Introduction to CSS3—Part 4: User Interface - 操纵元素 (element)，游标 (cursor)，框布局 (box layout)，和其他用户界面功能的教程。

Creating a Polaroid Photo Viewer with CSS3 and jQuery - 创建很酷的宝丽来照片风格的照片集。

Overriding the Default Text Selection Color with CSS - 改变 Sfari 和 Firefox 的默认高亮颜色。

Making an Image Gallery with :Target - 使用目标伪类 (:target pseudo-class) 创建图片画廊。

Styling Forms with Attribute Selectors—Part 1 - 关于表单样式中使用属性选择器代替 class 选择器的指南。

CSS: Transition Timing Functions - 介绍了 CSS3 的过渡期限 (transition-duration) 和过渡定时功能 (transition-timing-function) 特性。

CSS3 Corporate Fun - 使用下拉菜单和过渡效果建立企业式的导航栏。

CSS3 and International Text - 概述了 CSS3 国际性文本功能。

CSS Trick: Hidden Messages - 在文本中隐藏信息的 CSS3 技巧。

The Potential of Web Typography - 全面概述 @font-face 属性，及其潜在用途。

The Fundamental Problems with CSS3 - 讨论使用 CSS3 标准当前面临的问题。

CSS3 Cheat Sheet - CSS3 中的 PDF 文档包含功能。

CSS3 和 HTML 5 组合资源

A Marriage Made in Heaven? HTML 5 and CSS3 - 介绍 CSS3 和 HTML5 如何协同工作，展望网页设计的未来。

HTML 5 and CSS3: The Techniques You’ll Soon Be Using - 使用先进的 HTML5 和 CSS3 功能建立一个博客页面。

When Can I Use… - 查一查哪些浏览器支持 CSS3 和 HTML5 新特性，哪些浏览器不支持。

The Power of HTML 5 and CSS3 - 使用 HTML5 和 CSS3 技术结合开发的可能性概览。

HTML 5 资源

A Preview of HTML 5 - 提供了一些关于 HTML5 特性和优点的资料。

Yes, You Can Use HTML 5 Today! - 一些目前支持的 HTML5 特性和应用实例指南。

HTML 5 Cheat Sheet - 利用 HTML5 的新特性和功能打造可下载的 PDF 表。

Designing a Blog with HTML 5 - 一个利用 HTML5 建设博客站点的完整教程。

Coding an HTML 5 Layout From Scratch - 从底层向上创建一个 HTML 网站的完整指南。

HTML 5 Boilerplates - 一些可用 HTML5 样板的快速指南。

A Selection of Supported Features in HTML5 - 一张显示部分 HTML5 功能目前在不同的浏览器的支持情况的图表。

HTML5 id/class Name Cheatsheet - HTML5 中新 ID 和 Class 名称的备忘表。

Preparing for HTML 5 with Semantic Class Names - 概述 HTML5 新的结构元素，阐述如何准备在 HTML 4.0.1 或 XHTML 1.0 中使用语义类别名称。

HTML 5 Canvas—The Basics - 使用 HTML5 画布元素 (canvas element) 的完整指南。

HTML 5: Nav Ambiguity Resolved - 介绍 HTML5 中全新的导航元素。

HTML 5 + XML = XHTML 5 - 概览 HTML5 怎样和 XML 实现交互。

The Video Element - 介绍 HTML5 全新的视频元素。

更多资源

CSS3.Info

CSS3 Exciting Functions and Features: 30+ Useful Tutorials from Noupe.

30 Essential CSS3 Resources from Carsonified’s Think Vitamin blog.

20 Useful Resources for Learning about CSS3 from Six Revisions.

CSS3 Unleashed Tips, Tricks and Techniques from W3Avenue.

20 Very Useful CSS3 Tutorials from Speckyboy Design Magazine.

HTML5 Doctor blog.

12 Resources for Getting a Jump on HTML 5 from Cameron Moll.

23 Essential HTML 5 Resources from Carsonified’s Think Vitamin blog.

英文原稿:  70 Must-Have CSS3 and HTML5 Tutorials and Resources | WebAppers