Tạo Login Form với CSS3

Form là thành phần không thể thiếu đối với trang web.Trong bài này mình sẽ hướng dẫn tạo một form đơn giản sử dụng CSS3

Tạo Login Form với CSS3

Bước 1: Thành phần HTML

<form id="start" action="/" method="">
<h1>Login form use css3</h1>
 <label for="user">User name: </label> <input id="user" onfocus="if(this.value == 'Tài khoản') { this.value=''; }" onblur="if(this.value == '') { this.value='Tài khoản'; }" type="text" value="Tài khoản" />

 <label for="password">Password: </label> <input id="password" onfocus="if(this.value == 'Mật khẩu') { this.value=''; }" onblur="if(this.value == '') { this.value='Mật khẩu'; }" type="password" value="Mật khẩu" />

 <label for="remember"> <input id="remember" type="checkbox" value="yes" checked="checked" /> Remember me </label>

 <a class="submit" href="#">Login</a></form>

Kết quả thu được

Tạo Login Form với CSS3

Chú ý:

onfocus="if(this.value == 'Tài khoản') { this.value=''; }" onblur="if(this.value == '') { this.value='Tài khoản'; }

Đoạn script nàydùng để tạo hiệu ứng khi người dùng trỏchuột vào phần input(onfocus) thì sẽ kiểm tra sự  tồn tại của “Tài khoản”  nếu đúng thì sẽ trả lại một đoạn rỗng, và tương tự khi người dùng di chuột ra khỏi form nó sẽ gán cho value =”Tài khoản”

Bước 2: CSS cho form

Trước tiên ta cần reset css


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}
table{ border-collapse:collapse; border-spacing:0;}
fieldset,img{ border:0;}
address,caption,cite,code,dfn,th,var{ font-style:normal; font-weight:normal;}
ol,ul{ list-style:none;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
q:before,q:after{ content:'';}
abbr,acronym{ border:0;}

html {
 overflow:-moz-scrollbars-vertical;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}
table{ border-collapse:collapse; border-spacing:0;}
fieldset,img{ border:0;}
address,caption,cite,code,dfn,th,var{ font-style:normal; font-weight:normal;}
ol,ul{ list-style:none;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
q:before,q:after{ content:'';}
abbr,acronym{ border:0;}

html {
 overflow:-moz-scrollbars-vertical;

Tiếp theo ta sẽ tạo dáng  cho form


body{
background:#eee;
color: #333;
font-family:Arial,sans-serif;
font-size: 12px;
line-height: 16px;
text-shadow: 0 1px 0 #fff;

}
a{
color: #333;
text-decoration: none;
}
form{
background: #f7f7f7;
background:-moz-linear-gradient(90deg,#ccc,#fff);
background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc));
border: 1px solid #aaa;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow:0 0 15px #aaa;
-webkit-box-shadow:0 0 15px #aaa;
box-shadow: 0 0 15px #aaa;
margin: 200px auto 0;
padding: 20px;
width: 440px;
}
h1{
border-bottom: 1px solid #ccc;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 20px;
text-transform:uppercase;
}
form p{
margin-bottom: 20px;
}
form p:last-child{
margin-bottom:0;
}
label{
cursor: pointer;
display: block;
float: left;
font-size: 13px;
font-weight:bold;
line-height:28px;
margin-bottom: 5px;
width: 120px;
}
form p:hover label{
color: #0459b7;
}

input[type=text],
input[type=password]{
background: rgba(255,255,255,.9);
background:-moz-linear-gradient(90deg,#fff,#eee);
background:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#fff),color-stop(.2,#fff));
border: 1px solid #aaa;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:0 0 3px #aaa;
-webkit-box-shadow: 0 0 3px #aaa;
padding: 5px;
width: 200px;
}
input[type=text]:focus,
input[type=password]:focus{
border-color:#093c75;
-moz-box-shadow: 0 0 3px 0459b7;
-webkit-box-shadow: 0 0 3px 0459b7;
box-shadow: 0 0 3px 0459b7;
outline: none;
}
a.submit{
background: #ddd;
background: -moz-linear-gradient(90deg,#0459b7,#08adff);
background: -webkit-gradient(linear,left top,left bottom,from(#08adff),to(#0459b7));
border: 1px solid #093c75;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
color:#fff;
cursor: pointer;
font-family:Arial,sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: 24px;
padding: 5px 10px;
text-decoration:none;
text-shadow: 0 1px 1px #333;
text-transform: uppercase;
}
a.submit:hover{
background: #eee;
background: -moz-linear-gradient(90deg,#067cd3,#0bcdef);
background: -webkit-gradient(linear,left top,left bottom,from(#0bcdff),to(#067cd3));
border-color:#093c75;
}
a.submit: active,
a.submit: focus{
background: #ccc;
background: -moz-linear-gradient(90deg,#0bcdff,#067cd3);
background: -webkit-gradient(linear,left top,left bottom,from(#067cd3),to(#0bcdff));
border-color:#093c75;
outline:none;
}
label[for=remember]{
margin:0px 0px 14px 117px;
}

Nguồn: bbxdesign

One thought on “Tạo Login Form với CSS3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s