html表单css设计_使用CSS 3设计更漂亮的Web表单

html表单css设计

得益于高级CSS属性（例如渐变和阴影），现在可以轻松地将枯燥的Web表单转换为精美的东西，而无需花费很多精力。 我将在今天的教程中向您展示！

本教程包括Tuts + Premium成员可用的截屏视频。

细微的背景渐变为字段增添了深度，而阴影则将其从页面上抬起。 更令人印象深刻的是，此操作完全没有任何图像。

通过遵循本教程，您不仅可以得到一个轻巧美观的表格，还可以学习和理解CSS3的新技术，例如盒影 ， 渐变 ， 不透明的颜色和圆角 。

---

CSS3？

CSS3是当前正在开发的下一代CSS，但这不会阻止浏览器已经实现许多重要功能。

• 谷歌浏览器 （4.0）
• Mozilla Firefox （3.6）
• Safari （4.0）

Opera在下一个版本（ 10.50 Beta ）中对CSS3（背景渐变除外）提供了更高级别的支持。

Internet Explorer还表示，他们将在版本9中改进CSS3支持。 但是，只有时间才能证明这是多么的真实。

您可以使用CSS3进行的操作（阴影，渐变，圆角，动画等）都旨在创建精美的效果，而无需集成图像或脚本，从而缩短了加载时间。

---

步骤1：HTML

在开始样式设计之前，需要先进行样式设计，所以这里是表格。

<form class="form"> 
  
	<p class="name"> 
		<input type="text" name="name" id="name" /> 
		<label for="name">Name</label> 
	</p> 
  
	<p class="email"> 
		<input type="text" name="email" id="email" /> 
		<label for="email">E-mail</label> 
	</p> 
  
	<p class="web"> 
		<input type="text" name="web" id="web" /> 
		<label for="web">Website</label> 
	</p> 
  
	<p class="text"> 
		<textarea name="text"></textarea> 
	</p> 
  
	<p class="submit"> 
		<input type="submit" value="Send" /> 
	</p> 
  
</form>

每个字段都在具有其自己的类的段落内，并且前三个字段具有说明其用法的标签。

没有任何样式的外观如何？

名称

电子邮件

网站

功能齐全，但乏味。 让我们开始整理这个表格。

---

全屏播

---

步骤2：基本样式

在深入探讨CSS3技术之前，我们需要为尚不支持CSS3的浏览器创建基本布局。

input, textarea { 
	padding: 9px; 
	border: solid 1px #E5E5E5; 
	outline: 0; 
	font: normal 13px/100% Verdana, Tahoma, sans-serif; 
	width: 200px; 
	background: #FFFFFF; 
	} 
  
textarea { 
	width: 400px; 
	max-width: 400px; 
	height: 150px; 
	line-height: 150%; 
	} 
  
input:hover, textarea:hover, 
input:focus, textarea:focus { 
	border-color: #C9C9C9; 
	} 
  
.form label { 
	margin-left: 10px; 
	color: #999999; 
	} 
  
.submit input { 
	width: auto; 
	padding: 9px 15px; 
	background: #617798; 
	border: 0; 
	font-size: 14px; 
	color: #FFFFFF; 
	}

到目前为止，我们的工作情况如何？

还不错 现在，让我们从更高级CSS3开始我们的增强功能。

---

步骤3：框影

Box-shadow的作用完全一样：在框周围创建阴影。

box-shadow的语法非常简单：

box-shadow: <color> <horizontal offset> <vertical offset> <blur>;

水平偏移是阴影从左到右的位置。 如果将其设置为“ 2px”，则阴影将在右侧2个像素处。 垂直偏移相同，但向上/向下。

模糊只是阴影将具有的模糊量，其中0最小。

这就是我们的盒子阴影的样子：

input, textarea { 
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	}

在这里，我们有三行看起来相似。

• box-shadow是纯CSS3，到目前为止仅在Opera中使用。
• -webkit-box-shadow适用于使用Webkit引擎的浏览器，例如Chrome和Safari。
• -moz-box-shadow适用于使用Mozilla的Gecko引擎的浏览器，例如Firefox，Camino，Flock和SeaMonkey。

在CSS3成为标准之前，您必须使用所有三种方法。 Internet Explorer有其自己的奇怪处理方式，尽管它能够产生阴影，但它看起来并不像我们想要的那样。 3

您可能会注意到没有使用正常的RGB颜色，这是因为我们在同一行上使用了两种CSS3技术： box-shadow和rgba 。

简而言之，RGBA（红色绿色蓝色Alpha）是具有不透明性的颜色。

rgba的语法是这样的：

rgba(<red>,<green>,<blue>,<opacity>);

将浅灰色用作阴影的颜色是完全可以的，但是如果使用的是除白色以外的任何其他背景，则看起来会很奇怪。 另一方面，无论背景如何，不透明的黑色效果都很好。

因此，我们的盒子阴影是黑色的，不透明度为10％（0.1），没有水平和垂直偏移，并且模糊了8个像素。 它看起来像这样：

这里的关键字很微妙 。 如果我们施加过多的阴影，它将看起来很丑。 如果我们使用的太少，它不会起作用。 基本上，我们不希望任何人注意到阴影，但是仍然可以使阴影从页面中移出。

---

步骤4：背景渐变

