`
huobengluantiao8
  • 浏览: 1022054 次
文章分类
社区版块
存档分类
最新评论

使用HTML5和CSS3创建一个时髦的联系表单

 
阅读更多

遵循这个步骤,循序渐进的过程,完全摆脱了HTML5CSS3创建自己的时尚的接触形式。我们将用几个方便的新功能在HTML5添加很酷的功能,我们的形式,同时使用酷CSS3属性代码重新在我们的Photoshop概念纯粹。

查看HTML和CSS形式演示

设计,我们将建立功能丰富的接口的所有的东西,使梯度,突出和阴影!我们将首先在Photoshop创建一个可视化的概念,但是当它涉及到建筑形式,我们将重新HTML5和CSS3每效果。


PSD的概念

打开Photoshop,创建一个新的文档。添加暗淡蓝色渐变的背景,再画一个矩形的中心,包含形式。

使用Photoshop图层样式添加一个微妙的阴影,在30%左右的不透明度和使用一个非常浅灰色薄1px的中风。

添加标题的设计,使用深蓝色色板。通过调整阴影设置的插图效果,沿底边文本创建一个1px的浅灰色轮廓,美化这个文本。

每个标签上使用相同的字体造型,然后绘制一个圆角矩形与5PX圆角半径,以创建一个输入字段。添加柔软的内阴影,增加深度的设计。

复制的元素,奠定了一系列的输入字段,那么稍大的文本区域的形式。

修改输入字段的一个可视化领域将如何寻找在使用时。给它较轻的蓝色叠加起来的文字与插图的阴影风格。使用阴影的功能,所以影子出现的文本(不是内内阴影)以外。请记住,取消选中“使用全局光选项,所以-90度角也不会影响其他所有的梯度。

新增线路等领域内的文本代表占位符,但给他们一个深蓝色的填写,以降低对输入字段的对比。

绘制一个圆角矩形工具,并带有渐变的风格,薄1px的笔触和微妙的阴影较小的按钮形状。

现在是完整的视觉概念。作为背景图片,我们不会使用任何图形,但私营部门将重新CSS设计时得心应手十六进制颜色代码参考。

HTML5的结构

查看HTML代码

每一个web项目开始与HTML结构。在这里,我们将使用一些花哨的HTML5特性设计来调剂。奠定了一个DOCTYPE的基本文件和CSS样式表链接结构。房子内contaning格的联系方式,以便我们可以在演示中心。每个标签元素应该有一个属性,它涉及到每个ID输入字段-这提高了无障碍的形式,并允许用户点击标签激活正确的领域。一个新的HTML5功能,我们正在做的是使用占位符属性。只需输入你想要的信息,它会出现在每一个领域,当用户有重点,在这一领域的文本自动清零。此功能目前只支持Safari和Chrome,但很快就出现在Firefox4。

CSS样式

查看HTML代码

CSS样式表设置与复位,以消除任何浏览器默认的基本文件,然后身体是蓝色渐变,使用CSS3。目前不同的代码是必需的WebKit和Mozilla,但方便的CSS3的梯度发生器网站,有助于节省时间。
包含的div给出具体的尺寸和使用保证金:0汽车集中起来,然后从Photoshop中的阴影和中风被复制阴影边界
基本的CSS字体样式匹配文本的概念,然后对CSS3文字阴影属性复制底边加入1px的亮点插图的文字效果。

查看HTML代码

继续,标签元素都给予类似的造型,H1,然后输入元素样式与尺寸和填充匹配Photoshop的概念。CSS3的梯度来发挥作用,再次重新内心的阴影效果,只需调整渐变的位置处理可以创建微妙的阴影的印象。
HTML5的占位符,也可以有针对性的使用WebKit和Mozilla的供应商特定的CSS。这些占位符的颜色挑选颜色,从PSD的概念。
输入元素上使用的CSS可以直接复制到textarea的,唯一的区别是高度尺寸较大。

查看HTML代码

为用户提供视觉反馈,当输入元素活跃的:重点伪选择器可用于给不同领域的CSS样式。这里的CSS3的梯度用淡蓝色的颜色调整。
submit按钮将当前输入字段上使用的通用CSS样式,所以这一领域的目标,特别是类型=提交]先进的选择是用来附加独特的造型这个特别的元素。这样的造型,包括不同的宽度和高度,一个新的渐变背景,一个微妙的方块阴影和薄1px边框。光标:指针,然后添加按钮似乎显示光标样式的“指针”的点击元素时徘徊。

完整的代码

的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Contact Form</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="contact">
	<h1>Send an email</h1>
	<form action="#" method="post">
		<fieldset>
			<label for="name">Name:</label>
			<input type="text" id="name" placeholder="Enter your full name" />
			
			<label for="email">Email:</label>
			<input type="email" id="email" placeholder="Enter your email address" />
			
			<label for="message">Message:</label>
			<textarea id="message" placeholder="What's on your mind?"></textarea>
			
			<input type="submit" value="Send message" />
			
		</fieldset>
	</form>
</div>

</body>
</html>

的CSS

body, div, h1, form, fieldset, input, textarea {
	margin: 0; padding: 0; border: 0; outline: none;
}

html {
	height: 100%;
}

body {
	background: #728eaa;
	background: -moz-linear-gradient(top, #25303C 0%, #728EAA 100%); /* firefox */	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25303C), color-stop(100%,#728EAA)); /* webkit */
	font-family: sans-serif; 
}

#contact {
	width: 430px; margin: 60px auto; padding: 60px 30px;
	background: #c9d0de; border: 1px solid #e1e1e1;
	-moz-box-shadow: 0px 0px 8px #444;
	-webkit-box-shadow: 0px 0px 8px #444;
}

h1 {
	font-size: 35px; color: #445668; text-transform: uppercase;
	text-align: center; margin: 0 0 35px 0; text-shadow: 0px 1px 0px #f2f2f2;
}

label {
	float: left; clear: left; margin: 11px 20px 0 0; width: 95px;
	text-align: right; font-size: 16px; color: #445668; 
	text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2;
}

input {
	width: 260px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0; 
	background: #5E768D;
	background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
	font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71; 
}
	input::-webkit-input-placeholder  {
    	color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;  
	}
	input:-moz-placeholder {
	    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; 
	}

textarea {
	width: 260px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0; 
	background: #5E768D;
	background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D)); /* webkit */
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
	font-family: sans-serif; font-size: 16px; color: #f2f2f2; text-transform: uppercase; text-shadow: 0px -1px 0px #334f71; 
}
	textarea::-webkit-input-placeholder  {
    	color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;  
	}
	textarea:-moz-placeholder {
	    color: #a1b2c3; text-shadow: 0px -1px 0px #38506b; 
	}
	
input:focus, textarea:focus {
	background: #728eaa;
	background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa)); /* webkit */
}

input[type=submit] {
	width: 185px; height: 52px; float: right; padding: 10px 15px; margin: 0 15px 0 0;
	-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
	border: 1px solid #556f8c;
	background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79)); /* webkit */
	cursor: pointer;
}

最后HTML5/CSS3表格

查看HTML和CSS形式演示

在浏览器中预览最终的网页,看到的形式完全呈现在HTML和CSS。Safari和Chrome等浏览器会看到每一个细节,而Firefox会看不到,直到释放的Firefox 4中的占位符。造型会慢慢降低,因为我们通过Internet Explorer去,直到我们看到一个基本的和平面的形式,但整体功能仍然是可用的和访问。

欢迎访问站长百科网站建设

分享到:
评论

相关推荐

    html5+css3实现酷炫的form表单

    html5+css3实现酷炫的form表单

    使用HTML5和CSS3开发电子商务网站

    使用HTML5和CSS3开发电子商务网站,使用HTML5和CSS3开发电子商务网站

    html5 css3在线留言表单美化代码

    html5 css3在线留言表单美化代码

    HTML5与CSS3基础教程(中文第8版).pdf

    本书自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版不仅介绍了 文本、图像、链接、列表...

    HTML5&CSS3网页制作:CSS控制表单样式.pptx

    使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,需要清除其内边距padding和外边距margin 使用标记定义...

    html5和css3表单样式美化插件

    这是一款使用html5新的type属性制作的表单,并用纯css3来对表单进行美化的html5和css3表单样式美化插件。该表单美化插件美观大方,易于集成,十分实用。

    HTML5与CSS3实战指南

    《html5与css3实战指南》由11章和3个附录组成,内容包括html5和css3简介、html5标记、html5语义、html5表单、html5音频和视频、css3渐变和多背景、css转换和过渡、嵌入字体和多列布局、地理定位、离线web应用和web...

    HTML5+CSS3源码.rar

    Canvas火焰喷射动画效果,CSS3垂直图标菜单 带Tooltip提示框,CSS3多样式小图标按钮 带分享按钮,CSS3可视化网页编辑器 基于tinymce编辑器,CSS3实现一款联系表单 输入框带小图标,HTML5 Canvas模拟衣服撕扯动画 ...

    使用html5+css3创建优雅的网站

    一本相当不错的示例教程,能学到不少网站编程的知识。

    html5和css3入门到精通

    通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南、高级程序设计、开发指南同类图书,本书是一本适合快速入手的自学教程。内容有:创建HTML5文档,实战HTML5表单...

    HTML5&CSS3网页制作:创建表单.pptx

    在HTML5中,&lt;form&gt;&lt;/form&gt;标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,&lt;form&gt;&lt;/form&gt;中的所有内容都会被提交给服务器。 描述 语法格式 地址" method="提交方式" name="表单名称"&gt; 各种表单...

    HTML5/CSS3联系表单 提交按钮有发光动画

    好多天前我们分享过几款非常不错的CSS3表单,尤其是那款CSS3发光登录表单,更是相当绚丽。今天我们来分享一款很酷的CSS3联系表单,表单有一张很有内涵的背景图...另外该CSS3联系表单还有一个会发光的提交按钮,非常酷。

    html5和css3表单必填字段美化效果

    这是一款使用html5和css3制作的表单必填字段美化效果插件。该表单美化插件共有3种效果:必填字段背景高亮效果、必填字段隐藏效果和必填字段3d效果。

    html5和css3自定义输入表单的自然语言界面

    这是一款非常实用的html5和css3自定义输入表单的自然语言界面插件。通过contenteditable属性用户可以在自然语言环境下通过表单输入和编辑他们的各种需求,之后可以提交表单。

    HTML5 CSS3 jQ注册表单.zip

    脚本简介HTML5 CSS3 jQ注册表单是一款基于HTML5 CSS3 jQuery实现的响应式登录/注册表单。

    HTML5+CSS3+JavaScript网页设计8.zip

    《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念,设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局,注重...

    HTML5/CSS3带区域地图的联系表单

    之前我们分享很多样式和功能各异的CSS3联系表单,比如HTML5/CSS3简易联系表单 扁平化风格、CSS3联系表单 背景透明迷人等等,都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单,它可以选中不同区域...

    HTML5+CSS3源码_CSS3实现一款联系表单 输入框带小图标.rar.rar

    HTML5+CSS3源码_CSS3实现一款联系表单 输入框带小图标.rar.rar

    HTML5秘籍 HTML5和CSS3实战 HTML5与CSS3设计模式

    包含:[HTML5秘籍].(Matthew.MacDonald).李松峰、HTML5和CSS3实战 第2版、HTML5与CSS3设计模式

Global site tag (gtag.js) - Google Analytics