CSS3 优点和网页页面设计方案师怎样应用CSS3技术

日期:2020-10-27 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

前些生活在SmashingMagazine看到1篇有关CSS3新技术应用非常好的文章内容,它详尽详细介绍了CSS3的新特点和它的应用方式,它包含:访问器特有特性、挑选器(特性挑选器、连标识符、伪类、伪元素)、RGBA和全透明度特性、多栏合理布局、多情况图、Word Wrap、文本黑影、CSS圆角、边框照片、盒黑影、盒规格、新闻媒体查寻、视频语音,并详尽表明了每一个新技术应用现阶段有哪些访问器适配。脚本制作之家本想将本文汉语翻译成汉语版和大伙儿共享,但发已经有国人进行汉语翻译,因此就偷个小懒,转载1下人家的汉语翻译,在此谢谢前端开发观查的博主艰辛汉语翻译本文,为大伙儿奉献了这般宝贵的学习培训材料。

假如你喜爱前端开发开发设计,你对CSS感兴趣爱好,那末你毫无疑问不能错过了这篇文章内容。

联级款式表在13年前被引进,并且被普遍应用的CSS 2.1 规范在11年前被建立,明显大家如今早已与当年相差千里了。非常伟大的是期内网站开发设计有了是多少发展——客观事实上,大家也没法想像。

为何会这样呢,当提到CSS的情况下,以往大家是这般的不甘愿和担心尝试?为何大家还要应用反感的hack和依靠JavaScript的技术性来写款式?为何大家不可以运用丰富多彩的CSS3 特点和当代访问器中能用的专用工具 并将大家的设计方案质量带到下1个级别?

是情况下在大家的新项目中引进CSS3 特点了,无需担心慢慢在大家的款式表格中添加css3特点和挑选器会出难题。让大家的顾客观念到CSS3的优点 (并且让旧访问器更快的消退)是大家有意义的事的事儿——大家应当这样做,非常是在它可以让网站更为灵便并降低开发设计和维护保养成本费的情况下。

在本文中,大家将科学研究CSS3的优点,并看1下1些网页页面设计方案师是怎样应用它们的。最终,大家将掌握到从CSS3中大家能获得甚么和大家怎样在大家的新项目中应用它的新特点。

应用访问器特有特性

以便应用绝大多数CSS3特点,大家迫不得已与原先的特性1起应用生产制造商特有拓展。缘故是直至如今,绝大多数访问器只适用一部分CSS3特性。并且悲剧的是,1些特性乃至到最终都可以能不被W3C强烈推荐,因此根据特定访问器特有特性,将她们与规范特性区别起来是很关键的(随后在她们是过剩的的情况下应用合乎规范的款式将之遮盖)。

自然,这类方式的缺点是,将致使1个杂乱无章的款式表和网站在访问器之间的主要表现不1致。终究,大家不想在大家的款式表格中拾起独享访问器hack的要求。Internet Explorer的灭绝人性的marquee、blink和其它标识在很多款式表格中被运用,并在20新世纪910时代变成1个传奇;它们仍然让现存的许多网站(在别的访问器中)主要表现不1致乃至无法阅读文章。而大家如今也不想将大家自身置于一样的处境,对吧?

但是,网站不必须在全部的访问器中看起来务必严苛的1致。有的情况下在某个访问器中应用独享特性来完成特殊的实际效果是可行的。

最多见的独享特性是用于Webkit关键访问器的(例如, Safari), 它们以-webkit-刚开始,和Gecko关键的访问器(例如, Firefox),以-moz-刚开始,也有Konqueror (-khtml-)、Opera (-o-) 和Internet Explorer (-ms-)都有它们自身的特性拓展(现阶段仅有IE8适用-ms-前缀)

做为技术专业的设计方案师,大家迫不得已留意:应用这些独享特性将让大家的款式表不可以根据认证。因此现阶段将她们放到最后版的款式中是罕见的。可是在某种状况下,例如实验或学习培训,大家最少能够考虑到将她们和规范的CSS特性1起写到1个款式表格中。

拓展阅读文章

  • Vendor-specific extensions and W3C
  • Vendor-specific extensions to CSS3
  • Vendor-specific properties

1. 挑选器