虽然盒阴影法很容易掌握，但渐变却比较棘手。 使用CSS3渐变，您可以创建一些惊人的形状- 从Dart板到彩虹 -可以想象它具有更复杂的语法。 值得庆幸的是，我们今天不需要编写彩虹。 我们只需要一个直线线性渐变。

Webkit的语法：

-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>) )

壁虎的语法：

-moz-linear-gradient(<start> <angle>, <color>, <color>)

如您所见，方法是完全不同的，因此这需要一些解释。

Webkit渐变需要起点（X和Y），终点（X和Y），原色和原色。 角度由起点和终点的位置确定，渐变将使用“从（颜色）”渐变为“到（颜色）”进行着色。

另一方面， 壁虎渐变仅需要起点（Y），并且至少需要两种颜色。 如果您想要一个从上到下（90度）的渐变，则无需指定角度。

因此，要获得从上到下（从黑到白）的简单线性渐变，我们会这样做：

background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF)); 
background: -moz-linear-gradient(top, #000000, #FFFFFF);

它看起来像这样：

（我将继续使用黑色进行演示；最后，我将切换到将用于表单的真实颜色。）

现在我们已经掌握了基础知识，我们可以开始使表单看起来像我们想要的那样。 我们要做的第一件事是限制渐变的高度，以使它在输入字段和文本区域中看起来都一样。 否则，渐变将填充整个高度，如下所示：

这是我们在Webkit和Firefox中将背景渐变限制为25px的方式：

input, textarea { 
	background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF)); 
	background: -moz-linear-gradient(top, #000000, #FFFFFF 25px); 
	}

对于Webkit，我们将其设置为“ left 25”，而不是将端点设置为“ left bottom”，这表明它将从顶部开始25像素。

对于Gecko，我们只需在最终颜色上添加一个“ 25px”值即可完成相同的操作。

结果是：

我们要做的第二件事是在渐变的顶部创建一条细的白线，以给人一种微妙的视觉印象，即场被抬起了。 一个像素能有多重要？ 看一下这篇文章： 使用Pixel Perfect Line Work添加深度 。

为此，我们需要渐变中的三个点。 在前面的示例中，我们的渐变具有两个点：顶部和底部（黑色→白色）。 在这里，我们将在它们之间添加一个附加点（白色→黑色→白色）。

为了显示：

我们如何做到这一点？

input, textarea { 
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #000000), to(#FFFFFF)); 
	background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px); 
	}

在Webkit中，我们使用色彩停止功能，但不幸的是，它不支持像素值，仅支持百分比。 但是由于感谢学校里的数学，我们认为25px中的4％是1px。

对于Gecko，我们只需在前两个颜色之间添加第三个颜色，并为其指定一个“ 1px”值，表明该颜色应从顶部结束1个像素。

细白线：

现在，让我们将黑色（＃000000）更改为更合适的浅灰色（#EEEEEE）：

仅剩下一些小细节工作。

首先，当用户悬停或选择它时，我们将为这些字段创建一个较暗的阴影：

input:hover, textarea:hover, 
input:focus, textarea:focus { 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
	}

从10％增加到15％，但是我们追求的仍然是微妙。

我们要做的最后一件事是为button3创建一些圆角，以使其在其他元素中脱颖而出：

.submit input { 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	}

该值是圆角将被倒圆的半径。 由于Opera似乎有一些问题，因此故意省略了标准边界半径。

结果：

---

步骤5：其他浏览器

现在，我们只需要照顾尚不支持CSS3（IE）或仅部分支持（Opera）的浏览器。

我们希望不同的版本（CSS3和普通版本）看起来尽可能相似，而最简单的方法是回到旧的方式：图像。

只需为漂亮CSS3表格截图，然后将一小部分渐变保存为图像即可。

接下来，在输入和文本区域中将其用作背景。 只要CSS3渐变出现在背景图片之后，支持CSS3的浏览器就会忽略该图片。

input, textarea { 
	background: #FFFFFF url('bg_form.png') left top repeat-x; 
	}

现在我们完成了！ 享受你的形式，希望你学到了一些东西。

---

最终预览

Chrome（4.0），Firefox（3.6），Safari（4.0）：

歌剧（10.50b）：

Internet Explorer（8）：

---

全CSS

input, textarea { 
	padding: 9px; 
	border: solid 1px #E5E5E5; 
	outline: 0; 
	font: normal 13px/100% Verdana, Tahoma, sans-serif; 
	width: 200px; 
	background: #FFFFFF url('bg_form.png') left top repeat-x; 
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
	} 
  
textarea { 
	width: 400px; 
	max-width: 400px; 
	height: 150px; 
	line-height: 150%; 
	} 
  
input:hover, textarea:hover, 
input:focus, textarea:focus { 
	border-color: #C9C9C9; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
	} 
  
.form label { 
	margin-left: 10px; 
	color: #999999; 
	} 
  
.submit input { 
	width: auto; 
	padding: 9px 15px; 
	background: #617798; 
	border: 0; 
	font-size: 14px; 
	color: #FFFFFF; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	}

---

结论

这里的所有都是它的！ 通过最小的努力和CSS 3的强大功能，我们将平淡无奇的普通形式变成了精美的东西。 非常感谢您的阅读，并随时在下面提出任何问题。

翻译自: https://code.tutsplus.com/tutorials/design-a-prettier-web-form-with-css-3--net-9542

html表单css设计