Tuesday, April 11, 2017

Membuat Form Login Keren Dengan HTML dan CSS

     No comments
Dalam pemebuatan sebuah web perlu form login untuk membedakan user dengan admin, untuk itu perlu form yang keren dan enak dilihat mata serta simple.
langsung saja ke koding css nya sebagai berikut :

<!--
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
  background: #2d4259;
}

.register-judul {
  width: 270px;
  line-height: 43px;
  margin: 50px auto 20px;
  font-size: 19px;
  font-weight: 500;
  color: white;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background: #d7604b;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);
  background-image: -moz-linear-gradient(top, #dc745e, #d45742);
  background-image: -o-linear-gradient(top, #dc745e, #d45742);
  background-image: linear-gradient(to bottom, #dc745e, #d45742);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.register {
  margin: 0 auto;
  width: 230px;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.register-masukan {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: 2px;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
}
.register-masukan:focus {
  border-color: #1e9ce6;
  outline: 0;
}

.register-tombol {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 25px;
  font-size: 16px;
  font-weight: bold;
  color: #494d59;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: #fcfcfc;
  border: 1px solid;
  border-color: #d8d8d8 #d1d1d1 #c3c3c3;
  border-radius: 2px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
}

.register-tombol:active {
  background: #eee;
  border-color: #c3c3c3 #d1d1d1 #d8d8d8;
  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
}

.register-tombol:focus {
  outline: 0;
}

.register-tukar {
  height: 32px;
  margin-bottom: 15px;
  padding: 4px;
  background: #6db244;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);
  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
}

.register-tukar-input {
  display: none;
}

.register-tukar-label {
  float: left;
  width: 50%;
  line-height: 32px;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.register-tukar-input:checked + .register-tukar-label {
  font-weight: 500;
  color: #434248;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: white;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

:-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}

::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #aaa;
  font-weight: 300;
}

:-ms-input-placeholder {
  color: #aaa;
  font-weight: 300;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

-->


dan untuk koding htmlnya dibawah ini : 

<body>
  <h1 class="register-judul">Selamat Datang</h1>
  <form class="register" action="" method="post">
    <!--div class="register-tukar">
      <input type="radio" name="web" value="GPIB EKKLESIA DUMAI" id="gpib" class="register-tukar-input" checked>
      <label for="gpib" class="register-tukar-label">GPIB</label>
      <input type="radio" name="web" value="APRIL YANTONIUS SIHURA" id="aprilucyanto" class="register-tukar-input">
      <label for="aprilucyanto" class="register-tukar-label">YANTONIUS S.</label>
    </div-->
    <input type="email" class="register-masukan" placeholder="Alamat Email">
    <input type="password" class="register-masukan" placeholder="Password">
    <input type="submit" value="Login" class="register-tombol">
  </form>
</body>


Kalau Untuk kode Lengkapnya :

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>contoh css 8.1</title>

<style type="text/css">

<!--

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block;

}



body {

  line-height: 1;

}



ol, ul {

  list-style: none;

}



blockquote, q {

  quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



body {

  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;

  color: #404040;

  background: #2d4259;

}



.register-judul {

  width: 270px;

  line-height: 43px;

  margin: 50px auto 20px;

  font-size: 19px;

  font-weight: 500;

  color: white;

  color: rgba(255, 255, 255, 0.95);

  text-align: center;

  text-shadow: 0 1px rgba(0, 0, 0, 0.3);

  background: #d7604b;

  border-radius: 3px;

  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);

  background-image: -moz-linear-gradient(top, #dc745e, #d45742);

  background-image: -o-linear-gradient(top, #dc745e, #d45742);

  background-image: linear-gradient(to bottom, #dc745e, #d45742);

  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

}



.register {

  margin: 0 auto;

  width: 230px;

  padding: 20px;

  background: #f4f4f4;

  border-radius: 3px;

  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

}



input {

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.register-masukan {

  display: block;

  width: 100%;

  height: 38px;

  margin-top: 2px;

  font-weight: 500;

  background: none;

  border: 0;

  border-bottom: 1px solid #d8d8d8;

}

.register-masukan:focus {

  border-color: #1e9ce6;

  outline: 0;

}



.register-tombol {

  display: block;

  width: 100%;

  height: 42px;

  margin-top: 25px;

  font-size: 16px;

  font-weight: bold;

  color: #494d59;

  text-align: center;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

  background: #fcfcfc;

  border: 1px solid;

  border-color: #d8d8d8 #d1d1d1 #c3c3c3;

  border-radius: 2px;

  cursor: pointer;

  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);

  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);

  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);

  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);

}



.register-tombol:active {

  background: #eee;

  border-color: #c3c3c3 #d1d1d1 #d8d8d8;

  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);

  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);

}



.register-tombol:focus {

  outline: 0;

}



.register-tukar {

  height: 32px;

  margin-bottom: 15px;

  padding: 4px;

  background: #6db244;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);

  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);

  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);

  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);

  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);

}



.register-tukar-input {

  display: none;

}



.register-tukar-label {

  float: left;

  width: 50%;

  line-height: 32px;

  color: white;

  text-align: center;

  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);

  cursor: pointer;

}



.register-tukar-input:checked + .register-tukar-label {

  font-weight: 500;

  color: #434248;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

  background: white;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);

  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);

}



:-moz-placeholder {

  color: #aaa;

  font-weight: 300;

}



::-moz-placeholder {

  color: #aaa;

  font-weight: 300;

  opacity: 1;

}



::-webkit-input-placeholder {

  color: #aaa;

  font-weight: 300;

}



:-ms-input-placeholder {

  color: #aaa;

  font-weight: 300;

}



::-moz-focus-inner {

  border: 0;

  padding: 0;

}



-->

</style>

</head>

<body>

  <h1 class="register-judul">Selamat Datang</h1>

  <form class="register" action="" method="post">

    <!--div class="register-tukar">

      <input type="radio" name="web" value="GPIB EKKLESIA DUMAI" id="gpib" class="register-tukar-input" checked>

      <label for="gpib" class="register-tukar-label">GPIB</label>

      <input type="radio" name="web" value="APRIL YANTONIUS SIHURA" id="aprilucyanto" class="register-tukar-input">

      <label for="aprilucyanto" class="register-tukar-label">YANTONIUS S.</label>

    </div-->

    <input type="email" class="register-masukan" placeholder="Alamat Email">

    <input type="password" class="register-masukan" placeholder="Password">

    <input type="submit" value="Login" class="register-tombol">

  </form>

</body>

</html>

Related Posts:

  • Menu Vertikal Dengan GambarDalam membangun sebuah web, menu memiliki peran yang sangat penting, selain mempermudah mencari artikel atau info dari sebuah web yang dituju, menu ju… Read More
  • Membuat Kotak GaleriHALAMAN khusus galeri, gambar, atau image diperlukan bagi blog toko online untuk menampilkan koleksi produk atau barang jualan. Web pribadi… Read More
  • Menampilkan Value Combobox Dengan JavascriptCombobox memiliki banyak manfaat salah satunya untuk menampilkan data saat kita klik, Langsung saja ke koding, dibawah ini : <!DOCTYPE html> &l… Read More
  • Membuat Menu HorizontalCara yang paling sederhana untuk membuat menu horizontal dengan menggunakan list ialah mengubah properti display dari elemen li menjadi bernilai inlin… Read More
  • Cara Membuat Menu NavigasiList sebagia Menu Membuat sebuah website yang terdiri dari beberapa atau banyak halaman. Untuk mempermudah pengguna dalam melakukan navigasi pada web… Read More

0 comments:

Post a Comment