CSS挑选器是个无法相信地强劲的专用工具:它们容许大家在标识中特定特殊的HTML元素而无须应用过剩的class、 ID 或JavaScripts。并且它们中的绝大多数其实不是CSS3中新加上的,而是沒有被获得应有的普遍运用。假如你在尝试完成1个整洁的、轻量级的标识和 构造与主要表现更好的分离出来,高級挑选器是是非非常有效的。它们能够降低在标识中的class和ID的数量并让设计方案师更便捷的维护保养款式表。

特性挑选器

3个新的特性挑选器被加上到CSS3:

  • [att^="value"]
    配对包括以特殊的值开始的特性的元素
  • [att$="value"]
    配对包括以特殊的值末尾的特性的元素
  • [att*="value"]
    配对包括含有特殊的值的特性的元素

值的特性的元素

tweetCC 应用1个特性挑选器来特定有title特性并以标识符“tweetCC”末尾的连接:

1
2
3
4
5
6
7
8
9
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: ⑼999px;
}

访问器适用:仅有IE6不适用CSS的特性挑选器。IE7和IE8、Opera、Webkit关键和Gecko关键的访问器都适用。因此在你的款式中应用特性挑选器是较为安全性的。

连标识符

CSS3中唯1新引进的连标识符是通用性的弟兄挑选器(同级)。它对于1个元素的有同1个父级连接点的全部弟兄级別元素。

例如,给某个特殊的div的同级的照片加上1个灰色的边框(div和照片应当有同1个父级连接点),在款式表格中界定下面的款式就充足了:

1
2
3
div~img {
    border: 1px solid #ccc;
}

访问器适用:全部的关键访问器都适用这个通用性的弟兄挑选器除大家最爱的IE6

伪类

也许在CSS3中提升数最多的便是新的伪类了,这里是1些最趣味和最有效的:

  • :nth-child(n)
    让你根据元素在父连接点的子元素的目录部位来特定元素。你能够是用数据、数据表述式或odd 和even 重要词(对斑马款式的目录很完善)。因此假如你想配对在第4个元素以后的1个3个元素的排序,你能够简易的这样应用:

     

    :nth-child(3n+4) { background-color: #ccc; }/*配对第4,7,10,13,16,19...个元素*/
  • :nth-last-child(n)
    与上个挑选器的观念一样,可是从后边配对元素(倒序),例如,以便特定1个div里边的最终两个段落,大家可使用下面的挑选器:

     

    div p:nth-last-child(-n+2)
  • :last-child
    配对1个父连接点下的最终1个子元素,等同于于:nth-last-child(1)
  • :checked
    配对挑选的元素,例如复选框
  • :empty
    配对空元素(沒有子元素)。
  • :not(s)
    配对全部不符特定申明(s)的元素。例如,假如你想让全部的沒有应用”lead”类的段落的显示信息为黑色,能够这样写:
    p:not([class*="lead"]) { color: black; }
    .

Andrea Gandino 在他的网站上应用:last-child 为挑选器特定每篇系统日志的最终1个段落,并将其的外间隔(margin)设定为0:

1
2
3
#primary .text p:last-child {
    margin: 0;
    }

访问器适用: Webkit关键和Opera 访问器适用全部新的CSS3 伪类,Firefox 2 和3 (Gecko关键) 只适用:not(s), :last-child, :o nly-child, :root, :empty, :target, :checked, :enabled 和:disabled,可是Firefox 3.5 将更为普遍的适用CSS3 挑选器。Trident关键访问器(Internet Explorer)客观事实上不适用这些伪挑选器。

伪元素

在CSS3中唯1引进的伪元素是::selection.它可让你特定被客户高亮度(选定)的元素。

访问器适用: 现阶段沒有任何1款Internet Explorer 或Firefox 访问器适用::selection 伪元素。Safari, Opera 和Chrome 均适用。

拓展阅读文章

  • Selectors Level 3: W3C Working Draft
  • CSS3: Attribute selectors: CSS3.info
  • Compatibility table: CSS3 Selectors
  • CSS selectors and pseudo selectors browser compatibility
  • CSS3 Attribute Selectors
  • ::selection
  • General Sibling Selector
  • CSS3 Pseudo-classes

2. RGBA和全透明度

RGBA 让你能够不仅设置颜色,还能设置元素的全透明度。1些访问器尚不适用它,因此最好是在RGBa前面设置其它访问器适用的沒有全透明的色调特性。


Tim Van Damme在连接的hover实际效果上应用了RGBA

在这个网站上,Tim Van Damme在电脑鼠标悬停实际效果上应用了RGBa;比如,在他的主页的network连接上:

