css3制作日历风格登陆表单


好久没有发布案例了,今天发布一个@白牙同学制作的登录表单,这个表单风格类似于日历。其中较为复杂的是登录表单的中链环效果。通过五个span标签,配合CSS3的伪类来制作。...
       好久没有发布案例了,今天发布一个@白牙同学制作的登录表单,这个表单风格类似于日历。其中较为复杂的是登录表单的中链环效果。通过五个span标签,配合CSS3的伪类来制作。详细制作请查看Demo制作过程。


       HTML 结构
<div class="content">
<!-- ===用来制作纸张层叠==== -->
<div class="form-wrapper">
<!-- ====制作链条效果=== -->
<div class="linker">
<!-- ==== 每个链条 ==== -->
<span class="ring"></span>
<span class="ring"></span>
<span class="ring"></span>
<span class="ring"></span>
<span class="ring"></span>
</div>
<!-- ==== 登录表单 ==== -->
<form class="login-form" action="#" method="post">
<input type="text" name="username" placeholder="username" />
<input type="password" name="password" placeholder="password" />
<button type="submit">Log in</button>
</form>
</div>
</div>

       这样的结构,对大家来说都很简单,基中“div.form-wrapper”主要用来实现表单纸张层叠效果。其中最为关键的是链条效果,这里使用了一个div加上5个span实现:
<!-- ====制作链条效果=== -->
<div class="linker">
<!-- ==== 每个链条 ==== -->
<span class="ring"></span>
<span class="ring"></span>
<span class="ring"></span>
<span class="ring"></span>
<span class="ring"></span>
</div>

       CSS样式
       下面分步来看实现的样式代码:
/*基本布局样式*/
body {
background-image:url(bg.jpg);
}
.content {
width:680px;
height:320px;
margin:50px auto;
}


/*表单容器样式,类似于日历风格*/
.form-wrapper {
margin:32px auto;
width:264px;
height:253px;
position:relative;
border:1px solid rgb(197,200,204);
background-color:rgb(248,249,250);
text-align:center;
border-radius:5px;/*圆角*/
box-shadow:0 1px 0 rgb(255,255,255), 0 2px 0 rgb(197,200,204), 0 3px 0 rgb(255,255,255), 0 4px 0 rgb(197,200,204);/*纸张层叠效果*/
}
/*制作链条顶部背景区域*/
.form-wrapper:before {
content:"";
display:block;
height:37px;
border-bottom:1px solid rgb(197,200,204);
border-radius:5px 5px 0 0;
box-shadow:inset 2px 2px 0 rgb(255,255,255);
}

       上面代码是一个关键之处,使用box-shadow的多阴影模仿制作多张纸层叠效果。
/*表单元素样式制作*/
.form-wrapper .login-form {
padding-top:40px;
box-shadow:inset 2px 0 0 rgb(255,255,255);/*内阴影*/
}
/*登录框样式*/
.form-wrapper input[name="username"],
.form-wrapper input[name="password"] {
height:40px;
width: 200px;
margin:0 auto;
padding-left:15px;
display:block;
border:1px solid rgb(197,200,204);
background-color:rgb(228,230,233);
}
.form-wrapper input[name="username"]{
border-bottom:none;
border-radius:5px 5px 0 0;
box-shadow:inset 0 1px 0 rgb(212,214,217);
}
.form-wrapper input[name="password"] {
border-radius:0 0 5px 5px;
}
/*按钮效果*/
.form-wrapper button[type="submit"] {
margin-top:25px;
width:215px;
height:44px;
color:#fff;
font-size:20px;
border:none;
border-top:1px solid rgb(190,143,48);
position:relative;
/*利用双背景制作垂直渐变色边框*/
background:-*-linear-gradient(top,rgb(228,182,88),rgb(218,149,78)) 1px 1px no-repeat,
-*-linear-gradient(top,rgb(190,143,48),rgb(160,106,32)) left top no-repeat;
background-size:213px 41px,215px 43px;
border-radius:5px;
box-shadow:inset 0 1px 0 rgb(242,220,175);
text-shadow:1px 1px 0 rgb(138,100,50);
transition:color 300ms linear;
}
.form-wrapper button[type="submit"]:hover {
color:rgb(195,188,81);
background:-*-linear-gradient(top,rgb(195,99,81),rgb(196,84,64)) 1px 1px no-repeat,
-*-linear-gradient(top,rgb(190,143,48),rgb(160,106,32)) left top no-repeat;
}

       上面这段代码主要是用来制作表单元素的样式。
标签: css

更多 css 相关资讯

用CSS3打造一组闪亮的半透明按钮效果

用CSS3打造一组闪亮的半透明按钮效果

分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能,让设计和开发人员能够轻松的创作出精美的界面效果。 这些闪亮的按钮使用了两个 DIV 实现,一个

使用CSS3创建动态3D立方体

向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。   demo地址:http://www.paulrhayes.com/experiments/

CSS3制作下拉工具条

CSS3制作下拉工具条

Tooltip的效果,在Web上的运用对大家来说不在陌生了,然而很多tooltip的效果都是依赖于JavaScript或者jQuery来实现。但是随着IE6的慢慢死去,制作这样的效果是无需任何脚本语言来

CSS 中的分离、抽象和层叠

CSS 中的分离、抽象和层叠

介绍 有很多充分的理由说明LESS和Sass的用途。css很难做到可维护性。LESS和Sass(类似工具)使css变成了一个更加易用的语言。 但是,当人们谈论到为什么他

避免CSS初学者常犯的那些错误

避免CSS初学者常犯的那些错误

1.不要忘记引号! font family: "Times New Roman", "Times Roman", Roman, serif; 2.正确的注视样式表。 /* This is a CSS Comment */ 3.不要忘记了标点符号 .class {

Pure CSS3 Circle Menu

Pure CSS3 Circle Menu

这个案例是一个圆形转盘导航,初看效果可能很多人都会认为不可思议,CSS3能做出这样的效果,是的,真的是CSS3做的。在整个效果中有几个关键之处, 扇形形是通过clip、border-

CSS3制作下拉菜单

CSS3制作下拉菜单

下拉菜单如果不需要兼容IE6的话,完全可以不依赖于任何js脚本实现,今天这个案例也是有关于CSS下拉菜单,但有别于以往的,主要区别是子菜单是固定 显示在那,而不是默认隐藏,鼠

CSS3绘制的腾讯QQ企鹅Logo

CSS3绘制的腾讯QQ企鹅Logo

CSS3绘制腾讯QQ的企鹅Logo效果 今天和大家分享一下使用CSS3绘制腾讯QQ的企鹅Logo的过程。 一、如何使用CSS3来绘制图形? 网络上经常能够看到一些用CSS3绘制的精致图

CSS3 Glowing Text Effect

CSS3 Glowing Text Effect

一个有关于CSS3写的文字发光和动画的案例。这个效果中最关键的是使用了十个相同的标签,来模仿了一个3D立体的效果,同时设置一个抖动的效果,这个效 果主要由transform的rotate3d

CSS3 Gallery Lightbox

这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现,这个效果初看有些许复杂,一开始不太清楚其实现原理,但仔细看看代码,还是能整明白的。功能主要依赖