Cara Membuat Form Transparant dengan CSS
Cara Membuat Form Transparant dengan CSS
Kali ini saya akan menbagikan pengalaman saya membuat form transparant, dulu saya sulit sekali memahami yang namanya bahasa HTML apa lagi yang namanya CSS. Nah, ternyata kalo kita sudah paham sebenarnya semua itu tidak lah sulit bahkan termasuk mudah, karena ini html dan CSS itu adalah bahasa pemrograman web yang paling dasar dan paling mudah di pahami. Jadi, kalo sobat gak baca artikel ini sampai selesai, maka sia-sia sobat membuat web saya, karena gak akan paham sama sekali. Ok karena saya tidak terlalu bisa untuk berbasa-basi, langsung saja simak cuplikan tulisan dibawah ini.
Nama file (form_transparant.html)
Sintaknya :
Kemudian coba jalankan dulu file form_transparant pada browser, kemudian sobat bikin sebuah file CSS lagi seperti dibawah ini:
Nama file (style.css)
Sintaksnya :
Selanjutnya coba sobat reload file form_transparant.html yang ada pada browser. Kali tampilannya seperti gambar dibawah ini maka skrip yang sobat buat sudah benar.
Catatan :
Pada text di atas ada yang telas saya tandai, ada yang dengan warna merah, kuning dan hijau. Dari sini saya akan jelaskan warna-warna itu.
1. Warna merah yang tulisannya seperti ini <link rel="stylesheet" type="text/css" href="style.css"> yang terdapat pada file form_transparant.html, gunanya untuk menghubungkan file style.css dengan form_transparant.html. Jadi, kalo gak dikasih Tag LINK seperti diatas maka style.css gak akan terbaca pada file form_transparant.html karena tidak terhubung.
2. Warna kuning pada class=”form” , gunanya untuk memberikan style atau mensetting class form dan di depannya menggunakan titik( . ).
3. Warna hijau pada id=”input” ,gunanya untuk memberikan style atau mensetting id input dan untuk mensettingnya menggunakan tanda pagar( # ).
Jadi kalo kita menggunakan yang namanya class, maka pada style-nya kita menggunakan titik(.) sedangkan kalo kita menggunakan yang namanya id, maka pada style-nya kita menggunakan tanda pagar (#). Dan kalo tidak menggunakan kedua-duanya tapi langsung nama elemennya, maka itu untuk mensetting seluruh elemen dengan nama element yang sama. Jadi kalo kita menggunakan class atau id, itu gunanya hanya untuk mensetting element yang telah ditandai saja, kalo ada element yang sama ya gak akan iku ke setting.
Demikian postingan tentang “Cara Membuat Form Transparant dengan CSS”. Semoga tulisan diatas bermanfaat dan mudah untuk dipahami. Kalo sobat belum paham juga sobat bisa lihat langsung video dibawah ini untuk lebih jelasnya.
Sekian dan Terimakasih...
Kali ini saya akan menbagikan pengalaman saya membuat form transparant, dulu saya sulit sekali memahami yang namanya bahasa HTML apa lagi yang namanya CSS. Nah, ternyata kalo kita sudah paham sebenarnya semua itu tidak lah sulit bahkan termasuk mudah, karena ini html dan CSS itu adalah bahasa pemrograman web yang paling dasar dan paling mudah di pahami. Jadi, kalo sobat gak baca artikel ini sampai selesai, maka sia-sia sobat membuat web saya, karena gak akan paham sama sekali. Ok karena saya tidak terlalu bisa untuk berbasa-basi, langsung saja simak cuplikan tulisan dibawah ini.
Sintaknya :
<html>
<head><title> Member Login Transparant</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="form">
<h1>Member Login</h1>
<center><img src="01.png"></center>
<form method="POST" action="#">
<input id="input" type="text" name="nama" placeholder="Username" >
<input id="input" type="password" name="pass" placeholder="Password">
<input id="input" type="submit" value="Login">
</form>
</div>
</body>
</html>
Kemudian coba jalankan dulu file form_transparant pada browser, kemudian sobat bikin sebuah file CSS lagi seperti dibawah ini:
Nama file (style.css)
Sintaksnya :
body{
background-image:url('02.jpg');
}
.form{
background:rgba(0, 0, 0, 0.39);
box-shadow: 0px 0px 20px 6px;
border-radius:5px;
width:300px;
margin:15px auto;
padding:20px;
}
.form h1{
color:#eee;
text-align:center;
}
.form img{
width:200px;
}
#input{
background: rgba(23, 20, 20, 0.52);
font-size:12pt;
font-family:arial;
color:#eee;
width:100%;
height:40px;
padding:5px 5px 5px 10px;
margin:3px;
border-radius:3px;
border:none;
}
#input[type="submit"]{
background:rgba(31, 15, 2, 0.78);
color:#fff;
cursor:pointer;
}
#input:hover, #input:focus{
background:rgba(97, 52, 13, 0.55);
outline-style:none;
}
#input[type="submit"]:hover, #input[type="submit"]:focus{
background:rgba(31, 15, 2, 0.78);
}
Selanjutnya coba sobat reload file form_transparant.html yang ada pada browser. Kali tampilannya seperti gambar dibawah ini maka skrip yang sobat buat sudah benar.
Catatan :
Pada text di atas ada yang telas saya tandai, ada yang dengan warna merah, kuning dan hijau. Dari sini saya akan jelaskan warna-warna itu.
1. Warna merah yang tulisannya seperti ini <link rel="stylesheet" type="text/css" href="style.css"> yang terdapat pada file form_transparant.html, gunanya untuk menghubungkan file style.css dengan form_transparant.html. Jadi, kalo gak dikasih Tag LINK seperti diatas maka style.css gak akan terbaca pada file form_transparant.html karena tidak terhubung.
2. Warna kuning pada class=”form” , gunanya untuk memberikan style atau mensetting class form dan di depannya menggunakan titik( . ).
3. Warna hijau pada id=”input” ,gunanya untuk memberikan style atau mensetting id input dan untuk mensettingnya menggunakan tanda pagar( # ).
Jadi kalo kita menggunakan yang namanya class, maka pada style-nya kita menggunakan titik(.) sedangkan kalo kita menggunakan yang namanya id, maka pada style-nya kita menggunakan tanda pagar (#). Dan kalo tidak menggunakan kedua-duanya tapi langsung nama elemennya, maka itu untuk mensetting seluruh elemen dengan nama element yang sama. Jadi kalo kita menggunakan class atau id, itu gunanya hanya untuk mensetting element yang telah ditandai saja, kalo ada element yang sama ya gak akan iku ke setting.
Demikian postingan tentang “Cara Membuat Form Transparant dengan CSS”. Semoga tulisan diatas bermanfaat dan mudah untuk dipahami. Kalo sobat belum paham juga sobat bisa lihat langsung video dibawah ini untuk lebih jelasnya.
Sekian dan Terimakasih...
sangat bermanfaat ilmunya min.
BalasHapus