现在的位置: 主页 > 公司荣誉 > 文章列表

CSS3让HTML表单更加吸引眼球

作者:石家庄绿之洲商贸有限公司 来源:www.365tt315.com 未知发布时间:2017-09-13 13:26:08
CSS3让HTML表单更加吸引眼球

  越来越多的WEB设计师开始关注CSS3过度效果的使用, 过度效果不仅可以美化网站界面,自定义动画,而且还可以代替Javascript,增加搜索引擎的友好度。

  下面为大家演示如何能够建立在HTML5中输入字段的动画效果。 尤其是CSS3的:valid伪类,它是比以往任何时候都更容易自定义文本输入。

  启动文件

  首先我们需要准备一个空白的index.html文件。

<!doctype html>

<html lang="en-US">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>CSS3 Animated Form Inputs</title>

<meta name="author" content="Jake Rocheleau">

<link rel="shortcut icon" href="http://designshack.net/favicon.ico">

<link rel="icon" href="http://designshack.net/favicon.ico">

<link rel="stylesheet" type="text/css" media="all" href="styles.css">

<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Skranji:400,700|Oxygen:400,700">

</head>


  提交按钮不会有什么效果,但会重新加载页面。建议不要链接到后端的PHP或Ruby脚本对数据进行处理,或者甚至通过Ajax连接。

  其中,里面每个输入类.row保持一个div元素分开。 这样一来就容易得多,旁边的标签显示输入字段, 同样包括字段的右侧的其他通知或警告。 每个输入类.txt而textarea的元素被称呼使用.txtarea 。

<form id="contactform" name="contact" method="post" action="#">

<p class="note"><span class="req">*</span> Asterisk fields are required</p>

<div class="row">

<label for="name">Your Name <span class="req">*</span></label>

<input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="Steve Jobs" required>

</div>

<div class="row">

<label for="email">E-mail Address <span class="req">*</span></label>

<input type="email" name="email" id="email" class="txt" tabindex="2" placeholder="address@domain.com" required>

</div>

<div class="row">

<label for="subject">Subject <span class="req">*</span></label>

<input type="text" name="subject" id="subject" class="txt" tabindex="3" placeholder="Advertising/Press Ideas" required>

</div>

<div class="row">

<label for="message">Message <span class="req">*</span></label>

<textarea name="message" id="message" class="txtarea" tabindex="4" required></textarea>

</div>

<div class="center">

<input type="submit" id="submitbtn" name="submitbtn" tabindex="5" value="Send Message">

</div>

</form>


  CSS布局结构

  接下来解释CSS重置, 用类似的块模板重置浏览器的默认字体大小,行高,也盒大小类似。 另外,设置的各种web字体和结构的基本要素与适当的间距。 随时保存其他Web项目中使用这个模板。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

outline: none;

-webkit-font-smoothing: antialiased;

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html { height: 101%; }

body {

font-family: 'Oxygen', Arial, Helvetica, sans-serif;

font-size: 62.5%;

line-height: 1;

padding-bottom: 85px;

background: #f5f7f7 url('images/bg.png'); /* Image Source: http://subtlepatterns.com/paper-fibers/ */

}

::selection { background: #d2bef5; }

::-moz-selection { background: #d2bef5; }

::-webkit-selection { background: #d2bef5; }

br { display: block; line-height: 2.2em; }

table { border-collapse: collapse; border-spacing: 0; }

img { border: 0; max-width: 100%; }

  接下来是代码的核心主体部分,站群软件,将div使用ID #w 。 其中660px具有有限的宽度,这是在页面上居中。 块容器内部的行元素风格,内部标签和表单输入字段。

/* form styles */

form .row {

display: block;

padding: 7px 8px;

margin-bottom: 7px;

}

form .row:hover {

background: #f1f7fa;

}

form label {

display: inline-block;

font-size: 1.2em;

font-weight: bold;

width: 120px;

padding: 6px 0;

color: #464646;

vertical-align: top;

}

form .req { color: #ca5354; }

form .note {

font-size: 1.2em;

line-height: 1.33em;

font-weight: normal;

padding: 2px 7px;

margin-bottom: 10px;

}

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */

::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */

:-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */

::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */

:-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */

  class .req 是整个标签使用所需的星号字符, CSS3的浏览器完全支持这些属性。

  与过渡样式

  最后我们可以使用伪类执行动画, 开始.txt .txtarea类每个表单元素上使用。

form .txt {

display: inline-block;

padding: 8px 9px;

padding-right: 30px;

width: 240px;

font-family: 'Oxygen', sans-serif;

font-size: 1.35em;

font-weight: normal;

color: #898989;

background-color: #f0f0f0;

background-image: url('images/checkmark.png');

background-position: 110% center;

background-repeat: no-repeat;

border: 1px solid #ccc;

text-shadow: 0 1px 0 rgba(255,255,255,0.75);

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;

-moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;

box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;

-webkit-transition: all 0.3s linear;

-moz-transition: all 0.3s linear;

transition: all 0.3s linear;

}

form .txtarea {

display: inline-block;

padding: 8px 11px;

padding-right: 30px;

width: 320px;

height: 120px;

font-family: 'Oxygen', sans-serif;

font-size: 1.35em;

font-weight: normal;

color: #898989;

background-color: #f0f0f0;

background-image: url('images/checkmark.png');

background-position: 110% 4%;

background-repeat: no-repeat;

border: 1px solid #ccc;

text-shadow: 0 1px 0 rgba(255,255,255,0.75);

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset;

-moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset;

box-shadow: 0 1px 4px -1px #a8a8a8 inset;

-webkit-transition: all 0.3s linear;

-moz-transition: all 0.3s linear;

transition: all 0.3s linear;

}


  另外,建立CSS3动画需要很多的工作,比如外部库Animate.css 。 还好CSS3足以提供基本的动画 - 悬停,重点,和类似伪类。

  最后希望这个教程能为Web开发人员提供一个示例代码库,多次练习使用,希望你也可以将自己的网站上实施类似的过渡。

  (本文出自汪子臻用户研究与体验设计中心http://wangzizhen.com/,转载时请注明出处)

,专题系统

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:宜昌SEO http://yichang.4567w.com

上一篇:利用Python数据分析:数据加载、存储与文件格式(一) 下一篇:最后一页