CSS3渐变按钮

Posted on August 25, 2010 by H

上文介绍了CSS渐变的跨浏览器实现，本文将介绍CSS渐变的实际应用，点击查看一系列纯CSS制作的渐变按钮。这些按钮都是根据字体大小可伸缩的，可以通过改变padding和font-size来调整按钮大小。这种方法最大的好处是可以应用到任何HTML元素，如div、span、p、a、button、input等。

CSS3渐变、阴影按钮

这些按钮的特别之处

纯CSS:没有图片和Javascript
渐变跨浏览器支持(IE, Firefox 3.6, Chrome, and Safari)
三种按钮状态：正常，悬停，激活
可以应用在任何HTML元素：a、input、button、span、div、p、h3,等等
预留退路：如果用户代理不支持CSS 3，则显示没有渐变和阴影的普通按钮

不同浏览器下预览

下面的图片展示了按钮在不同浏览器中的显示效果。

CSS3按钮在不同浏览器下的显示效果

按钮状态

正常状态：有边框的渐变和阴影
鼠标悬停：比较暗的渐变
鼠标按下：翻转渐变，1xp下沉，更深的字体颜色

CSS3按钮状态

按钮样式

下面的代码是.button类的一般样式，padding和border-radius使用em单位，可以使按钮根据font-size伸缩。要调整按钮大小，改变border-radius、font-size、padding值即可。例如：可以痛缩小字号（font-size）和内边距（padding）创建稍小的按钮（查看演示）。

关于border-radius、text-shadow、box-shadow更多详情，请查看CSS 3 基础。

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

CCS3按钮通用样式

渐变色样式

下面是橙色按钮的样式代码。第一个背景设置是为不支持CSS 3的浏览器预留的退路，第二个针对Webkit浏览器，第三个针对Firefox，最后一个是仅能被IE识别的渐变滤镜。

关于CSS渐变的更多详情，请查看CSS渐变跨浏览器实现一文。

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

CSS按钮颜色样式

直接使用演示中的按钮

假设你想在你的网页中使用蓝色的按钮：

