一款css3很美的iphone注册表单样式
代码如下，保存到html文件打开：
<!DOCTYPE html>
<html lang="">
<head>
<title>Animated Checkboxes using CSS3</title>
<meta charset="utf-8">
<meta name="description" content="UI checkboxes using CSS3" />
<meta name="keywords" content="CSS3, checkboxes" />
<meta name="robots" content="" /> <style type="text/css"> html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
body {
background: #ffffff;
color: #111111;
font-family: Helvetica;
padding: 20px;
font-size: 12px
} input:not([type=checkbox]), textarea {
width: 250px;
padding: 5px;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} form {
width: 500px;
margin: 0 auto 0 auto; } form fieldset {
padding: 26px;
border: 1px solid #b4b4b4;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
} form legend {
padding: 5px 20px 5px 20px;
color: #030303;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #b4b4b4;
} form ol {
list-style: none;
margin-bottom: 20px;
border: 1px solid #b4b4b4;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 10px;
} form ol, form legend, form fieldset {
background-image: -moz-linear-gradient(top, #f7f7f7, #e5e5e5); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #f7f7f7)); /* Saf4+, Chrome */
} form ol.buttons {
overflow: auto;
} form ol li label {
float: left;
width: 160px;
font-weight: bold; } /*
form ol.radio-buttons li {
float:left;
margin-bottom:0;
width:8px;
} form ol.radio-buttons li label {
line-height:20px;
padding-right:20px;
width:80px;
} form ol.radio-buttons li input {
padding:0;
width:20px;
}
http://www.cnblogs.com/roucheng/
*/ .settings {
/* width: 400px; */
list-style: none;
position: relative;
} .settings p {
display: block;
margin-bottom: 20px;
background: -moz-linear-gradient(50% 50% 180deg,#C91A1A, #DB2E2E, #0C990C 0%);
background: -webkit-gradient(linear, 50% 50%, 0% 50%, from(#C90202), to(#009C05), color-stop(0,#00AB00));
border-radius: 8px;
-moz-border-radius: 6px;
border: 1px solid #555555;
width: 36px;
position: relative;
height: 15px;
} /*
.settings p:before {
content: "ON";
padding-left: 9px;
line-height: 15px;
color: #fff;
font-size: 14px;
text-shadow: #093B5C 0px -1px 1px; } .settings p:after {
content: "OFF";
padding-left: 12px;
line-height: 15px;
color: #fff;
font-size: 14px;
text-shadow: #093B5C 0px -1px 1px;
}
*/ .check {
display: block;
width: 20px;
height: 13px;
border-radius: 8px;
-moz-border-radius: 6px;
background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
border: 1px solid #e5e5e5;
position: absolute;
top: 0px;
left: 0px;
} input[type=checkbox] {
display: none;
} @-webkit-keyframes labelON {
0% {
top: 0px;
left: 0px;
} 100% {
top: 0px;
left: 14px;
}
} input[type=checkbox]:checked + label.check {
top: 0px;
left: 14px;
-webkit-animation-name: labelON;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-box-shadow: #244766 -1px 0px 3px;
-moz-box-shadow: #244766 -1px 0px 3px;
} @-webkit-keyframes labelOFF {
0% {
top: 0px;
left: 16px;
} 100% {
top: 0px;
left: 0px;
}
} input[type=checkbox] + label.check {
top: 0px;
left: 0px;
-webkit-animation-name: labelOFF;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-box-shadow: #244766 1px 0px 3px;
-moz-box-shadow: #244766 1px 0px 3px;
} label.info {
position: absolute;
color: #000;
top:0px;
left: 50px;
line-height: 15px;
width: 200px;
} form ol.buttons li {
float: left;
width: 100px;
} input[type=submit] {
width: 80px;
color: #f3f3f3;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: -moz-linear-gradient(top, #0cb114, #07580b); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #07580b),color-stop(1, #0cb114)); /* Saf4+, Chrome */
-webkit-box-shadow: #4b4b4b 0px 2px 5px;
-moz-box-shadow: #4e4e4e 0px 2px 5px;
box-shadow: #e3e3e3 0px 2px 5px;
border: none;
}
input[type=reset] {
width: 80px;
color: #f3f3f3;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: -moz-linear-gradient(top, #d01111, #7e0c0c); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7e0c0c),color-stop(1, #d01111)); /* Saf4+, Chrome */
-webkit-box-shadow: #4b4b4b 0px 2px 5px;
-moz-box-shadow: #4e4e4e 0px 2px 5px;
box-shadow: #e3e3e3 0px 2px 5px;
border: none; } input[type=file] {
width: 80px;
} </style> </head> <body> <form id="form-1" action="" method="post">
<fieldset>
<legend><b>请填写您的信息</b></legend>
<ol>
<li><label for="field1">个人账号：</label></li>
<li><input type="text" id="field1" name="field1" required/></li>
</ol>
<ol> <li><label for="field2">个人密码：</label></li>
<li><input type="password" id="field2" name="field2" /></li>
</ol>
<div class="settings">
<p>
<input type="checkbox" value="1" id="1" name="1" checked="checked"/>
<label class="check" for="1"></label>
<label class="info">允许被转载</label> </p>
<p>
<input type="checkbox" value="2" id="2" name="2" />
<label class="check" for="2"></label>
<label class="info">允许被评论</label>
</p> </div>
<ol class="buttons">
<li><input type="submit" class="button" value="提交" /></li>
<li><input type="reset" class="button" value="重置" /></li>
</ol>
</fieldset> </form> </body> </html>
一款css3很美的iphone注册表单样式的更多相关文章
- CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...
- css3很美的蟠桃动画
查看效果:http://hovertree.com/texiao/css3/26/ 源码下载:http://hovertree.com/h/bjaf/ndhxgfkn.htm 效果图如下: 代码如下: ...
- 一款纯css3实现的超炫3D表单
今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 一款基于jQuery的带Tooltip表单验证的注册表单
今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...
- 免费 PSD 下载： 20个精美的登录和注册表单
注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...
- UX设计秘诀之注册表单设计，细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
- 基于HTML5手机登录注册表单代码
分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- ajax 提交 注册表单 到MySQL数据库
今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...
- 脚本简介jQuery微信开放平台注册表单
脚本简介jQuery微信开放平台注册表单是一款仿微信开放平台的选项卡带步骤的注册表单验证jQuery代码 分享自:http://www.huiyi8.com/jiaoben/ 下载地址:http:// ...
随机推荐
- 安卓动态调试七种武器之离别钩 – Hooking（下）
0x00 序 随着移动安全越来越火,各种调试工具也都层出不穷,但因为环境和需求的不同,并没有工具是万能的.另外工具是死的,人是活的,如果能搞懂工具的原理再结合上自身的经验,你也可以创造出属于自己的调试 ...
- 配置apache和nginx的tomcat负载均衡
概述 本篇文章主要介绍apache和nginx的相关配置,tomcat的相关安装配置我在前面有写过一篇,详细介绍通过两种配置方法配置nginx. tomcat配置参考:http://www.cnblo ...
- Leetcode 刷题计划
Two Sum 21.4% Medium Given an array of integers, return indices of the two numbers such that t ...
- 支持向量机（SVM）复习总结
摘要: 1.算法概述 2.算法推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 其基本模型定义为特征空间上的间隔最大的线性分类器,即支持向量机的学习策略 ...
- Linux查找命令：grep,awk,sed
grep grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具 ...
- C语言-结构体struct-联合体union-枚举enum
结构体 在Java中,我们要表示一个复合的数据类型就会使用对象去封装.而C就有结构体. 结构体是C语言中自定义的数据类型,是一组变量的集合,有别于数组,数组仅限于同一种数据类型,而结构体可以是任何数据 ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- canvas学习笔记一
为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...
- Use Qt in Debian for OpenCASCADE
Use Qt in Debian for OpenCASCADE eryar@163.com Recently several OpenCASCADE enthusiasts want to buil ...
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
× 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...