1
2
3
4
#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }

当设置1个RGBA 颜色的情况下,大家务必先后设置红、蓝、和翠绿色的值,能够是0⑵55或百分数。全透明值应当在0.0到1.0之间,比如0.5 意味着50% 的全透明度。

RGBA 和opacity 之间的不一样是前者只会运用到特定的元素上,然后者会危害大家特定的元素及其子元素。

这里有个事例展现大家怎样给1个div加上80% 全透明:

1
2
3
div {
    opacity: 0.8;
    }

访问器适用: RGBA 被Webkit核心访问器适用。IE全部版本号都不适用。Firefox 2也不适用,可是Firefox 3 和Opera 9.5均适用。Opacity 被Opera、Webkit关键 和Gecko关键的访问器适用。IE全部版本号一样不适用。IE只适用自家的该死的滤镜(filter)

拓展阅读文章:

  • CSS Color Module Level 3: W3C Working Draft
  • RGBA colors: CSS3.info
  • RGBA color space
  • Is CSS3 RGBa ready to rock?
  • Super-Awesome Buttons with CSS3 and RGBA

3. 多栏合理布局

这是新的CSS3 挑选器可让你无需应用好几个div标识就可以完成多栏合理布局。访问器解释这个特性并转化成多栏,让文字完成1个仿报纸的多栏构造。


tweetCC 在其主页应用了CSS3 多栏挑选器

tweetCC 在其主页上把详细介绍文本显示信息为4栏。这4栏并不是波动的div;相反,设计方案师应用下面的CSS3 多栏合理布局:

1
2
3
4
5
6
.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
    }

大家能够根据这个挑选器界定3件事儿:栏数(column-coun)、栏宽(column-width、事例中沒有用到)和各栏之间的空白/间隔(column-gap)。 假如column-count未设置,访问器会在容许的宽度內容纳尽量多的栏目。

以便在各栏時间加上1个标值的隔开,大家可使用column-rule 特性,其作用和border 特性相近:

1
2
3
div {
    column-rule: 1px solid #00000;
    }

上面的这条特性,访问器中不容易看到任何实际效果,由于它沒有分栏,假如相互配合上面的事例便可以了。

有关特性: column-break-after, column-break-before, column-span, column-fill.

访问器适用: 多栏合理布局现阶段被Safari 3+,chrome,和Firefox 1.5+所适用。

拓展阅读文章:

  • CSS3 module: Multi-column layout: W3C Working Draft
  • Columns
  • CSS3 – Multi-Column Layout Demonstration
  • CSS3 Columns
  • Designing tweetCC
  • Introduction to CSS3 – Part 5: Multiple Columns

4. 多情况图

CSS3 容许你应用好几个特性例如background-image、background-repeat, background-size, background-position, background-originand background-clip等在1个元素上加上多层情况照片.

在1个元素上加上多情况的最简易的方式是应用简写编码,你能够特定上面的全部特性到1条申明中,只是最常见的還是image, position 和repeat:

1
2
3
4
5
div {
    background: url(example.jpg) top left no-repeat,
        url(example2.jpg) bottom left no-repeat,
        url(example3.jpg) center center repeat-y;
    }

第1个照片将是离客户“近期”的那个。

该特性的1个更繁杂的版本号能够是这样的:

1
2
3
4
5
div {
    background: url(example.jpg) top left (100% 2em) no-repeat,
        url(example2.jpg) bottom left (100% 2em) no-repeat,
        url(example3.jpg) center center (10em 10em) repeat-y;
    }

在这里,(100% 2em) 是background-size 的值;第1个情况照片可能出現在左上角并会被拉伸至该div的100%宽度和2em的高宽比。

由于仅有极少数的访问器适用它,又由于在网站上无法显示情况不利于网站的视觉效果实际效果,因此,这其实不是1个被普遍运用了的特性。虽然这般,它明显可以大大地提升设计方案师的工作中流并明显降低标识数量——相对用其它方法完成一样的实际效果。

访问器适用: 现阶段,多情况照片只在Safari/chrome 和Konqueror中合理

拓展阅读文章:

  • Layering multiple background images
  • Multiple backgrounds with CSS3 and CSS3.info
  • Introduction to CSS3, Part 6: Backgrounds

5. Word Wrap

word-wrap 特性用来避免过长的标识符串外溢的。能够用两个特性值normal 和break-word。normal 值(默认设置的) 只在容许的断点断开文本,如连标识符。假如应用了break-word ,文本能够在任何必须的地区断开以配对分派的室内空间并避免外溢。


