Friday, April 14, 2017
Membuat Form Daftar Signup dengan CSS HTML
Membuat Form Daftar Signup dengan CSS HTML
EFTUTOR BLOG - Membuat Form Daftar Signup dengan CSS3 HTML - Form Sign Up dengan CSS 3 dan Variasi HTML sehingga lebih Nice Look. Sebelumnya Anda dapat melihat tutorial saya tentang Membuat Form Login dengan CSS 3 dan HTML. Oke, lanjut ke materi awal, silahkan lihat gambar dibawah ini.
 |
| Membuat Form Daftar Signup dengan CSS HTML |
Nantinya Form yang akan dibuat menjadi seperti diatas, berikut ini script yang dapat kalian gunakan.
Script HTML
<form id="signup">
<h1>Start doing cool stuff in seconds.</h1>
<input type="email" placeholder="effand@email.com" required="">
<input type="password" placeholder="Choose your password" required="">
<input type="password" placeholder="Confirm password" required=""> <button type="submit">Sign up for free!</button> </form>
Script CSS
#signup {Selesai, Selamat Mencoba !!!
width: 550px;
height: 330px;
margin: 100px auto 50px auto;
padding: 20px;
position: relative;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAMAAAB883U1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF7+/v7u7u////REBVnAAAAAN0Uk5T//8A18oNQQAAABZJREFUeNpiYGJiYmBiYgRiBhAGCDAAALsAFJhiJ+UAAAAASUVORK5CYII=);
border: 1px solid #ccc;
border-radius: 3px;
}
/*http://eftutor.blogspot.com*/
#signup::before,
#signup::after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
top: 0;
z-index: -1;
background: #fff;
border: 1px solid #ccc; }
#signup::after {
left: 4px;
right: 4px;
bottom: -5px;
z-index: -2;
box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
}
#signup h1 {
position: relative;
font: italic 1em/3.5em trebuchet MS,Arial, Helvetica;
color: #999;
text-align: center;
margin: 0 0 20px;
}
#signup h1::before,
#signup h1::after{
content:;
position: absolute;
border: 1px solid rgba(0,0,0,.15);
top: 10px;
bottom: 10px;
left: 0;
right: 0;
}
#signup h1::after{
top: 0;
bottom: 0;
left: 10px;
right: 10px;
}
::-webkit-input-placeholder {
color: #bbb;
}
:-moz-placeholder {
color: #bbb;
}
.placeholder{
color: #bbb; /* polyfill */
}
#signup input{
margin: 5px 0;
padding: 15px;
width: 100%;
*width: 518px; /* IE7 and below */
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 3px; }
#signup input:focus{
outline: 0;
border-color: #aaa;
box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
}
#signup button{
margin: 20px 0 0 0;
padding: 15px 8px; width: 100%;
cursor: pointer;
border: 1px solid #2493FF;
overflow: visible;
display: inline-block;
color: #fff;
font: bold 1.4em arial, helvetica;
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
background-color: #2493ff;
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
transition: background-color .2s ease-out;
border-radius: 3px;
box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;
}
#signup button:hover{
background-color: #7cbfff;
border-color: #7cbfff;
}
#signup button:active{
position: relative;
top: 3px;
text-shadow: none;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}
Available link for download
