CSS3制作美丽的3D表单

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>CSS3制作3D表单</title>

<style type="text/css">

body{

background-color:#f7f0da;

background-image: -webkit-linear-gradient(180deg,transparent 90%,#eae4cf 10%);

background-image: -moz-linear-gradient(180deg,transparent 90%,#eae4cf 10%);

background-image: -o-linear-gradient(180deg,transparent 90%,#eae4cf 10%);

background-image: -ms-linear-gradient(180deg,transparent 90%,#eae4cf 10%);

background-image: linear-gradient(180deg,transparent 90%,#eae4cf 10%);

background-size: 5px 50px;

}

.box{

margin:20px auto;

width:560px;

text-align:center;

font-weight:bold;

}

.box div:first-child{

font-size:60px;

margin-bottom:20px;

text-shadow:0 2px 0 #c0c0c0,0 3px #979385;

}

.box .input_control{

position:relative;

height:100px;

}

.box input{

position:relative;

font-size:18px;

height:56px;

width:100%;

padding-left:10px;

border:12px solid #fff;

border-radius:3px;

box-shadow:inset 0 0 0 1px #c0c0c0,inset 1px 2px 0 #e6e6e6,1px 2px 0 #c0c0c0,-1px 2px 0 #c0c0c0,2px 3px 0 #c0c0c0,-2px 3px 0 #c0c0c0,2px 12px 0 #c0c0c0,-2px 12px 0 #c0c0c0,0 2px 0 3px #979797,0 10px 0 3px #979797,-2px 15px 10px rgba(0,0,0,.6);

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

-o-box-sizing:border-box;

-ms-box-sizing:border-box;

box-sizing:border-box;

-webkit-transition: all 0.1s ease-in;

-moz-transition: all 0.1s ease-in;

-ms-transition: all 0.1s ease-in;

-o-transition: all 0.1s ease-in;

transition: all 0.1s ease-in;

}

.box label{

position:absolute;

top:-2px;

right:50px;

width:74px;

height: 56px;

color:#f3f2f1;

text-shadow:0 3px 1px #9e2719;

border:1px solid #dd684f;

background:-webkit-linear-gradient(top,#e78d7b 0,#dd684f 72px);

background:-moz-linear-gradient(top,#e78d7b 0,#dd684f 72px);

background:-o-linear-gradient(top,#e78d7b 0,#dd684f 72px);

background:-ms-linear-gradient(top,#e78d7b 0,#dd684f 72px);

background:linear-gradient(top,#e78d7b 0,#dd684f 72px);

box-shadow:0 14px 0 #9c2912,0 0 5px rgba(0,0,0,.3);

-webkit-transition: all 0.1s ease-in;

-moz-transition: all 0.1s ease-in;

-o-transition: all 0.1s ease-in;

-ms-transition: all 0.1s ease-in;

transition: all 0.1s ease-in;

}

.box label:after{

position:absolute;

display:block;

width: 74px;

text-align: center;

font: normal normal 30px/56px 'icomoon';

speak: none;

-webkit-font-smoothing: antialiased;

-moz-font-smoothing: antialiased;

-o-font-smoothing: antialiased;

-ms-font-smoothing: antialiased;

font-smoothing: antialiased;

}

.input_control:nth-of-type(2) label:after{

content:"\21";

}

.input_control:nth-of-type(3) label:after{

content:"\22";

}

.input_control:nth-of-type(4) label:after{

content:"\23";

}

.box input:focus{

outline: 0 none;

top:2px;

box-shadow:inset 0 0 0 1px #c0c0c0,inset 1px 2px 0 #e6e6e6,1px 2px 0 #c0c0c0,-1px 2px 0 #c0c0c0,1px 3px 0 #c0c0c0,-2px 3px 0 #c0c0c0,2px 12px 0 #c0c0c0,-2px 12px 0 #c0c0c0,0 2px 0 3px #979797,0 10px 0 3px #979797,-2px 15px 10px rgba(0,0,0,.6);

}

.box input:focus + label{

top:0;

}

::-webkit-input-placeholder {

color:#d94a2d;

font-style:italic;

}

.box .btn{

position:relative;

width:210px;

height:60px;

color:#4c6e03;

font:bold 35px "Impact";

text-indent:10px;

letter-spacing:3px;

text-align:left;

margin-bottom:20px;

border:none;

border-radius:6px;

text-shadow:-1px 2px 0 #c4e184;

box-shadow:1px 2px 0 #5f8214,-1px 2px 0 #5f8214,2px 3px 0 #5f8214,-2px 3px 0 #5f8214,2px 12px 0 #5f8214,-2px 12px 0 #5f8214,0 2px 0 3px #304601,0 10px 0 3px #304601,-2px 15px 10px rgba(0,0,0,.6);

background:-webkit-linear-gradient(top,#c5e185,#a5c65c);

-webkit-transition: all 0.1s ease-in;

-moz-transition: all 0.1s ease-in;

-o-transition: all 0.1s ease-in;

-ms-transition: all 0.1s ease-in;

transition: all 0.1s ease-in;

}

.box .btn:after{

position:absolute;

display:block;

content:"\25";

width:36px;

height:36px;

border-radius:18px;

background:#5f8214;

top:10px;

right:20px;

text-indent:5px;

text-align:center;

color:#b3d36e;

text-shadow:0 3px 0 #325207;

box-shadow:inset 0 6px 0 #325207;

font: normal normal 18px/40px 'icomoon';

speak: none;

-webkit-font-smoothing: antialiased;

-moz-font-smoothing: antialiased;

-o-font-smoothing: antialiased;

-ms-font-smoothing: antialiased;

font-smoothing: antialiased;

}

.box .btn:hover{

background:-webkit-linear-gradient(top,#a2c452,#a5c65c);

background:-moz-linear-gradient(top,#a2c452,#a5c65c);

background:-ms-linear-gradient(top,#a2c452,#a5c65c);

background:-o-linear-gradient(top,#a2c452,#a5c65c);

background:linear-gradient(top,#a2c452,#a5c65c);

}

.box .btn:active{

top:2px;

box-shadow:1px 2px 0 #a5c65c,-1px 2px 0 #a5c65c,1px 3px 0 #a5c65c,-2px 3px 0 #5f8214,2px 12px 0 #5f8214,-2px 12px 0 #5f8214,0 2px 0 3px #5f8214,0 10px 0 3px #304601,-2px 15px 10px rgba(0,0,0,.6);

}

.box p a{

color:#d94a2d;

line-height:30px;

font-size:14px;

}

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot');

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

url('fonts/icomoon.svg#icomoon') format('svg'),

url('fonts/icomoon.woff') format('woff'),

url('fonts/icomoon.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div class="page">

<section class="demo">

<div class="box">

<form>

<div>secure login</div>

<div class="input_control">

<input type="text" id="inputName" placeholder="Your Name">

<label for="inputName"></label>

</div>

<div class="input_control">

<input type="text" id="inputEmail" placeholder="Your Email">

<label for="inputName"></label>

</div>

<div class="input_control">

<input type="password" id="inputPassword" placeholder="******">

<label for="inputName"></label>

</div>

<div>

<button type="submit" class="btn">LOGIN</button>

</div>

</form>

</div>

</section>

</div>

</body>

</html>

CSS3制作美丽的3D表单的更多相关文章

纯CSS3制作学生入学档案表单样式代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
一款纯css3实现的超炫3D表单
今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览源码下载实现的代码. html代码 ...
使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
一款简易的CSS3扁平化风格联系表单
CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单.经测试效果相当不 ...
制作Html标签以及表单、表格内容
制作Html一般用DW(......),Html全称为(Hyper Text Markup Language 超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...
AJAX练习(一)：制作可以自动校验的表单（从原理上分析ajax的作用）
继上文(AJAX(一)AJAX的简介和基础)作为联系. 传统网页在注册时检测用户名是否被占用,传统的校验显然缓慢笨拙. 当ajax出现后,这种体验有了很大的改观,因为在用户填写表单时,签名的表单项已经 ...
JQuery制作网页——第九章表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
使用jQuery快速高效制作网页交互特效---表单校验
表单基本验证技术为什么需要表单验证减轻服务器的压力保证输入的数据符合要求常用的表单验证 1.日期格式 2.表单元素是否为空 3.用户名和密码 4.E-mail地址 5.身份证号码表单选择器 ...
9款大气实用的HTML5/CSS3注册登录表单
1.HTML5/CSS3仿Facebook登录表单利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

随机推荐

PAGED_CODE()
#if DBG #define PAGED_CODE() \ /*APC_LEVEL*/) { \ VideoPortDebugPrint(, "Video: Pageable code c ...
hbase源码系列（八）从Snapshot恢复表
在看这一章之前,建议大家先去看一下snapshot的使用.这一章是上一章snapshot的续集,上一章了讲了怎么做snapshot的原理,这一章就怎么从snapshot恢复表. restoreSnap ...
[数学-构造矩阵]NEFU 1113
依据题意.我已经推导出tn的公式.ti=ti.a+ti.b,ti.a=5*t(i-1).a+4*t(i-1).b,ti.b=t(i-1).a+t(i-1).b 然而以下居然不能继续推到sn的公式!!! ...
Oracle 数据泵详解
一.EXPDP和IMPDP使用说明 Oracle Database 10g引入了最新的数据泵(Data Dump)技术,数据泵导出导入(EXPDP和IMPDP)的作用 1)实现逻辑备份和逻辑恢复. 2 ...
(笔记)Linux线程编译undefined reference to 'pthread_create'
在使用线程时,使用gcc或arm-linux-gcc编译时,会出现错误:undefined reference to 'pthread_create' 主要是以下两种原因: 1.#include &l ...
python 读写配置文件
使用python读写配置文件,写个demo测试一下. #!/usr/bin/env python import os import ConfigParser # 如果文件不存在,就穿件文件. if o ...
了解VIM的寄存器
VIM下的删除:delete; 复制:yank; 粘帖:put; 都会用到VIM下的相关寄存器,今天就说说这个寄存器的问题: VIM中有多种寄存器:包括: 有名寄存器,用名字("a-&quo ...
Prolog学习：基本概念
上一篇对Prolog有了一个感性的认识,今天介绍下Prolog中一些基本概念,想要用Prolog解决一些实际问题之前必须要先了解它们.这些概念在<七周七语言>这本书中都有介绍,我简单提炼汇 ...
Mybatis接口注解
在上一章中,我们已经搭建了 myeclipse,mybatis,mysql 的开发环境,并且实现了 mybatis 的一个简单的查询.要注意的是,这种方式是用 SqlSession 实例来直接执行在U ...
C# 将DateTime.Now.DayOfWeek的值转为中文星期
1. 如果常规使用DateTime.Now.DayOfWeek则得到是英文,如果加ToString后再加上相关参数(“G”.“g”.“X”.“x”.“F”.“f”.“D”或“d”),则还会有所变化. ...

CSS3制作美丽的3D表单

CSS3制作美丽的3D表单的更多相关文章

随机推荐

热门专题