WordPress 后台管理在数据信息表格中应用了word-wrap.

WordPress 的操纵面板中,word-wrap 特性被用于报表中的元素;例如在系统日志和网页页面的目录中:

1
2
3
.widefat * {
    word-wrap: break-word;
    }

访问器适用: word-wrap 被Internet Explorer 和Safari/chrome适用。Firefox 将在3.5版本号中适用它。

拓展阅读文章:

  • Force Wrapping: the ‘word-wrap’ property — CSS Text Level 3: W3C Working Draft
  • word-wrap: CSS3.info
  • CSS word-wrap
  • word-wrap: Mozilla Developer Center

6. 文本黑影

虽然在CSS2中就早已存在,text-shadow是1个未被普遍运用的CSS特性。可是它将在CSS3中被普遍选用。这个特性给设计方案师1个新的跨访问器的专用工具来为设计方案加上1个维度以使文本醒目。

虽然这样,你必须确定,你的设计方案中的文本是可读的,防止客户的访问器不适用CSS3高級特性。给文本和情况颜色充足的比照度防止text-shadow 特性不可以被访问器正确3D渲染或了解。


Beakapp 在它的网站中应用了text-shadow 特性:內容地区.

BeakApp.com 为內容地区应用了text-shadow 特性,为文本加上深层和维度 并让它变得醒目——而并不是应用某种照片更换技术性。该特性现阶段只在Safari和Chrome中能用。

该网站的主菜单应用的CSS以下:

1
2
3
.signup_area p {
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

这里大家应用黑影色调(应用了RGBA,前面有叙述), 随后是右(x 座标) 和底部(y 座标) 偏位,最终是模糊不清半径

假如要在1个文本上应用多黑影,可使用逗号分开。例如:

1
2
3
4
5
p {
    text-shadow: red 4px 4px 2px,
        yellow ⑷px ⑷px 2px,
        green ⑷px 4px 2px;
    }

访问器适用: Webkit关键访问器和Opera 9.5 适用text-shadow。Internet Explorer 不适用它,Firefox 将之际将发售的3.5版本号中适用。

拓展阅读文章:

  • Text Shadows: the ‘text-shadow’ property — W3C Working Draft
  • Text shadows: Web Style Sheets CSS tips and tricks
  • Text-shadow, Photoshop like effects using CSS — CSS3.info
  • Make Cool And Clever Text Effects With CSS Text-Shadow
  • Safari’s Text-Shadow Anti-Aliasing CSS Hack
  • text-shadow
  • text-shadow: Mozilla Developer Center

7. @font-face特性

虽然是最被希望的CSS3 特点 (乃至它在CSS2中就早已被引进了), @font-face在网站上依然沒有像其它CSS3特性那样被普遍选用.这关键由于字体样式受权和版权难题:嵌入的字体样式很非常容易从网站左右载到,这是字体样式厂商的关键顾忌。

虽然这般,受权我呢提貌似早已刚开始处理了。TypeKit 服务承诺将制订1个计划方案,以使设计方案师和字体样式厂商更非常容易的统1受权难题,这将明显的丰富网站制作中的排版并使@font-face 特性在具体工作中中能用。


Mozilla试验室JetPack 网站选用font-face标准来应用DroidSans 字体样式。

极少数应用该特性的网站之1是新上线的JetPack MozillaLabs.

1
2
3
4
@font-face{
    font-family: 'DroidSans';
    src: url('../fonts/DroidSans.ttf') format('truetype');
    }

要想在你的网站中应用嵌入字体样式,你务必单独的性命每一个款式(例如, normal, bolditalic)。请保证只应用被受权为应用到网站的字体样式并在必须的情况下给字体样式的设计方案师1些表扬。

在界定了@font-face 标准以后,你便可以用一般的font-family 特性来引入该字体样式了:

1
2
3
p {
    font-family: "DroidSans";
    }

假如1个访问器不适用@font-face,它将应用font-family(CSS 字体样式库)特性中特定的下1个字体样式。对适用的访问器来讲,假如@font-face 字体样式是1个奢华品(仅有极少数元素用到),这对1些网站是可行的;可是假如该字体样式在设计方案中占据1个关键的人物角色或是企业的视觉效果特点的1一部分,你便可能想应用其它的处理计划方案,例如sIFRCufón。虽然这般,请记牢,这些专用工具对题目或较短的文本更合适,拷贝和粘贴此类內容较为艰难并且对客户其实不友善。


在网站中应用此类字体样式并不是很好吗?Dave Shea 应用CufónMuseo Sans来做的试验。很好看!

访问器适用: @font-face 被Safari 3.1+和chrome适用。Internet Explorer 适用 字体样式。 Opera 10 和Firefox 3.5 可能适用它。 字体样式。 Opera 10 和Firefox 3.5 可能适用它。

拓展阅读文章:

  • Font Descriptions and @font-face — W3C Working Draft
  • Web fonts with @font-face
  • @font-face — Sitepoint
  • Fonts available for @font-face embedding
  • @font-face
  • beautiful fonts with @font-face
  • Introducing Typekit

8. 圆角(边框半径)

Border-radius 不用情况照片就可以给HTML元素加上圆角。如今,它将会是应用数最多的CSS3特性了,很简易的缘故是应用圆角较为好并且不容易对设计方案和能用性有矛盾。

不一样于加上Javascript或多于的HTML标识,仅仅必须加上1些CSS特性并从好的层面考虑到。这个计划方案是清楚的和较为合理的,并且可让你可免于花销几个小时来找寻精致的访问器计划方案和根据Javascript圆角。


Sam Brown的blog在题目、归类和连接处应用了border-radius.

Sam Brown在他的blog的题目、归类、连接和div广州中山大学量的应用了border-radius特性。应用照片来完成该实际效果可能较为费时间的,这是在新项目中应用CSS3特性是提升开发设计高效率的关键流程的缘故之1

以便给种别连接加上圆角,Sam 应用了下面的CSS片断:

1
2
3
4
5
6
h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    }

