Pencarian
 
 

Display results as :
 


Rechercher Advanced Search

Keywords

Latest topics
» Membuat Form Login dengan HTML + CSS Menarik
Sat Feb 01, 2014 4:53 pm by Tamu

» Informasi Rapat Pengurus
Fri Jan 06, 2012 10:56 am by Admin

» Event Jaringan
Tue Jan 03, 2012 3:08 pm by Firman Syahyuda

» Tanya Jawab
Tue Jan 03, 2012 3:07 pm by Firman Syahyuda

» Diskusi Jaringan
Tue Jan 03, 2012 3:06 pm by Firman Syahyuda

» Event Design Grafis
Tue Jan 03, 2012 3:05 pm by Firman Syahyuda

» Tanya Jawab
Tue Jan 03, 2012 3:04 pm by Firman Syahyuda

» Diskusi Design Grafis
Tue Jan 03, 2012 3:04 pm by Firman Syahyuda

» Event Design Web
Tue Jan 03, 2012 3:02 pm by Firman Syahyuda

July 2014
MonTueWedThuFriSatSun
 123456
78910111213
14151617181920
21222324252627
28293031   

Calendar Calendar

Affiliates
free forum


Membuat Form Login dengan HTML + CSS Menarik

Kirim topik baru   Kirim balasan

Topik sebelumnya Topik selanjutnya Go down

Membuat Form Login dengan HTML + CSS Menarik

Post  Admin on 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.
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.. Very Happy
ntar hasilnya akan seperti ini
form login:

Bagaimana, Menarik tidak?..
kalo anda lihat itu menarik, adooh ada masalah deh Very Happy Very Happy
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. pirat
No more bacod, kita langsung aja yah ke TKP alien alien
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 Razz Razz Very Happy

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;
}
Hasilnya akan seperti ini ;
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>
Bagaimana, Menarik?

jika kurang jelas silahkan didiskusikan dibawah,
Terimakasih.

Admin
Admin

Jumlah posting: 5
Cendol: 26
Reputation: 0
Join date: 01.01.12
Age: 22
Lokasi: Pontianak

Lihat profil user http://studyclubstkip.forumid.net

Kembali Ke Atas Go down

Re: Membuat Form Login dengan HTML + CSS Menarik

Post  Firman Syahyuda on Fri Jan 27, 2012 3:33 pm

nih:

akhirnya ane pertamax !!

Firman Syahyuda
Moderator
Moderator

Jumlah posting: 8
Cendol: 22
Reputation: 0
Join date: 03.01.12
Age: 21
Lokasi: Pontianak

Lihat profil user

Kembali Ke Atas Go down

kok bisa?

Post  Syahriel on 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
 Very Happy 

Syahriel
Tamu


Kembali Ke Atas Go down

Topik sebelumnya Topik selanjutnya Kembali Ke Atas

- Similar topics

Permissions in this forum:
Anda dapat menjawab topik