Membuat Form Login Menggunakan CSS3

Sekilas Tentang CSS :

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Membuat Form Login Menggunakan CSS3 :

1. Buatlah Form Login dengan menggunakan HTML.

Username:

Password:

2. Setelah itu mari kita mulai menghias Form Login di atas dengan menggunakan CSS3 pada bagian , , dan

.

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));
}
3. Lalu kita akan menghias bagian dengan menggunakan CSS3.


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;
}
4. Langkah terakhir adalah menghias bagian Tombol Submit dengan menggunakan CSS3.


input.submit {
width: 100px;
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);
}
NB : Untuk me-link HTML dengan CSS extrenal silahkan paste kode berikut ini diantara di HTML anda :