Home Tugas Desain Web 1B Membuat Form Login CSS

Membuat Form Login CSS

Desember 14, 2018
Read
Assalamualaikum wr. wb.
   kali ini saya akan bagi bagi ilmu lagi yang saya telah terima di bangku perkuliahan di Matakuliah Desain Web, dan kali ini saya akan praktikan bagaimana cara mendesain web sederhana berbekal CSS.
Ini adalah Script Cssnya Style1:
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    background: #c0c0c0;
}

div.konten{
    background: #ffffff;
    width: 350px;
    margin: 222px auto 0;
    border-radius: 16px;
    min-height: 256px;
    overflow: hidden;
}

div.kepala{
    background: #f85252;
    padding: 10px 22px;
    height: 60px;
}

div.kepala h2.judul{
    color: #fff;
    font-weight: normal;
    line-height: 40px;
    display: inline-block;
}

div.lock{
    background-image: url("lock.png");
    background-position: center;
    background-size: 38px;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-top: 8px;
    float: left;
    margin-right: 10px;
}

div.artikel{
    padding:10px 22px 0;
    color: #808080;
}

div.artikel div.grup{
    margin: 16px 0;
}

div.artikel div.grup label,
div.artikel div.grup input{
    display: block;
}

div.artikel div.grup label{
    font-size: 13px;
    margin-bottom: 10px;
}

div.artikel div.grup input[type="text"],
div.artikel div.grup input[type="password"]{
    width: 100%;
    height: 30px;
    padding: 0 10px;
    background: #eeeeee;
    border:none;
    color: #808080;
}

div.artikel div.grup input[type="submit"]{

  background: #33cd77;
    padding: 4px 16px;
    margin: 0 auto;
    border: 1px solid #33cd77;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
}

div.artikel div.grup input[type="submit"]:hover{
    background: #28a45e;
}


 Ini adalah Script Cssnya Style2:
  *{ 
  padding: 0px; 
  margin: 0px; 
} 

#utama { 
background-image: url("html.PNG"); 
background-size: cover; 
height: 680px; 
} 

.header_isi { 
  width: 335px; 
  height: 230px; 
  padding: 180px 0px 90px 480px; 
} 

.gambar { 
  background-color: rgba(0,0,204,0.4); 
  height: 350px; 
  border: 0px solid rgba(0,0,204,0.1); 
} 

img { 
  width: 100px; 
  height: 100px; 
  margin-left: 120px; 
  margin-top: 10px; 
} 

.login_regis { 
  height: 40px; 
  width: 260px; 
  text-align: center; 
  color: white; 
  font-size: 17px; 
  border-radius: 8px; 
  background-color: rgba(225, 255, 255, 0.4); 
  border: 3px solid #c1c123; 
  margin-left: 42px; 
  margin-top: 10px; 
} 

.tombol_login { 
  width: 260px; 
  height: 30px; 
  text-align: center; 
  background-color: #0288D1; 
  color: white; 
  font-size: 17px; 
  border: 2px solid #0288D1; 
  border-radius: 8px; 
  margin-top: 20px; 
  margin-left: 42px; 
} 

.chexbox { 
  font-size: 15px; 
  color: white; 
  margin-left: 45px; 
  margin-top: 10px; 
} 

.login_regis:hover { 
  border: 3px solid #fff; 
} 

.tombol_login:hover { 
  background-color: white; 
  color: #0288D1; 
  border: 2px solid white; 
} 

.copyright { 
  margin-top: 150px; 
  color: #F0f0f0; 
  font-size: 17px; 
  margin-left: 10px; 
} 

a { 
  text-decoration: none; 
  color: black; 
} 

.copyright a { 
  color: #0288D1; 
}



Disini Saya memakai Syle2

Ini adalah Script HTMLnya :

  <html> 
  <head> 
    <title> Form Login Type 1 </title> 
    <link href="style2.css" rel="stylesheet" type="text/css" > 
  </head> 

  <body> 
    <div id="utama"> 

      <div class="header"> 

        <div class="header_isi"> 

          <div class="gambar"> 

            <form action="login.php" method="POST"> 
              <img src="icon.png" ><br /><br />
              <text align="center"><p><h2>ACCOUNT</h2></p></text> 

              <input type="text" name="username" placeholder="Username" class="login_regis">     <br /> 
              <input type="password" name="password" placeholder="Password" class="login_regis"> <br /> 

            <div class="chexbox"> 
              <input type="checkbox" name="chek" > Remember me <br /> 
            </div> 

              <input type="Submit" name="login" value="LOGIN" class="tombol_login"> 
            </form> 

        </div> 

      </div> 

      <div class="copyright"> 
        Create By: Septian Harun
      </div> 
    </div> 
  </body> 
</html>


Dan Inilah Hasil Saya :


Pada pebuatan form login kita perlu beberapa Tag, saya akan menguraikan tag-tag nya di bawah beserta fungsi-fungsinya  ⇣ 
  • Tag form : berfungsi untuk menginput data-data-data
  • Tag div : berfungsi untuk mengelompokan data-data 
  • Tag image : untuk mendeskripsikan gambar
  • Tag span : sama dengan fungsi tag div, mengelompokkan juga.
  • Tag button : untuk mendeskripsikan gambar

     di dalam tag-tag diatas kita isi dengan atribut class, yang berfungsi sebagai penanda yang akan kita hias di CSS nanti.
     Didalam CSS ada 3 komponen yaitu, selector-properti-nilai. Selector, bisa tag HTML, atau class yang di dalam tag html. Saya akan menjelaskan properti saja yang ada dalam css yang di pakai untuk menghias form login di atas. 
   ada beberapa properti yaitu : 
  • Color : untuk mewarnai
  • text-align : untuk mengatur letak teks
  • font-family : untuk menentukan jenis font yang akan kita pakai
  • text-transform : untuk mengubah huruf
  • border : mengatur ketebalan tabel
  • width : mengatur panjang teks
  • Margin : mengatur posisi atas,bawah,kiri,kanan.
  • Panding : sama seperti margin

Oke itulah tadi tutorial mempercantik halaman form login menggunakan sentuhan CSS, semoga bermanfaat bagi saya dan juga pembaca, aminn. Sekian dulu tutorial dari saya, sampai ketemu di postingan selanjutnya.
Tags :

Tidak ada komentar:

Biasakan Mengomentari Dengan Pemikiran Yang Dewasa :)

Langganan: Posting Komentar ( Atom )

Favorit

Cara Membuat Karakter (Wajah) Di Corel Draw

Assalamua'laikum Warrahmatullahi Wabarakathu, Kembali Lagi Bersama Saya Septian Harun Kali Ini Saya akan membagikan tutorial membuat ka...

Diberdayakan oleh Blogger.