Membuat Form Login dengan HTML + CSS Menarik
2 posters
Halaman 1 dari 1
Membuat Form Login dengan HTML + CSS Menarik
Admin Fri Jan 27, 2012 1:35 pm
Jika sebelunyna kita sudah membahas tentang HTML, baik itu pengertian, mempelajari tag-tag dan cara penggunaannya, sekarang saya ingin sharing tentang penggunaan CSS didalam HTML. Fungsi CSS disini adalah untuk memodifikasi tampilan HTML kita agar tampak lebih menarik.
Bagaimana, masih bingung?
Kita praktek aja ya, OK sekarang siapkan jari anda di atas keyboard. Upss jangan lupa, jalanin aplikasi HTML editor anda dulu yah, kalo disini saya menggunakan Dreamweaver CS5.
______________________________________________________________
1. Pertama yang harus kita lakukan adalah membuat sebuah form login dengan menggunakan html, masih ingat kan kodenya yang saya berikan kemarin? kalo sudah lupa, tenang saja disini saya kasi kodenya.
Ok sudah dibuat?.. di Copy paste juga gapapa, tapi ingat dipahami ya..
ntar hasilnya akan seperti ini
Bagaimana, Menarik tidak?..
kalo anda lihat itu menarik, adooh ada masalah deh
Sebenarnya itu belum menarik, karena sangat sederhana, kita bisa modifikasi lagi sesuai dengan keinginan kita.
ketika kita ingin memodifikasinya, nah disinilah letak dan fungsi CSS (Cascade Style Sheet) kalo gak salah sih itu singkatanyya.
No more bacod, kita langsung aja yah ke TKP
ketikan kode CSS berikut:
Oh ya, jangan lupa untuk menempatkan CSS ini menggunakan tag <style> dan ditempatkan diatas form kita tadi
Maka hasilnya akan seperti ini
Sebenarnya cukup segitu aja, tapi menurut ane sih masih kurang bagus coz bentuknya masih belum sempurna yaitu loginnya masih jadul
Nah kalo yang ini yaitu memodifikasi bentuk Form Isiannya seperti kotak Username dan pasword agar lebih menarik,
Ketikkan Kode Berikut;
Hasilnya akan seperti ini :
Dan terakhir yaitu menambahkan Efek pada Tombol Submit, Ketikkan Kode Berikut:
Berikut untuk HTML keseluruhannya
jika kurang jelas silahkan didiskusikan dibawah,
Terimakasih.
Bagaimana, masih bingung?
Kita praktek aja ya, OK sekarang siapkan jari anda di atas keyboard. Upss jangan lupa, jalanin aplikasi HTML editor anda dulu yah, kalo disini saya menggunakan Dreamweaver CS5.
______________________________________________________________
1. Pertama yang harus kita lakukan adalah membuat sebuah form login dengan menggunakan html, masih ingat kan kodenya yang saya berikan kemarin? kalo sudah lupa, tenang saja disini saya kasi kodenya.
- script HTML untuk Form Login:
- <form>
<label>Username:</label>
<input type="text" name="username" />
<label>Password:</label>
<input type="password" name="password" />
<input type="submit" value="Login" name="submit" />
</form>
Ok sudah dibuat?.. di Copy paste juga gapapa, tapi ingat dipahami ya..
ntar hasilnya akan seperti ini
- form login:
Bagaimana, Menarik tidak?..
kalo anda lihat itu menarik, adooh ada masalah deh
Sebenarnya itu belum menarik, karena sangat sederhana, kita bisa modifikasi lagi sesuai dengan keinginan kita.
ketika kita ingin memodifikasinya, nah disinilah letak dan fungsi CSS (Cascade Style Sheet) kalo gak salah sih itu singkatanyya.
No more bacod, kita langsung aja yah ke TKP
ketikan kode CSS berikut:
Oh ya, jangan lupa untuk menempatkan CSS ini menggunakan tag <style> dan ditempatkan diatas form kita tadi
- css background:
- body{
background: #4E0085;
}
label {
font-size: 12px;
font-family: arial, sans-serif;
list-style-type: none;
color: #FFFFF;
text-shadow: #000 1px 1px;
margin-bottom: 5px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
}
form {
width: 201px;
padding: 20px;
margin:150px auto;
border: 2px solid #FFFFFF;
/*** Membuat tepi menjadi rounded ***/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
/*** Membuat bayangan di belakang box ***/
-moz-box-shadow:0px -5px 300px #FFFFFF;
-webkit-box-shadow:0px -5px 300px #FFFFFF;
/*** Membuat Warna Gradient Pada Background - 2 Deklarasi : 1.Firefox 2.Webkit(Chrome dan Safari) ***/
background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
}
Maka hasilnya akan seperti ini
- Hasil background:
Sebenarnya cukup segitu aja, tapi menurut ane sih masih kurang bagus coz bentuknya masih belum sempurna yaitu loginnya masih jadul
Nah kalo yang ini yaitu memodifikasi bentuk Form Isiannya seperti kotak Username dan pasword agar lebih menarik,
Ketikkan Kode Berikut;
- CSS Warna Form:
- input {
width: 200px;
padding: 6px;
margin-bottom: 10px;
border-top: 1px solid #ad64e0;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
background: #8a33c6;
/*** Transition Selectors - Bagian apa yang akan beranimasi dan berapa lama ***/
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
/*** Menambahkan bayangan ***/
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
}
input:hover {
-webkit-box-shadow: 0px 0px 4px #000;
background: #9d39e1;
}
Hasilnya akan seperti ini :
- hasil form:
Dan terakhir yaitu menambahkan Efek pada Tombol Submit, Ketikkan Kode Berikut:
- Efek Tombol:
- input {
width: 200px;
padding: 6px;
margin-bottom: 10px;
border-top: 1px solid #ad64e0;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
background: #8a33c6;
/*** Transition Selectors - Bagian apa yang akan beranimasi dan berapa lama ***/
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
/*** Menambahkan bayangan ***/
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
}
input:hover {
-webkit-box-shadow: 0px 0px 4px #000;
background: #9d39e1;
}
- Hasil:
Berikut untuk HTML keseluruhannya
- Semua:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
background: #4E0085;
}
label {
font-size: 12px;
font-family: arial, sans-serif;
list-style-type: none;
color: #FFFFF;
text-shadow: #000 1px 1px;
margin-bottom: 5px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
}
form {
width: 201px;
padding: 20px;
margin:150px auto;
border: 2px solid #FFFFFF;
/*** Membuat tepi menjadi rounded ***/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
/*** Membuat bayangan di belakang box ***/
-moz-box-shadow:0px -5px 300px #FFFFFF;
-webkit-box-shadow:0px -5px 300px #FFFFFF;
/*** Membuat Warna Gradient Pada Background - 2 Deklarasi : 1.Firefox 2.Webkit(Chrome dan Safari) ***/
background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
}
input {
width: 200px;
padding: 6px;
margin-bottom: 10px;
border-top: 1px solid #ad64e0;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
background: #8a33c6;
/*** Transition Selectors - Bagian apa yang akan beranimasi dan berapa lama ***/
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;
/*** Menambahkan bayangan ***/
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
}
input:hover {
-webkit-box-shadow: 0px 0px 4px #000;
background: #9d39e1;
}
input.submit {
width: 10px;
color: #fff;
text-transform: uppercase;
text-shadow: #000 1px 1px;
border-top: 1px solid #ad64e0;
margin-top: 10px;
/*** Menambah CSS3 Gradients ***/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
}
input.submit:hover {
-webkit-box-shadow: 0px 0px 2px #000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
}
input.submit:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6));
background: -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9);
}
</style>
</head>
<body>
<form>
<label>Username:</label>
<input type="text" name="username" />
<label>Password:</label>
<input type="password" name="password" />
<input type="submit" value="Login" name="submit" />
</form>
</body>
</html>
jika kurang jelas silahkan didiskusikan dibawah,
Terimakasih.
Admin- Admin
- Jumlah posting : 5
Cendol : 26
Reputation : 0
Join date : 01.01.12
Age : 31
Lokasi : Pontianak -
Re: Membuat Form Login dengan HTML + CSS Menarik
Firman Syahyuda Fri Jan 27, 2012 3:33 pm
- nih:
akhirnya ane pertamax !!
Firman Syahyuda- Moderator
- Jumlah posting : 8
Cendol : 22
Reputation : 0
Join date : 03.01.12
Age : 31
Lokasi : Pontianak
kok bisa?
Syahriel Sat Feb 01, 2014 4:53 pm
Gan Ane mau nanya
kok itu form login nya bisa di tengah
sedangkan kalo ane bikin sendiri selalu di pojok kiri atas
oh iya 1 lagi gan
add FB Ane
"Syahriel Undur Undur"
supaya bisa nanya lebih banyak lagi tentang webdesign
kok itu form login nya bisa di tengah
sedangkan kalo ane bikin sendiri selalu di pojok kiri atas
oh iya 1 lagi gan
add FB Ane
"Syahriel Undur Undur"
supaya bisa nanya lebih banyak lagi tentang webdesign
Syahriel- Tamu
Halaman 1 dari 1
Permissions in this forum:
Anda tidak dapat menjawab topik|
|
|
» Informasi Rapat Pengurus
» Event Jaringan
» Tanya Jawab
» Diskusi Jaringan
» Event Design Grafis
» Tanya Jawab
» Diskusi Design Grafis
» Event Design Web