大家能够做的更进1步,加上初始的CSS3 特性和Konqueror 特性拓展,以下:

1
2
3
4
5
6
7
8
h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    }

假如大家想在大家的元素中的某个特殊的角上运用此特性,大家能够独立的特定每一个角:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    }

访问器适用: border-radius仅有全部版本号的IE访问器和Opera不适用,Webkit和Gecko关键的访问器都适用。

拓展阅读文章:

  • border-radius: W3C Working Draft
  • Border-radius: create rounded corners with CSS! — CSS3.info
  • Introduction to CSS3, Part 2: Borders
  • An Ode to border-radius
  • CSS3 Border-Radius and Rounded Corners

9. 边框照片

border-image 特性容许你在元素的边框上设置照片, 让你从一般的solid, dotted 和其它边框款式中释放出来。该特性给设计方案师1个更好的专用工具,用它能够便捷的界定设计方案元素的边框款式,比background-image 特性(对高級设计方案来讲) 或枯燥乏味的默认设置边框款式更功能强大。大家还可以确立的界定1个边框能够被怎样放缩或平铺。


SpoonGraphics blog为它的照片边框应用了border-image 特性。

SpoonGraphis blog中,border-image被用于照片边框,以下所示:

1
2
3
4
5
6
#content .post img {  
   border: 6px solid #f2e6d1;  
   -webkit-border-image: url(main-border.png) 6 repeat;  
   -moz-border-image: url(main-border.png) 6 repeat;  
   border-image: url(main-border.png) 6 repeat;  
   }

要想界定border-image,大家务必特定照片详细地址,照片的那一部分将被裁切并用于元素的每个旁边,和照片是不是被放缩或平铺。

以便制做1个应用下面的照片做为边框的div ,大家应当应用下面的编码(大家将为这个事例加上Opera 和Konqueror 适用):

1
2
3
4
5
6
7
8
div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
    }

该特性的最终1个值能够是stretch (默认设置), round (仅有1个平铺了整数金额倍的照片被填充在容许的地区) 或repeat。在大家的事例中,左右上下边框照片被拉伸。假如大家只想顶部和底部边框被拉伸,大家可使用下面的CSS:

1
2
3
4
div {  
   (...)  
   border-image: url(example.png) 18 25 25 18 stretch repeat;  
   }

大家能够能够独立的特定每个角,假如大家想为每个角应用不一样的照片:

1
2
3
4
5
6
7
8
9
10
div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
    }

假如访问器不适用border-image 特性,它将疏忽这些特性,并只运用界定的其它边框特性,例如border-width 和border-color.

访问器适用: border-image 现阶段仅有Webkit关键访问器适用。不太明确Firefox的下1个版本号是不是适用。

