html5 css3 织梦,HTML5和CSS3实现登录及注册功能表单(3)

@font-face {

font-family: 'FontomasCustomRegular';

src: url('fonts/fontomas-webfont.eot');

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

url('fonts/fontomas-webfont.woff') format('woff'),

url('fonts/fontomas-webfont.ttf') format('truetype'),

url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');

font-weight: normal;

font-style: normal;

}

/** the magic icon trick ! **/

[data-icon]:after {

content: attr(data-icon);

font-family: 'FontomasCustomRegular';

color: rgb(106, 159, 171);

position: absolute;

left: 10px;

top: 35px;

width: 30px;

}

没错,你不需要为每一个图标设置class。我们使用content:attr(data-icon)来取得字母,因此我们只需要申明字体,选择颜色并且定义位置。

接下来我们定义递交按钮:/*styling both submit buttons */

#wrapper p.button input{

width: 30%;

cursor: pointer;

background: rgb(61, 157, 179);

padding: 8px 5px;

font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;

color: #fff;

font-size: 24px;

border: 1px solid rgb(28, 108, 122);

margin-bottom: 10px;

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

border-radius: 3px;

box-shadow:

0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,

0px 0px 0px 3px rgb(254, 254, 254),

0px 5px 3px 3px rgb(210, 210, 210);

transition: all 0.2s linear;

}

#wrapper p.button input:hover{

background: rgb(74, 179, 198);

}

#wrapper p.button input:active,

#wrapper p.button input:focus{

background: rgb(40, 137, 154);

position: relative;

top: 1px;

border: 1px solid rgb(12, 76, 87);

box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;

}

p.login.button,

p.signin.button{

text-align: right;

margin: 5px 0;

}

这里我们主要使用box-shadow来创建多余的border。你可以使用一个边框,但是也可以创建更多。我们使用length数值来创建一个假的白色边框,3px宽,没有模糊。

开发完毕,希望大家喜欢这个教程,如果你想看到所有效果,使用Chrome来运行在线演示吧,谢谢大家支持!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值