CSS3 ,许多令人振奋的功能将得到实现。 CSS3具有更大的灵活性,并使它更容易地实现复杂的应用。许多省时省力的规则正在为CSS3而制订 :文字阴影,盒大小,不透明度,多背景,边框半径,边框图像,多栏布局等…
虽然目前只有最先进的浏览器支持的这些效果,但它仍然很有趣!
在此之后,我们将看看一些有趣的CSS3特性 ,今天您就可以在自己的网站上付诸实践。
CSS3 Color Module
CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL , CMYK ,HSLA and RGBA. 。这篇文章详细介绍如何在CSS3中使用这些颜色。
Gradient Borders
允许使用渐变边框 -moz-border-radius / -webkit-border.
Border Image
正常的CSS边框有时候是不够的。如果需要实用CSS图像边框,CSS3通过支过border-image and border-corner-image 来实现。
Rounded Corner Boxes
Andy budd告诉我们如何轻松地创建圆角边框border-radius and background position.
Box Shadow
CSS3的 box-shadow 允许我们添加阴影效果,而不必在特定的元素上实用图像. 目前只有Safari 3+ and Firefox 3.1 (Alpha) 支持box-shadow.
Multiple background Images
如果你想添加多个背景在一个盒子或一个段落, CSS3允许在一个元素上使用多个背景图像。
Multiple Columns
CSS3模块允许建立多栏文本而不需要表格 -moz-column-count and -moz-column-width. 如果你的网页上文字过长,这是一个很实用的CSS属性
Text Shadow
文本限影text-shadow 属性允许添加阴影到文字上的每个字母。另外, text-shadow 不是CSS3新有的属性,最初出现在CSS2,但在CSS2.1后移除。
Box-sizing and Box-model
box-sizing可让您指定的行为,浏览器在计算宽度的一个元素和控制改变盒子大小
CSS3 Opacity
虽然,不透明的CSS属性已经有一段时间,当CSS3推出将有更多使用不透明属性。您可以为盒子,图片和文字使用不透明属性设置。
CSS3 Selectors
Brilliant implementations of CSS3 Properties
Awesome Buttons with CSS3 and RGBA
也许您不会相信,这些按钮只使用了CSS3的属性,而且没有用到任何图像。
Render User Interface Using CSS3
这是CSS3一个创造性的例子 。有模拟的OSX版的用户界面使用CSS3 。点击图片以查看工作演示。
CSS3 Template Layout with jQuery Plugin
此插件允许网页设计师用jQuery实现W3’s CSS 模板布局
View Demo
Using CSS3 RGBA for Transparency
如果您想知道如何实现透明方块的24种方法,本文讨论RGBA让您指定颜色为半透明和如何使用它。
Custom Font with CSS3
虽然有其它方式 嵌入字体,但使用CSS3自定义的字体将容易得多。
Creating a Polaroid Photo Viewer with CSS3 and jQuery
网页设计师Marco Kuiper如何使用CSS3和jQuery创建华丽的画廊。
View Demo
Example and Use of Box Sizing
CSS3 Corporate Fun
CSS3 Links Creation and Usage
Tooltip with CSS3
使用:before (or :after) pseudo element和:hover pseudo class.创建一个提示
View Demo
Styling Forms with Attribute Selectors
CSS Opacity
Using CSS3 Selectors to Apply Link Icon
Simple CSS3 rounded Corners with Support for IE
CSS3圆角边框,兼容IE浏览器(IE下使用图片)
View Demo
The Shadow Effect in CSS3
CSS3 属性-webkit-box-shadow在任何特殊DIV上创建阴影. 此DEMO只支持Safari.
View Demo
Must Read CSS3 Related Articles :
Six Questions: Eric Meyer on CSS3
5 Techniques to Acquaint You With CSS3
Push Your Web Design Into The Future With CSS3
原文地址:http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html