拓展阅读文章:

  • The ‘border-image’ property: W3C Working Draft
  • Border-image: using images for your border — CSS3.info
  • border-image in Firefox
  • border-image demonstration page
  • Replicating iPhone Buttons the “webkit” way!

10. 盒黑影

box-shadow 特性能够对HTML元素加上黑影 而无需附加的标识或情况照片。相近text-shadow 特性,它提高设计方案的细节;并且由于它不危害內容的可读性,随便他能够是提升那种附加觉得/实际效果的1种很好的方式。


10to1 为它的导航栏北京和hover情况应用了box-shadow 特性.10to1 为其导航栏地区提升的1个简易的黑影并将该特性运用于导航栏连接的hover实际效果:

 

1
2
3
4
5
6
7
8
9
#navigation {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    }
    #navigation li a:hover,
    #navigation li a:focus {
    -webkit-box-shadow: 0 0 5px #111;
    -moz-box-shadow: 0 0 5px #111;
    }

box-shadow特性能够用好几个值:水平偏位、竖直偏位、模糊不清半径、屈伸半径和黑影色调。水平静竖直偏位和黑影色应用的数最多。

在1个div上运用鲜红色黑影,右侧和下边偏位4px,无模糊不清,大家可使用下面的编码:

1
2
3
4
5
div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
    }

访问器适用: box-shadow现阶段仅有Webkit关键访问器适用,可是将要公布的Firefox 3.5 也将出示很好的适用。

拓展阅读文章:

  • The ‘box-shadow’ property — W3C Working Draft
  • Box-shadow, one of CSS3’s best new features — CSS3.info
  • Apple’s Navigation bar using only CSS
  • Box Shadow — Surfin’ Safari blog

11. 盒子尺寸

依据CSS 2.1 标准,在测算盒子的总尺寸的情况下,元素的边框和padding应当被添加到宽度和高宽比当中的。可是大家都知道,旧的访问器却以它们自身的十分有“艺术创意”的方法来解释这个标准。box-sizing特性容许你特定访问器怎样测算1个元素的宽度和高宽比。


WordPress 在操纵面板的全部的键入框元素中应用border-box 特性。

WordPress 后台管理地区在它的全部text种类的input标识和textarea标识上应用了该特性:

1
2
3
4
5
6
7
input[type="text"],
    textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    }

第3个特性(-ms-box-sizing) 仅有在Internet Explorer 8下合理。根据别的挑选器,WordPress 的款式表一样加上了Konqueror 特性: -khtml-box-sizing。

box-sizing 特性能够两个值中的1个:border-box 和content-box。 Content-box如CSS2.1中的界定的那样3D渲染宽度。Border-box 从设置的宽度和高宽比中扣减padding和边框(如旧式访问器那样。)。

访问器适用:box-sizing 被IE8、Opera、Gecko关键和Webkit关键访问器适用。

拓展阅读文章:

  • ‘box-sizing’ property: W3C Candidate Recommendation
  • Box-sizing, box-model fixes for the simple people: CSS3.info
  • CSS3 box-sizing attribute

12. 新闻媒体查寻

新闻媒体查寻(media queries)可让你为不一样的机器设备根据它们的工作能力界定不一样的款式。例如,在可视性地区小于480像素的情况下,你将会想让网站的侧栏显示信息在主內容的下边,这样它就不可该波动并显示信息在右边了:

1
2
3
4
5
6
7
8
9
10
11
#sidebar {
    float: right;
    display: inline; /* IE Double-Margin Bugfix */
    }

@media all and (max-width:480px) {
    #sidebar {
        float: none;
        clear: both;
        }
    }

你还可以特定应用虑色屏的机器设备:

1
2
3
4
5
6
7
8
9
a {
    color: grey;
}

@media screen and (color) {
    a {
        color: red;
        }
    }

发展潜力是无尽的。这个特性是很有效的由于你你不在必须务必为不一样的机器设备写单独的款式表了,并且你也不用应用JS来明确每一个客户的访问器的特性和作用。1个完成1个灵便的合理布局的更为时兴的根据Javascript的计划方案是应用智能化的流体合理布局,让合理布局针对客户的访问器辨别率更为灵便。

访问器适用: 新闻媒体查寻被根据webkit关键的访问器和Opera适用。Firefox将在3.5版本号中适用它。IE现阶段不适用这些特性并且在未来的版本号中,也沒有适用的方案。

