CSS3实用指南 初读笔记

1.7.1  浏览器前缀

当一个浏览器实现了一个新的属性、值或者选择器，而这个特性还不是处于候选推荐标准状态的时候，在属性前面会添加一个前缀以便于它的渲染引擎识别。

CSS属性的浏览器前缀：

　　    前缀             渲染引擎            使用该引擎的浏览器

  • -khtml-         KHTML               konqueror
  • -ms-             Trident               Internet
  • -moz-           Mozilla                Firefox、Camino、Flock
  • -o-                Presto                Opera、Opera Mobile、Opera Mini、Nintendo Wii
  • -webkit-        Webkit                Safari、Safari on iOS、Chrome、Android

 

使用浏览器前缀属性的时候，应该总是包含无前缀的属性并将它放在最后。这就可以确保当前浏览器可以支持无前缀的属性时，这个属性就能够生效。前缀属性因为位置靠前从而会被靠后的无前缀属性所重载，这才是正确的行为。

 

使用Modernizr检测CSS3支持

使用JavaScript模拟CSS3

 在html标签上添加IE版本类

<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en" class="ie6"><![endif]-->
<!--[if lt IE7]><html lang="en"><![endif]-->
<!--[if !IE]>--><html lang="en"><!--<![endif]-->

 放在html标签上的原因是: html标签不会阻塞IE8下面的样式表的并行下载。

 

2.2  包裹长文本

word-wrap属性控制着文本是否可在词内断开（与text-wrap属性不同，它控制着词间如何折行）。word-wrap属性的取值可以是normal（默认值）或break-word.

除了强制断开过长URL的需求，你还可以将word-wrap应用在如下场景中：

  • 防止数据表格因为过宽而溢出或破坏布局。
  • 使pre标签里的代码片段折行显示。

 

2.3.1 圆角的实现

border-radius是实现圆角的W3C标准语法，它指定所有四个圆角的半径是20像素，该语法目前可被Opera、Chrome、Safari 5 和 IE 9 支持。Firefox和Safari 4及之前的版本则分别使用-moz-border-radius和-webkit-border-radius属性。

除了气泡对话框之外，你还可以将border-radius用于如下场景：

  • 按钮（button）
  • 标签栏（tab）
  • 对话框（Dialog box）
  • 圆形标记（Circular badge）
  • 柱状图（Bar chart）
  • 表情图（Smiley face）

 

2.3.2 增加气泡的尾巴

1. 利用边框做出三角形：将一个元素的width和height设置为0，然后为它设置较粗的边框，并将其中三个边框的颜色设为透明。

2. 生成尾巴：content="" + ::before/after + position: relative && absolute + top/right/bottom/left 

 

2.3.3 利用RGBA或HSLA实现半透明背景

一个增加层次感的好方法是使背景变成半透明。通过显露一点页面背景的方式，你就能使界面显得更有层次，仿佛半透明的元素是悬浮于背景之上。我认为这种效果与气泡对话框非常相衬，因为"气泡"总是轻飘飘的。

HSLA代表“色调、饱和度、亮度和Alpha透明度”（Hue-Saturation-Lightness-Alpha）;

