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来运行在线演示吧，谢谢大家支持！