拓展阅读文章:

  • 新闻媒体查寻: W3C 候选强烈推荐
  • 拓展到CSS 3 新闻媒体查寻
  • 新闻媒体查寻: CSS3.info
  • The bleeding edge of web: media queries
  • 安全性的新闻媒体查寻
  • 新闻媒体种类

13. 视频语音

CSS3的视频语音控制模块CSS3可让你为显示屏阅读文章者特定视频语音款式。你能够操纵视频语音的不一样设定,例如:

  • voice-volume
    应用从0到100的数据(0 即静音)、百分数或重要词(silent,x-soft,soft,medium,loud 和x-loud等)来设定声音。
  • voice-balance
    操纵来自哪一个声道(假如客户的音箱系统软件适用立体式声)。
  • Speak
    标示显示屏阅读文章器阅读文章有关的文本、数据或标点标记。能用的重要词为none, normal, spell-out, digits, literal-punctuation, no-punctuation 和inherit.
  • Pauses and rests
    在1个元素的被读完以前或以后设置中止或终止。你可使用時间企业(例如, “2s” 表明2 秒钟) 或重要词(none,x-weak, weak, medium, strong 和x-strong)。
  • Cues
    应用响声限定特殊元素并操纵器声音。
  • voice-family
    设置特殊的响声种类和响声生成(就像font-family)。
  • voice-rate
    操纵阅读文章的速率。能够设定为百分数或重要词: x-slow, slow,medium, fast 和x-fast.
  • voice-stress
    标示应当应用的任何重音(强语气),应用不一样的重要词: none, moderate,strong 和 reduced.

例如,告知显示屏阅读文章器应用男声载入全部的h2 标识,用左侧的喇叭,用软调依照特定的响声,能够像下面这样特定款式:

1
2
3
4
5
6
h2 {
    voice-family: female;
    voice-balance: left;
    voice-volume: soft;
    cue-after: url(sound.au);
    }

悲剧的是,这个特性如今仅有十分少的适用,可是明显值得关心由于大家能够在未来提升大家网站的易用性。

访问器适用: 如今,仅有Opera 访问器(Windows XP and 2000)适用视频语音控制模块的一部分特性。以便应用它们,必须应用-xv- 前缀,例如-xv-voice-balance: right。

拓展阅读文章:

  • CSS3 视频语音控制模块——W3C 工作中草案
  • CSS3 视频语音 — CSS3.info
  • 听觉系统CSS: 适用CSS 2 听觉系统款式表 / CSS 3 视频语音控制模块

末尾

CSS3 特性能够巨大的提升你的工作中流,让1些最耗时的CSS每日任务不费吹灰之力就可以搞定,而且可使用更好、更简约和更轻的编码标识。1些特性并未被普遍的适用,乃至是全新的访问器,但这其实不代表着大家不可以用它们开展实验或为应用优秀访问器的客户更高級的作用和CSS款式。

在这点儿上,请记牢,塑造大家的客户 也一样是有效和务必的:网站不用看起来在每一个访问器里都要维持1致,并且假如1个差别不(负面)危害艺术美学和网站的能用性,它就应当是被考虑到的。假如大家再次消耗很多的時间和钱财以使每一个细节肯定1致(而并不是选用更灵便的和将来导向性的计划方案), 客户将沒有升級她们的访问器的任何必须/动机,这样大家就迫不得已在旧的访问器变成老古董级访问器和强劲的当代访问器变成规范以前等候很长的時间

大家实验和应用新的CSS3特性越早,它们就被时兴的访问器适用的更早,大家也就可以够更早的普遍应用它们。

强烈推荐阅读文章及資源:

  • CSS3 Previews: CSS3.info
  • CSS 3: Exciting Function and Features: 30 Useful Tutorials
  • 5 CSS3 Techniques For Major Browsers using the Power of jQuery
  • Introduction to CSS3 – Part 1: What is it?
  • Comparison of layout engines (Cascading Style Sheets) and Wikipedia
  • Progressive enhancement
  • Five CSS design browser differences I can live with
  • Progressive Enhancement with CSS
  • CSS support in Opera 9.5

有关原作者

Inayaili de León是1个葡萄牙的网页页面设计方案师。她对网页页面设计方案和前端开发编号真的十分感兴趣爱好,并且喜爱好看和简约的网站。她定居在伦敦。你能够在Web Designer Notebook上看到她的更多文章内容,并follow her on Twitter.