如何使用CSS3与jQuery创建登录表单[教程](翻译)

彭博 发布于 2012/03/23 16:13
阅读 693
收藏 3

完成效果图:

How to Create Login Form with CSS3 and jQuery [Tutorial]

在此教程中,我们将编写登录表单,此过程中你会找到Vladimir KudinovFuturico UI Pro.创建此表单将用到CSS3与jQuery。

Step 1 - HTML标签

让我们先开始穿件HTML标签,创建一个带有四个input标签的,并将chekcbox输入框与label标签用span包裹起来。我们会使用span标签来给checkbox添加样式。

<div>

	<h1>Login Form</h1>

	<form action="#">

		<input type="text" name="username" placeholder="username">

		<input type="password" name="password" placeholder="password">

		<span>
			<input type="checkbox" name="checkbox">
			<label for="checkbox">remember</label>
		</span>

		<input type="submit" value="log in">

	</form>

</div>

Step 1

Step 2 - 常规CSS样式

首先我们需要将所有的margin,padding,border等等属性清除

.login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

然后我们将给form容器添加样式。

.login-form {
	position: relative;
	width: 200px;
	height: 200px;
	padding: 15px 25px 0 25px;
	margin-top: 15px;
	cursor: default;

	background-color: #141517;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
	-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
	box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
}

为了创建箭头标记我们将使用:before selector

.login-form:before {
	position: absolute;
	top: -12px;
	left: 10px;

	width: 0px;
	height: 0px;
	content: '';

	border-bottom: 10px solid #141517;
	border-right: 10px solid #141517;
	border-top: 10px solid transparent;
	border-left: 10px solid transparent;
}

对form添加一些基本的样式:

.login-form h1 {
	line-height: 40px;
	font-family: 'Myriad Pro', sans-serif;
	font-size: 22px;
	font-weight: normal;
	color: #e4e4e4;
}

Step 2

Step 3 - 常规的Input样式

首先设置input基本样式:

.login-form input[type=text],
.login-form input[type=password],
.login-form input[type=submit] {
	line-height: 14px;
	margin: 10px 0;
	padding: 6px 15px;
	border: 0;
	outline: none;

	font-family: Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 0px 1px 1px rgba(255,255,255, .2);

	-webkit-border-radius: 26px;
	-moz-border-radius: 26px;
	border-radius: 26px;

	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}

然后给user和password input添加样式:

.login-form input[type=text],
.login-form input[type=password],
.js .login-form span {
	color: #686868;
	width: 170px;

	-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
	-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
	box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);

	background: #989898;
	background: -moz-linear-gradient(top,  #ffffff 0%, #989898 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#989898 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#989898 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#989898 100%);
	background: linear-gradient(top,  #ffffff 0%,#989898 100%);
}

当鼠标悬停时改变input的阴影效果:

.login-form input[type=text]:hover,
.login-form input[type=password]:hover {
	-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
	-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
	box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
}

激活状态我们将使CSS3 gradient亮度更高:

.login-form input[type=text]:focus,
.login-form input[type=password]:focus {
	background: #e1e1e1;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e1e1e1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
	background: linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
}

Step 3

Step 4 - 提交按钮

使用float属性将button放置在右边:

.login-form input[type=submit] {
	float: right;
	cursor: pointer;

	color: #445b0f;

	-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
	-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
	box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
}

鼠标悬停将改变阴影效果,激活状态将移除阴影:

.login-form input[type=submit]:hover {
	-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
	-moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
	box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
}

.login-form input[type=submit]:active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

给button添加绿色的渐变效果:

 

.login-form input[type=submit],
.js .login-form span.checked:before {
	background: #a5cd4e;
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}

Step 4

Step 5 - Checkbox样式

现在最困难的部分来了--我们不能像渲染其他input一样来给checkbox加样式。

我们发现的使用css的最简单的办法就是用span来替代checkbox。

原理是:首先我们见checkbox隐藏,然后将span渲染得像一个checkbox一样,然后我们通过jQuery来更新checkbox的状态。因此当我们点击span标签时,jQuery将会使得checkbox选中,再次单击将更新为不选定。

考虑到某些用户可能禁用了JavaScript,我们做了一些让步。要达到效果我们需要将使用jQuery给body添加‘js’类属性。所以如果JavaScript被允许运行,则在此页面加载时会为body添加一个js类属性,而反之则不会。

首先我们将checkbox input隐藏:

.js .login-form input[type=checkbox] {
	position: fixed;
	left: -9999px;
}

然后将span定位:

.login-form span {
	position: relative;
	margin-top: 15px;
	float: left;
}

然后为span添加基本样式:

.js .login-form span {
	width: 16px;
	height: 16px;
	cursor: pointer;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

为了给span被选定的效果,将中间创建一个较小的box:

.js .login-form span.checked:before {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;

	-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
	-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
	box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
}

为了渲染label,我们会将它放在checkbox的右边,然后给它添加基本的样式:

.login-form label {
	position: absolute;
	top: 1px;
	left: 25px;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #e4e4e4;
}

Step 5

Step 6 - jQuery

首先我们要添加jQuery库,然后再body内最后添加如下代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

	// Check if JavaScript is enabled
	$('body').addClass('js');

	// Make the checkbox checked on load
	$('.login-form span').addClass('checked').children('input').attr('checked', true);

	// Click function
	$('.login-form span').on('click', function() {

		if ($(this).children('input').attr('checked')) {
			$(this).children('input').attr('checked', false);
			$(this).removeClass('checked');
		}

		else {
			$(this).children('input').attr('checked', true);
			$(this).addClass('checked');
		}

	});

});
</script>

首先我们添加“js”类属性至body:

$('body').addClass('js');

然后在加载时给checkbox默认设置为选定状态:

$('.login-form span').addClass('checked').children('input').attr('checked', true);

通过以下代码能测试checkbox是否被选定:

$(this).children("input").attr("checked");

via:designmodo.com, OSChina原创编译


加载中
返回顶部
顶部