团队博客

我们提供高品质,符合标准和优化的XHTML/CSS

30个CSS3新功能的实用教程

CSS3 ,许多令人振奋的功能将得到实现。 CSS3具有更大的灵活性,并使它更容易地实现复杂的应用。许多省时省力的规则正在为CSS3而制订 :文字阴影,盒大小,不透明度,多背景,边框半径,边框图像,多栏布局等…

虽然目前只有最先进的浏览器支持的这些效果,但它仍然很有趣!

在此之后,我们将看看一些有趣的CSS3特性 ,今天您就可以在自己的网站上付诸实践。

CSS3 Color Module

CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL , CMYK ,HSLA and RGBA. 。这篇文章详细介绍如何在CSS3中使用这些颜色。
10col

Gradient Borders

允许使用渐变边框 -moz-border-radius / -webkit-border.
01gb

Border Image

正常的CSS边框有时候是不够的。如果需要实用CSS图像边框,CSS3通过支过border-image and border-corner-image 来实现。
02bi

Rounded Corner Boxes

Andy budd告诉我们如何轻松地创建圆角边框border-radius and background position.
03rc

Box Shadow

CSS3的 box-shadow 允许我们添加阴影效果,而不必在特定的元素上实用图像. 目前只有Safari 3+ and Firefox 3.1 (Alpha) 支持box-shadow.
04bxs

Multiple background Images

如果你想添加多个背景在一个盒子或一个段落, CSS3允许在一个元素上使用多个背景图像。
05mbg

Multiple Columns

CSS3模块允许建立多栏文本而不需要表格 -moz-column-count and -moz-column-width. 如果你的网页上文字过长,这是一个很实用的CSS属性
06cssc

Text Shadow

文本限影text-shadow 属性允许添加阴影到文字上的每个字母。另外, text-shadow 不是CSS3新有的属性,最初出现在CSS2,但在CSS2.1后移除。
07txts

Box-sizing and Box-model

box-sizing可让您指定的行为,浏览器在计算宽度的一个元素和控制改变盒子大小
08bsm

CSS3 Opacity

虽然,不透明的CSS属性已经有一段时间,当CSS3推出将有更多使用不透明属性。您可以为盒子,图片和文字使用不透明属性设置。
09opa

CSS3 Selectors

CSS3的属性选择器大全
CSS3 Slectors

Brilliant implementations of CSS3 Properties

Awesome Buttons with CSS3 and RGBA

也许您不会相信,这些按钮只使用了CSS3的属性,而且没有用到任何图像。
11cssbut

Render User Interface Using CSS3

这是CSS3一个创造性的例子 。有模拟的OSX版的用户界面使用CSS3 。点击图片以查看工作演示。
12uint

CSS3 Template Layout with jQuery Plugin

此插件允许网页设计师用jQuery实现W3’s CSS 模板布局
14cjl
View Demo

Using CSS3 RGBA for Transparency

如果您想知道如何实现透明方块的24种方法,本文讨论RGBA让您指定颜色为半透明和如何使用它。
17tran

Custom Font with CSS3

虽然有其它方式 嵌入字体,但使用CSS3自定义的字体将容易得多。
18font

Creating a Polaroid Photo Viewer with CSS3 and jQuery

网页设计师Marco Kuiper如何使用CSS3和jQuery创建华丽的画廊。
19cpg
View Demo

Example and Use of Box Sizing

讨论如何使用CSS3的 box sizing。
20bx

CSS3 Corporate Fun

这个菜单模仿推悬停按钮使用的CSS选择符。
21cm

CSS3 Links Creation and Usage

CSS3的伪类

Tooltip with CSS3

使用:before (or :after) pseudo element:hover pseudo class.创建一个提示
tooltip
View Demo

Styling Forms with Attribute Selectors

如何使用Web表单样式属性选择符
CSS3 form

CSS Opacity

多种使用CSS透明度的方法。
CSS3 Opacity

Using CSS3 Selectors to Apply Link Icon

使用CSS3选择器添加一个图标在链接旁边。

Simple CSS3 rounded Corners with Support for IE

CSS3圆角边框,兼容IE浏览器(IE下使用图片)
CSS3 IE Rounded Corner
View Demo

The Shadow Effect in CSS3

CSS3 属性-webkit-box-shadow在任何特殊DIV上创建阴影. 此DEMO只支持Safari.
CSS3 Shadow
View Demo

Must Read CSS3 Related Articles :

Six Questions: Eric Meyer on CSS3

CSS3 Question

5 Techniques to Acquaint You With CSS3

Nettus CSS3

Push Your Web Design Into The Future With CSS3

Sm CSS3

原文地址:http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html

您的评论,是我们最大的鼓励(3 条评论

  1. Sheen 说:

    点解D连接会坏左

  2. Pingback 引用通告: 30个精彩的 CSS 导航设计 « SonicHTML – 高品质 HTML+CSS 服务

  3. Pingback 引用通告: 30个精彩的 CSS 导航设计 » WhyJQuery

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

关于本站

专注于 HTML/CSS WordPress jQuery 并提供PSD转HTML外包服务

Q Q:576052953点击这里给我发消息

E-mail:sonichtml@gmail.com