Saturday, April 29, 2017

Membuat Kotak Galeri

     No comments
HALAMAN khusus galeri, gambar, atau image diperlukan bagi blog toko online untuk menampilkan koleksi produk atau barang jualan.
Web pribadi juga bisa membuat halaman statis berisi galeri atau koleksi gambar pilihan.
Cara membuatnya cukup mudah, dan biasanya masalah yang sering ditemui jika kita memasukkan gambar lebih dari satu, maka posisi gambar tidak akan sejajar horizontal, tapi akan berderet vertikal.
Tutorial kali ini saya akan membagikan solusinya, mau tau ?
copas kode dibawah :





<html>

<head>


<title>Galeri</title>


<style type="text/css">


<!--


* {


margin: 0;


padding: 0;


}




body {


background: #333;


}




div {


width: 900px;


margin: 0 auto;


overflow: auto;


}




ul {


list-style-type: none;


}




li img {


float: left;


margin: 10px;


border: 5px solid #fff;




-webkit-transition: box-shadow 0.5s ease;


-moz-transition: box-shadow 0.5s ease;


-o-transition: box-shadow 0.5s ease;


-ms-transition: box-shadow 0.5s ease;


transition: box-shadow 0.5s ease;


}




li img:hover {


-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 


box-shadow: 0px 0px 7px rgba(255,255,255,0.9);


}


-->


</style>


</head>


<body>


<div>


<ul>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


</ul>


</div>


</body>


</html>

Jadinya bakal seperti gambar


Semoga Bermanfaat !

Menu Vertikal Dengan Gambar

     No comments
Dalam membangun sebuah web, menu memiliki peran yang sangat penting, selain mempermudah mencari artikel atau info dari sebuah web yang dituju, menu juga berperan mempercantik halaman web.
Disini saya akan membuat menu navigasi vertikal disertai dengan gambar.
kodenya dibawah, langsung copas aja biar cepat, hehehehee...





<html><head>



<title>Menu Dengan Gambar</title>



<style type="text/css">



<!--



* {margin: 0; padding: 0;}





div {



margin: 20px;



}





ul {



list-style-type: none;



width: 500px;



}





h3 {



font: bold 20px/1.5 Helvetica, Verdana, sans-serif;



}





li img {



float: left;



margin: 0 15px 0 0;



}





li p {



font: 200 12px/1.5 Georgia, Times New Roman, serif;



}





li {



padding: 10px;



overflow: auto;



}





li:hover {



background: #eee;



cursor: pointer;



}



-->



</style>



</head>



<body>



<div>



<ul>



<li>



<img src="1.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="2.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="3.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="4.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>



</ul>



</div>



</body>



</html>

kalau copasnya benar gambarnya bakal begini nih

  OKE.........


Membuat Menu Navigasi Vertikal Sederhana

     No comments
Pada sebuah web perlu adanya menu navigasi guna untuk mempermudah user atau pengguna dalam mencari artikel dala halaman web yang dituju, tanpa adanya menu user akan mengalamai kesulitan mendapatkan info atau artikel yang dicari.
Nah, disini saya akan berbagi sedikit tutorial membuat menu navigasi vertikal yang sederhana dan semoga saja bermanfaat bagi agan yang membaca tutorial ini.
kodenya sebagai berikut :





<html><head>



<title>Menu Navigasi Sederhana</title>



<style type="text/css">



<!--



div {



width: 200px;



}





h2 {



font: 400 40px/1.5 Helvetica, Verdana, sans-serif;



margin: 0;



padding: 0;



}





ul {



list-style-type: none;



margin: 0;



padding: 0;



}





li {



font: 200 20px/1.5 Helvetica, Verdana, sans-serif;



border-bottom: 1px solid #ccc;



}





li:last-child {



border: none;



}





li a {



text-decoration: none;



color: #000;



display: block;



width: 200px;





-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;



-moz-transition: font-size 0.3s ease, background-color 0.3s ease;



-o-transition: font-size 0.3s ease, background-color 0.3s ease;



-ms-transition: font-size 0.3s ease, background-color 0.3s ease;



transition: font-size 0.3s ease, background-color 0.3s ease;



}





li a:hover {



font-size: 30px;



background: #f6f6f6;



}





-->



</style>



</head>



<body>



<div>



<h2>Navigasi Vertikal Sederhana</h2>



<ul>



<li><a href="#">Menu 1</a></li>



<li><a href="#">Menu 2</a></li>



<li><a href="#">Menu 3</a></li>



<li><a href="#">Menu 4</a></li>



<li><a href="#">Menu 5</a></li>



</ul>



</div>



</body>



</html>

kalau sudah  dicopas dan disimpan dengan benar maka tampilannya akan seperti gambar dibawah :


Thursday, April 13, 2017

Membuat CardFan Pada Image Dengan CSS

     No comments