首先，查看演示页面源代码，拷贝.button、.blue样式；
然后，在想使用按钮的元素上添加class="button blue"(例如 Button），CSS类可以应用于任何元素。

使用演示中的按钮

CSS3基础

Posted on August 24, 2010 by H

本文介绍CSS 3部分新属性基础，包括RGBa、text-shadow、box-shadow、border-radius。这些属性通常用来增强网页布局和美誉度。（译者注：在支持CSS3的浏览器如Firefox、Safari、IE9等可点击图片查看演示。）

RGBa

前三个值是RGB色值，最后一个值是十进制的alpha不透明度值（0=透明，1=不透明）

CSS 3 RGBa实现半透明背景

RBGa可以用于任何更颜色相关的属性，例如字体颜色、边框颜色、背景颜色、阴影颜色等。

RGBa可以应用在所有颜色属性上

（译者注：RGBa与opacity的区别在于opacity除了对被背景生效之外，应用它的元素内容也会继承它，也就说内容也会和背景一样变透明，RGBa正是为了解决这个问题的设计的。）

Text Shadow

Text shadow由以下顺序构成：x-offset, y-offset, blur, and color，即垂直偏移、水平偏移、投影宽度（模糊半径）和颜色。

CSS 3 text-shadow属性详解

如果对水平偏移（x-offset）应用负值，阴影将出现在元素的右边；如果对垂直偏移（y-offset）应用负值，阴影将出现在元素顶部，可以在阴影颜色上使用RGBa。模糊半径的值越大，阴影越模糊，设置为0时，阴影最清晰。

在text-shadow颜色上使用RGBa

也可以指定一系列text-shadow值（用逗号分隔），下面的例子使用两个text-shadow实现文字凸起效果（上下各1px）。

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

text-shadow 文字凸起效果

Border Radius

border radius（圆角）的速记法和padding和margin属性类似（例如border-radius：20px），为使浏览器能识别圆角属性，需添加特定的前缀，如”-webkit-”针对webkit浏览器，”-moz-”针对Firefox。

CSS 3圆角

每个角都可以指定不同的宽度，注意每个角分开写时Webkit和Firefox的差异。

CSS 3圆角

Box Shadow

box-shadow的属性结构和text-shadow类似：x-offset, y-offset, blur, and color.

box-shadow属性详解

和text-shadow一样，可以设定多组值，下面的例子是三组box-shadow声明：

-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

CSS 3 box-shadow

CSS 3渐变跨浏览器实现

Posted on August 24, 2010 by H

CSS渐变大约两年被Webkit浏览器引进，但是由于和大多数浏览器不兼容而很少使用。现在Firefox 3.6+开始支持CSS渐变，我们可以用样式创建渐变而无须使用图片。本文将介绍如何使用CSS创建支持主流浏览器的渐变：IE, Firefox 3.6+, Safari, Chrome。

针对Webkit核心浏览器

下面的代码支持webkit核心的浏览器，如Safari、Chrome等，它将显示一个从顶部（#CCC）到底端(#000)的线性渐变。

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Webkit CSS 3渐变参数说明

针对Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

Firefox CSS渐变参数说明

针对Internet Explorer

下面的滤镜仅能被IE浏览器识别：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

IE渐变滤镜参数说明

CSS渐变跨浏览器显示(演示)

把下面的三行代码放在一起，将实现一个跨浏览器的渐变框。注意：最上面为不支持这个功能的浏览器添加了一个背景色。

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

CSS渐变跨浏览器实现

CSS渐变下拉菜单(演示)

下面是一个纯CSS渐变下拉菜单，使用CSS 3 text-shadow、radius-border、box-shadow，没有任何脚本和图片。

CSS3渐变圆角阴影下拉菜单

Internet Explorer Limitations

Internet Explorer渐变滤镜不支持颜色过渡点、渐变角度及放射状渐变，这意味着在IE中仅仅能使用初识、结束两个颜色实现水平或垂直的渐变。

善意提醒

请注意并不是所有浏览器都支持CSS渐变，为安全起见，不应该在编写布局代码的时候依赖CSS渐变。它仅用来增强布局。

译者注

各大浏览器CSS渐变支持官方文档：

Browser	Lowest version	Support of
Internet Explorer	5.5 (including 8.0)	`filter: progid:DXImageTransform.Microsoft.Gradient()` MSDN library, gradient filter
Firefox (Gecko)	3.6 (1.9.2)	`-moz-linear-gradient()`
Opera	—	—
Safari (WebKit)	4.0 (528)	`-webkit-gradient(linear,…)` Safari Reference Library, gradients

<section>不仅仅是“语义化的<div>”

Posted on August 16, 2010 by H

这几天捣鼓CSSPod的主题，顺便边学习边尝试试用HTML 5。在HTML 5引入的新元素中，显然<section>是比较难以理解的一个，至少对我来说是这样的，致使我使用<section>时诚惶诚恐，在查阅资料时看到了这篇文章，顺手翻译了一下，兴许能帮助初接触HTML 5的朋友解除一些疑惑。我的英文水平实在一般，个别地方只是按照我的理解来翻译，错误之处，望不吝赐教。

以下是原文及翻译：

HTML 5 introduces new elements like <section>, <article> and <footer> for structuring the content in your webpages. They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source. But if you just go through your document and blindly replace all the <div>s with <section>s you are doing it wrong.

HTML 5引进了诸如<section>、<article>、<footer>等新元素用来组织网页中的内容。它们可以用在当前使用<div>的许多情境中，以助提高HTML源代码的可读性、可维护性。但是如果只是盲目地用<section>替换掉网页中的<div>，那就错了。

This is not just semantic nit-picking, there is a practical reason to use these elements correctly.

这不只是挑剔其语义，有实际的理由去正确地使用这些元素。

In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free). So a document like the following:

HTML 5中有一个构造文档大纲的算法，可以被诸如AT（不知何意，屏幕阅读器一类？）用来帮助用户通览文档。<section>及其他的新元素是这个算法的重要组成部分。每嵌套一个<section>，大纲的深度就增加一级（如果你想把这种模型的优势和传统的<h1>-<h6>模型比较，想象一下一个基于Web的Feed阅读器通过组合在一起的内容整合网站的页面结构，在HTML 4中，这意味要解析所有的内容并重新把所有的标题重新编号；HTML 5则可以在恰当的文档层级结束标题。）比如下面这样的页面：

<body>
  <h1>This is the main header</h1>
  <section>
    <h1>This is a subheader</h1>
    <section>
      <h1>This is a subsubheader</h1>
    </section>
  </section>
  <section>
    <h1>This is a second subheader</h1>
  </section>
</body>

has an outline like:

有一个类似下面的大纲：

This is the main header
+--This is a subheader
    +--This is a subsubheader
+--This is a second subheader

If you just blindly convert all the <div>s on your pages to <sections> it’s pretty unlikely your page will have the outline you expected. And, apart from being a semantic faux-pas, this will confuse the hell out of people who rely on headings for navigation.

如果只是盲目地把所有的<div>换成<section>,你的页面不太可能解析成想要的大纲,而且不当的语义化嵌套，会让依赖标题导航的用户困惑。

Hopefully, in time, we will get tools that make this kind of mistake obvious and CSS support for selecting headings based on depth. Until then remember <section> is not just a semantic <div>

希望假以时日，我们会有避免这类错误的工具，并让CSS支持选择基于页面层级的标题。在此之前，请记住，<section>不仅仅是语义化的<div>。

CSSPod

关注web标准、前端技术

Category Archives: HTML&CSS