Pada Kesempatan kali ini saya akan membagikan Syntax CSS Untuk Tutorial Form Login [Part 1]... Sebelum anda meng-copy syntax berikut saya akan jelaskan apa itu CSS...
CSS (Cascading StyleSheet)
CSS adalah sekumpulan kode yang digunakan untuk mendesain Tampilan yang di hasilkan oleh kode Markup (HTML).
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandardisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. (Wikipedia)
Perhatikan Screenshoot dibawah Ini...
Ini adalah tampilan dari kode Markup (HTML) tanpa adanya Desain dari CSS...
Perhatikan Screenshoot dibawah ini...
Ini adalah tampilan dari kode Markup (HTML) dengan Stylesheet (CSS).
Oke sekarang kita lanjutkan ke Tutorial 😊 Silahkan anda buat Folder dengan nama style Lalu buat file dengan nama
form.css
Setelah itu silahkan anda copy syntax CSS Di bawah ini lalu anda masukan Syntaxnya kedalam File form.css.
body {
background-image:url(../img/bg.jpg); /* Ini background bisa anda ganti */
background-size:cover;
margin:0;
padding:0;
}
#form {
padding:20px 20px 20px;
background:rgba(50, 50, 50, 0.8);
width:350px;
color:#22d87a;
margin-top:180px;
margin-left:450px;
border-radius:10px;
box-shadow:0px 0px 20px;
}
.isi {
text-align:center;
}
.isi p {
font-size:25px;
color:#00f6fa;
font-weight:bold;
text-shadow:0px 0px 10px;
}
input {
background:rgba(41, 80, 32, 0.5);
border-radius:5px;
width:170px;
color:white;
font-size:13px;
padding:5px;
border:1.5px solid #3d7830;
transition:all .40s linear;
}
input:hover {
background:rgba(41, 80, 32, 0.3);
transition:all .40s linear;
}
.login {
background:green;
width:80px;
font-weight:bold;
transition:all .40s linear;
border:1.5px solid #22d825;
}
.login:hover {
background:rgba(34, 216, 37, 0.6);
cursor:pointer;
transition:all .40s linear;
}
td {
padding:10px;
color:#FFF;
}Silahkan anda Pastekan, Jika ingin bertanya - tanya dapat menghubungi saya di Contact List.
Mungkin segitu yang saya bisa Share, ingin Foldernya ? nanti akan saya Upload tapi lain waktu :v
View Previous Post "Create Form Login [Part 1]" or View Next Post "Create File Config [Part 2]"
Semoga bermanfaat 😃
Sekian dan terimakasih. 😊
Tags
Tutorial