甜甜圈取色器[ http://www.workwithcolor.com/hsl-color-picker-01.htm ] ；

HSLA关键的8个色调值：

  • 0或360 = 红色 (red)
  • 30 = 橙色 (orange)
  • 60 = 黄色 (yellow)
  • 120 = 绿色 (green)
  • 180 = 青色 (cyan)
  • 240 = 蓝色 (blue)
  • 270 = 紫色 (purple)
  • 300 = 紫红色 (magenta)

得到你想要的色调值之后，如果想让它浓一点或淡一点就调整饱和度，想让它更暗一些或亮一些就调亮度。获取同色系的不同颜色或是对颜色进行微调是很简单的。

opacity属性的作用是使整个元素都半透明，包括前景内容，而不仅仅是背景。

 

2.3.4 无图实现色彩渐变

给气泡对话框的背景增加一些渐变效果可进一步增强它的圆润感和立体感。

1. Firefox及W3C的语法

background-image: -moz-linear-gradient(
    hsla(0, 0%, 100%, .6),
    hsla(0, 0%, 100%, 0) 30px
);

函数里我们指定了渐变的起始色(hsla(0, 0%, 100%, .6))、终止色(hsla(0, 0%, 100%, 0))和终止色的位置(30px)。由于并未指定渐变的起始点及其角度，Firefox将会使用默认值，即从顶部开始垂直向下进行渐变。

这里，我没有增加-moz-前缀，也能够在我的chrome浏览器上显示正常的结果。

2. Webkit的语法

background-image: -webkit-gradient(linear,
                 0 0, 0 30,
                 from(hsla(0, 0%, 100%, .6)),
                 to(hsla(0, 0%, 100%, 0))
);

要使用Webkit的语法来实现渐变，首先得指定渐变的类型是线性还是径向，并将其作为参数传入-webkit-gradient函数使用，而不是使用linear-gradient和radial-gradient这两个独立的函数。

然后需要指定水平和垂直两个方向上的起始点位置，紧接着是终止点的位置。它的值可以是关键字(如top或left)、百分数或像素值。

指定了起始点和终止点之后，我们还需要指定起始色和终止色。和Firefox的语法一样，你可以使用任意颜色格式，但需要注意的是必须把每个颜色包裹在from()和to()里。

 

 

 

 

除了用CSS3渐变来实现高光效果外，你还可以将它用于如下场景：

  • 使某些物体的表面看起来像按钮一样呈现弧面。
  • 使一些东西看起来更有光泽，像是金属、玻璃或是CD。
  • 实现倒影效果。
  • 实现光晕（Vignette）效果，使图片或盒容器的边缘像旧照片似的逐渐变暗。
  • 为背景图层添加一个渐变来实现淡入淡出效果。
  • 等高多列布局。

 

2.3.5 无图实现盒状阴影

在CSS3里，使用box-shadow属性实现盒容器的阴影。在该属性中，你需要设置阴影相对于盒容器水平及垂直方向上的偏移值、阴影的颜色，还可以选择性地设置模糊半径（Blur Radius）和扩展半径（Spread Radius）。

-webkit-box-shadow: 1px 1px 2px hsla(0, 0%, 0%, .3);  
-moz-box-shadow: 1px 1px 2px hsla(0, 0%, 0%, .3);
box-shadow: 1px 1px 2px hsla(0, 0%, 0%, .3);

每个属性的第一个1px表示相对于盒容器的水平偏移，它告诉浏览器将阴影从盒容器的边界向右移动1像素。第二个值1px则是垂直偏移，它将阴影向下移动1像素。你可以使用负值来使阴影向左和向上移动。

第三个值2px表示模糊半径，它指定有多少像素的阴影将被拉伸。一个很大的值将使阴影更模糊更朦胧，而取值为0将使它有锐利的边界。

第四个值是阴影的颜色，在本例中是拥有30%不透明度的黑色。

 

除了为盒容器实现基本的阴影之外，你还可以将它用于下列场景：

  • 发光效果（不设置位置偏移，并可以选择性地设置一个正数值的扩展半径）。
  • 3D效果的按钮。
  • 为盒容器模拟多层边框（使用多组box-shadows值，并将模糊半径均设为0以使阴影有清晰的边界）。
  • 模拟渐变效果（使用box-shadow的inset关键词来实现内阴影）。

 

2.3.6 无图实现文字阴影

text-shadow属性需要设置阴影的颜色以及它在水平和垂直两个方向上的位置偏移。还可以设置模糊半径，留空则取默认值0；

 

除了用text-shadow为文本实现基本的阴影之外，还可以将它用于如下场景：

  • 发光文字。
  • 凸版，镌刻，镂空或浮雕效果的文字（在一边使用淡色阴影，在另一边则使用深色阴影）。
  • 火焰文字（层叠使用黄色、橙色和红色阴影）。
  • 模糊文字（使用与文字相同颜色的阴影，或干脆使用透明文字）。
  • 将文字层叠形成3D效果（使用多层阴影实现）。

 

2.4.1 什么是“变形”

变形是一些效果的集合，每个效果都被称作变形函数（Transform Function），他们可以操纵盒容器发生旋转、缩放和倾斜等变化；

变形函数有很多：

  • translate在指定X和Y坐标后，能将物体移动到新的位置。取正值是向右、下方移动；反之，取负值则向左、上方移动。
  • scale能将物体缩放X倍。指定负数值将使物体发生翻转。要使物体变小，请取0至1之间的小数。如果你指定了一对用逗号分隔开来的数，那么前一个数就是横轴的缩放值，而后一个则用来在纵轴上进行缩放。
  • rotate可将物体旋转X角度（单位是deg）。正数值按顺时针方向旋转；负数值则按逆时针旋转。
  • skew能使物体按X角度发生倾斜（单位也是deg）。用逗号分隔的前后两个值分别控制横轴或纵轴的倾斜度，如果仅使用一个值，那么默认纵轴的倾斜度为0；

你可以在同一个transform属性中使用多个变形函数，并用空格将它们分隔开，变形将按你书写的顺序进行。

你还可以用transform-origin属性来指定变形发生的原点，取值可以是关键词、数值或百分数。默认值是center。

posted @ 2015-04-13 12:40  林大勇  阅读(353)  评论(0)  编辑  收藏  举报