- 5个你应当了解的CSS3新技术
- CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些 效果，但了解它们还是必须且很有趣味性的。暴风彬彬将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。1：基本标记在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。我们的xHTML需要一下div元素:#round, 使用CSS3代码实现圆角. #indie, 应用个别的几个圆角. #opacity, 展示新的CSS3实现不透明度的方式. #shadow,展示不使用Photoshop的情况下，使用CSS3来实现阴影效果. #resize, 展示如何使用某种CSS来实现重设大小的效果. 综上所述，我们的xHTML应该是这样的:
An Introduction to CSS3; A Nettuts Tutorial 下面来创建基本CSS文件:body {background-color: #fff;}#wrapper {width: 100%;height: 100%;}div {width: 300px;height: 300px;margin: 10px;float: left;}正如你上面看到的，我们给每个div元素300px的宽和高，并让它们向左浮动，整个页面的div都留给我们在后面的工作中添加样式。2:圆角目前而言，创建圆角的方法有很多，但都很麻烦。最常用的方法:首先，你要创建圆角的图片；然后，你要创建很多html元素并使用背景图像的方式显示圆角。具体流程你我都很清楚。这个问题将在CSS3中很简单的解决掉，那就是叫做“border-radius”的属性。我们先创建一个黑色的div元素并给他设置黑色的边框。边框就是要实现“border-radius”属性效果的前提。像这样:#round {background-color: #000;border: 1px solid #000;}现在你已经创建了div元素，它看起来和你预期的样子一样，300px款和高有楞有角且是黑色的。下面我们来添加实现圆角的代码，它是如此的简洁，仅仅需要两行代码。#round {background-color: #000;border: 1px solid #000;-moz-border-radius: 10px;-webkit-border-radius: 10px;}在这里，我们添加了两行类似的代码，-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrome浏览器。注:目前为止IE浏览器不支持border-radius属性，所以如果想让IE也有圆角效果，那么就要单独添加圆角了。border-radius这个属性直译过来是边框半径的意思，就如同Photoshop一样，它的值越大，圆角也就越大。3:个别的圆角如果按照过去的习惯做法，会浪费你很多时间，现在CSS3能快速解决!我们现在只想让div的右上和右下是圆角，那么仅需稍作修改:#indie {background-color: #000;border: 1px solid #000;-moz-border-radius-topright: 10px;-moz-border-radius-bottomright: 10px;-webkit-border-top-left-radius: 10px;-webkit-border-bottom-left-radius: 10px;}试想一下这种做法会用在网页中的什么元素呢？对！就是标签式的导航按钮！4:以CSS3的方式修改不透明度现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。这行代码很好记，仅仅是 “opacity: value;”:#opacity {background-color: #000;opacity: 0.3;}5:阴影效果实现阴影也有很多方法，最常用的就是使用Photoshop制作成阴影图片，然后应用到背景属性中。但CSS3让你的工作更有效率，不幸的是，目前只有Safari和Chrome支持这个新特性。仅仅需要一行代码，不过它有4个不同的值:-webkit-box-shadow: 3px 5px 10px #ccc;下 面我来解释一下这四个值都代表什么，第一个3px是指定阴影与div元素之间的水平(横向)距离，第二个5px指的是阴影与div之间的垂直(纵向)距 离，第三个10px指的是阴影的模糊度(类似于Photoshop中的羽化)，值越大越细腻。最后的值不说大家也知道，就是阴影的颜色。我们最终阴影效果代码；#shadow {background-color: #fff;border: 1px solid #000;-webkit-box-shadow: 3px 5px 10px #ccc;}正如你看到的，我们个这个div设置了白色的背景，黑色的边框和亮灰色的阴影。6:调整大小在最新版本的CSS中，调整元素的尺寸已经成为可能（不过目前?...
- 作者：佚名发表于：2009-12-09 查阅全文...
- CSS阴影详解
- 设计师常常使用一些独特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素具有立体的效果，从而被突出出来。比如对于文字阴影，传统的方法可能需要将文字切出来，直接使用图片，如果考虑SEO和网站性能，还可能会使用CSS Sprites等技术将图片整合：h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}h2#title1{background-position:0 -30px;}h2#title2{background-position:0 -60px;}.... 这是很棘手的事情，拼合图片会花掉你的大量时间，而且为了实现更好视觉效果，你可能还要使用高质量的32位png图片，这又要让你面对该死的IE 6的png透明问题！事实上，对于文字的阴影效果，我们完全可以用CSS来实现！可以查看 查看demo 先。Text-shadowtext-shadow可以让我们实现完美的文字阴影效果。基本写法：text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...或者text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...这里的颜色就是阴影的颜色，你可以将颜色写在前面，也可以写在最后。x轴和y轴分别是其阴影的偏移位置，模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影，你可以用逗号分开多组设置(当然也可以只是用单个设置)。示例：h1{color:#000; background:#333; font:bold 24px/2 "微软雅黑",Arial; text-indent:2em;text-shadow:black 2px 2px 2px; }效果如下图：该属性目前被除IE之外的大部分浏览器支持，对于IE，我们可以使用shadow滤镜来实现：filter: Shadow(Color='black', Direction='135', Strength='2')你可能已经注意到，使用shadow滤镜只能定义角度 direction，而不能定义xy轴，z轴也被换成了strength。注意，使用该滤镜的时候，不能够设置背景颜色，否则滤镜将无效！另外如果你的数学不是很好，不太懂三角函数的算法，你可以使用IE的另外一个滤镜：dropshadow：filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');好吧，IE总是会拖我们的后腿，不过值得一提的是，IE的这两个滤镜是支持多层阴影的！比如，可以这样写：filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');欲了解更多关于IE的这两个滤镜，请查看：Shadow 和 Dropshadow让我们看一个多层阴影的例子(这里无视了IE)：h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}效果如图：这里我们使用到了rgba色彩，它是一种在CSS中同时声明颜色及其透明度的一种方法，且被大多数A级浏览器支持的色彩属性（除了IE），了解更多请查看：《RGBa色彩的浏览器支持》——同时我们推荐对于纯色半透明的情况使用这种简单的写法。[Jumbot_PageBreak]text-shadow的浏览器兼容性目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari只有4.0才支持多层阴影。IE各个版本都不支持text-shadow； Opera 9.5+支持最多6-9层阴影，并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因，模糊半径被限制到100px； Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面)； Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 4.0+才支持多层阴影以及新的CSS3渲染顺序； box-shadow先来说IE，IE不支持box-shadow属性，但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说，IE并没有把文字阴影和盒子阴影区分！这就会出现一些问题：元素中的文字会继承元素的阴影设置。但是如果你不定义该元素的background和border，就只会出现文字阴影，如果只定义background属性而不定义border，就只会出现盒子阴影，文字不会出现阴影；而如果只定义了border属性而不定义background，就即会出现盒子阴影，内容文字及图片也会出现阴影。有兴趣的同学可以折腾一下。好了，现在让我们忘了IE，来看一看box-shadow。事实上，了解了text-shadow之后，box-shadow就很好理解了，目前只有firefox和safari/chrome通过私有属性支持box-shadow属性。而Opera浏览器虽然目前还不支持该属性，但是在其文档中提到下一个版本的引擎Presto 2.3（目前最新版的Opera 10.10的引擎是Presto 2.2.15）中将会支持 box-shadow，那就让我们慢慢等待吧。box-shadow的语法和text-shadow是一样的。#boxShadow{...-webkit-box-shadow:2px 2px 2px black;-moz-box-shadow:2px 2px 2px black;...}事实上，box-shadow和border-radius是很好的搭档：#boxShadow1{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:1p...
- 作者：佚名发表于：2009-12-09 查阅全文...
- 网页设计基础:Div+CSS布局入门教程（五）
- 这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在
中加入这么一段就可以了，你可以试试：大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：#banner { background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/ width:730px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:240px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both /*清除浮动*/}通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。 以上是页面主体部分，我们在css.css中添加以下样式：#pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*居中*/}#sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/}#mainbody { width:570px; text-align:left; float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden}为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码：border:1px solid #E00;height:200px保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该160+2(border)+570+2=734px，已经超出了父层的宽度，由于clear的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。而之后添加的overflow:hidden则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。... - 作者：佚名发表于：2009-12-04 查阅全文...
- 网页设计基础:Div+CSS布局入门教程（二）
- 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
无标题文档 ... - 作者：佚名发表于：2009-12-04 查阅全文...
- 网页设计基础:Div+CSS布局入门教程（一）
- 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。DIV结构如下：│body {} /*这是一个HTML元素，具体我就不说明了*/└#Container {} /*页面层容器*/├#Header {} /*页面头部*/├#PageBody {} /*页面主体*/│ ├#Sidebar {} /*侧边栏*/│ └#MainBody {} /*主体内容*/└#Footer {} /*页面底部*/至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 ...
- 作者：佚名发表于：2009-12-04 查阅全文...