Animasi dalam sebuag website itu sangatlah penting untuk membuat content web lebih interaktif , terlebih lagi animasi yang digunakan sangat menarik, misalnya slider, pop up gambar dan juga animasi-animasi lainnya. Tapi, dikesempatan kali ini saya akan berbagi trik membuat cardfan pada gambar, itu seperti membuat latar gambar dibalik gambar. Contoh seperti pada gambar :


Untuk kodingnya tidak terlalu panjang dan ribet, kodingnya dibawah :





<!doctype html>



<html><head>



<title>Cardfan</title>



<style type="text/css">



<!--



#cardfan, #cardfan img { width: 400px; height: 350px; }



#cardfan { margin: 0 auto; }



#cardfan img { border: 32px solid #ffe;



box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);



position: absolute;



transform-origin: center 300px;



}



#cardfan:hover img:first-child {



transform: rotate(25deg);



}



#cardfan:hover img:last-child {



transform: rotate(−25deg);



}



-->



</style>



</head>



<body>



<div id="cardfan">



<img src="gambar agan. disini" alt="terserah agan">



<img src="gambara agan disini" alt="terserah agan">



</div>



</body>



</html>

Catatan:
Untuk tulisan berwarna merah ganti dengan nama gambar yang ingin ditampilkan
misalnya, /image/gambar.jpg

Selamat mencoba dan semoga berhasil !

Wednesday, April 12, 2017

Membuat Tabel Keren Dengan Caption

     No comments
Pada tutorial kali ini saya akan membagikan contoh membuat tabel sederhana yang mudah dipahami struktur syntaxnya. Untuk membuat membuat desain tabel ini silahkan ikuti langkah-langkah berikut :



kode CSS :
table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}
caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}

caption h2 { font-size: 20px;

             margin: 0 0 10px 0;

}

caption p { font-size: 16px;

            margin: 0;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

#kuantitas-column { width: 200px;

}

#harga-column { background: #ddd;

}

kode html : 

<body>



<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>
</body>
karena css nya tidak banyak sebaiknya diibuat dalam satu file saja agar tidak terlalu banyak membuat file pada directory

untuk kode lengkapnya :

<!doctype html>

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

<title>Tabel Keren Dengan Caption</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}



caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}
caption h2 { font-size: 20px;
    margin: 0 0 10px 0;

}
caption p { font-size: 16px;
          margin: 0;

}
thead th,
tfoot th,
tfoot td { background: #eee;
}
th, td { padding: 10px;
}
thead th:first-child {
  text-align: left;
}
tbody th,
tfoot th { text-align: left;
}
#kuantitas-column { width: 200px;
}
#harga-column { background: #ddd;
}
-->

</style>

</head>

<body>

<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>
</html>

setelah semua telah selesai maka akan menghasilkan tampilan seperti pada gambar


Selamat mencoba dan semoga bermanfaat !

Tuesday, April 11, 2017

Menampilkan Value Combobox Dengan Javascript

     No comments
Combobox memiliki banyak manfaat salah satunya untuk menampilkan data saat kita klik,
Langsung saja ke koding, dibawah ini :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
 
<script>
function tampilkan(){
 
  var nama_data=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");
 
  if (nama_data=="my web1")
    {
        p_kontainer.innerHTML="Klik untuk melihat <a target='_blank' onclick='new windows' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }
  else if (nama_data=="my web2")
    {
        p_kontainer.innerHTML="Klik untuk <a target='_blank' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }
  else if (nama_data=="my web3")
    {
        p_kontainer.innerHTML="Klik disini <a target='_blank' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }else{
  p_kontainer.innerhtml="";
 }
}
</script>
</head>
<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>
 
<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih : </label>
  <select id="select1" name="select1" onclick="tampilkan()">
 <option value="">Pilih
    <option value="my web1">My Website</option>
    <option value="my web2">My Website</option>
    <option value="my web3">My Website</option>
  </select>
  
</form>
 
<p id="container"></p>
 
</body>
</html>

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>

Tuesday, April 4, 2017

Membuat Tabel Keren dengan HTML dan CSS

     No comments
Pada tutorial kali ini saya akan membuat Tabel pada HTML dengan CSS.

Berikut adalah tampilan gambar dari tutorial ini :


Langsung saja elemen css dibawah ini :
<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { border: 1px solid #ccc;

         padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

tbody tr:nth-child( even ) {

  background: #ddd;

}

-->


dan berikut adalah kode untuk tabel standar :

<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

dan untuk kode lengkapnya :

<html>

<head>

<title>Tabel Keren dengan CSS</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}



thead th,

tfoot th,

tfoot td { background: #eee;

}



th, td { border: 1px solid #ccc;

         padding: 10px;

}



thead th:first-child {

  text-align: left;

}



tbody th,

tfoot th { text-align: left;

}



tbody tr:nth-child( even ) {

  background: #ddd;

}

-->

</style>

</head>

<body>



<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>

</html>