Membuat Menu Dropdown Dengan CSS

Dalam sebuah aplikasi berbasis web atau website kita sangat membutuhkan yang namanya menu, karena dengan adanya menu di aplikasi yang kita buat dapat memudahkan user / pengguna untuk pergi ke halaman yang diinginkan.

Pada kesempatan kali ini kita akan mencoba membuat contoh pembuatan menu dropdown yang sederhana dengan bantuan CSS. Pertama buatlah tag list HTML seperti berikut

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a></li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
  <li><a href="#">Tentang Kami</a></li>
</ul>

Pada kode diatas akan terbentuk 5 buah menu. Jika kita menginginkan submenu atau anak dari menu diatas kita tambahkan tag list baru di dalam list yang tadi kita buat, seperti berikut,

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a>
     <ul>
          <li><a href="#">Mancanegara</a></li>
          <li><a href="#">Nasional</a></li>
          <li><a href="#">Olahraga</a></li>
     </ul>
 </li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
  <li><a href="#">Tentang Kami</a></li>
</ul>

Setelah kode html tadi kita buat, saatnya kita menambahkan CSS untuk membuat list tadi menjadi menu yang kita inginkan. Sebagai contoh tuliskan sintak CSS seperti berikut

#menu{

   padding: 0;

}

#menu li{

  float: left;
  background: #4679BD;
  border: 1px solid #939C8A;
  list-style-type: none;

}

#menu li ul{

   display: none;

}

 #menu li a{

    text-decoration: none;

    display: block;

    padding: 10px;

    color: #edffec;

    font-family: tahoma;

}

#menu li a:hover{

   background: black;

}

#menu li:hover ul{

   display: block;

   position: absolute;

}

#menu li:hover li{

   float: none;

}

#menu li ul{

   padding: 0px;

}

Setelah dibuatkan CSS nya seperti diatas, maka hasilnya akan seperti gambar berikut,

Untuk lebih jelas bisa lihat contoh pada link berikut

Baca Selengkapnya »

Membuat Validasi Form Dengan HTML5

Pada artikel sebelumnya sudah dibahas mengenai pembuatan validasi form dengan jquery, dan pada artikel ini juga akan dibahas pembuatan validasi form hanya saja tidak menggunakan jquery tetapi menggunakan HTML5. Berikut beberapa validasi yang akan kita terapkan pada inputan form :


1. Validasi inputan harus terisi (required)
Pada aturan ini, inputan tidak boleh kosong dan harus diisi. Pada HTML5 kita hanya cukup menambahkan property required="required" atau cukup dengan required seperti contoh berikut,


<form>
  Nama : <input type="text" required="required" /><br />
  Nama Kecil : <input type="text" required /><br />
  <input type="submit" value="Submit now" />
</form>

2. Validasi penulisan email
Agar pengimputan alamat email yang dilakukan user sesuai maka pada HTML5 kita cukup tambahkan atribut type="email" seperti contoh berikut,

<form>
  Email : <input type="email" /><br />
  <input type="submit" value="Submit now" />
</form>


Selain menambahkan atribut diatas, kita juga bisa menggunakan patern seperti berikut,

<form>
  Email : <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" /><br />
  <input type="submit" value="Submit now" />
</form>

3. Validasi penulisan URL
Agar penulisan link atau URL sesuai, maka pada HTML5 kita tambahkan atribut type="url" seperti contoh berikut,

<form>
  Link : <input type="url" /><br />
  <input type="submit" value="Submit now" />
</form>

4. Validasi number telepon
Untuk penulisan inputan no telp sesuai, pada HTML5 kita bisa tambahkan attribut type="tel"  seperti berikut,

 <form>
  No. Telepon: <input type="tel" /><br />
  <input type="submit" value="Submit now" />
</form>

5. Validasi penulisan tanggal
Untuk penulisan tanggal pada HTML5 kita bisa menggunakan atau menambahkan attribut type="date" seperti berikut,


<form>
  Tanggal Lahir : <input type="date" /><br />
  <input type="submit" value="Submit now" />
</form>

Untuk melihat contoh keseluruhan validasi diatas, bisa dilihat pada link Berikut.

Semoga bermanfaat ...!!

Baca Selengkapnya »

Membuat Table Menggunakan DIV

Brikut contoh pembuatan table tanpa menggunakan tag HTML <table> melainkan menggunakan tag <div>.

Buatlah tag HTML seperti berikut :

<div class="divTable">
    <div class="divTableRow">
        <div class="divTableCellhd">Judul 1</div>
        <div class="divTableCellhd">Judul 2</div>
        <div class="divTableCellhd">Judul 3</div>
        <div class="divTableCellhd">Judul 4</div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell">Isi baris 1 kolom 1</div>
        <div class="divTableCell">Isi baris 1 kolom 2</div>
        <div class="divTableCell">Isi baris 1 kolom 3</div>
        <div class="divTableCell">Isi baris 1 kolom 4</div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell">Isi baris 2 kolom 1</div>
        <div class="divTableCell">Isi baris 2 kolom 2</div>
        <div class="divTableCell">Isi baris 2 kolom 3</div>
        <div class="divTableCell">Isi baris 2 kolom 4</a>

        </div>
    </div>
    <div class="divTableRow">
        <div class="divTableCell">Isi baris 3 kolom 1</div>
        <div class="divTableCell">Isi baris 3 kolom 2</div>
        <div class="divTableCell">Isi baris 3 kolom 3</div>
        <div class="divTableCell">Isi baris 3 kolom 4</div>
    </div>
</div> 

Selanjutnya buat style CSS nya,

.divTable {
    width: 100%;
    display: table;
    -webkit-box-shadow: 1px 1px 1px 1px #888888;
    box-shadow: 1px 1px 1px 1px #888888;
}
.divTableRow {
    width: 100%;
    height: 100%;
    display: table-row;
}
.divTableCell {
    padding:5px;
    width: 25%;
    height: 100%;
    display: table-cell;
    border: 1px solid #808080;
}
.divTableCellhd {
    background-color: #4a6b82;
    color: #fff;
    padding:5px;
    width: 25%;
    height: 100%;
    display: table-cell;
    border: 1px solid #808080;
}
.divTable .divTableRow:nth-child(odd) {
    background-color: #aad4ff;
}
.divTable .divTableRow:hover {
   background-color: #FBEDBB;
} 

Untuk demonya bisa di buka disini

Semoga bermanfaat..

Baca Selengkapnya »

Membuat Button Menarik Dengan CSS

Pada artikel ini kita akan membuat suatu button yang cukup menarik tidak hanya text tetapi ada image nya juga, seperti gambar berikut

Untuk membuat button seperti itu kita harus buat terlebih dahulu style CSS seperti berikut

.button
{      
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
 
.button:hover
{
background-color: #eee;      
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
 
.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
 
.button:focus
{
outline: 0;
background: #fafafa;
}  
 
.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;      
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;  
pointer-events: none;
}

/* Buttons and inputs */

button.button, input.button
{
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */
 button::-moz-focus-inner
{
border: 0;
padding: 0;
}

/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner
{
padding: .4em;
}
/* The disabled styles */
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
{
background: #eee;
color: #aaa;
border-color: #aaa;
cursor: default;
text-shadow: none;
position: static;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
 
/* Hexadecimal entities for the icons */
 
.add:before
{
content: "\271A";
}
 
.edit:before
{
content: "\270E";      
}
 
.delete:before
{
content: "\2718";      
}
 
.save:before
{
content: "\2714";      
}
 
.email:before
{
content: "\2709";      
}
 
.like:before
{
content: "\2764";      
}
 
.next:before
{
content: "\279C";
}
 
.star:before
{
content: "\2605";
}
 
.spark:before
{
content: "\2737";
}
 
.play:before
{
content: "\25B6";
}
/* Social media buttons */
.tw, .fb,
.tw:hover, .fb:hover
{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.tw, .tw:focus
{
background-color: #88E1E6;
}

.fb, .fb:focus
{
background-color: #3C5A98;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.tw:hover
{
background-color: #b1f0f3;
}

.fb:hover
{
background-color: #879bc3;
}

.tw:before
{
content: "t";
background: #91cfd3;
background: rgba(0,0,0,.1);
color: #fff;
font-family: verdana;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
 
.fb:before
{
content: "f";
background: #4467ac;
background: rgba(0,0,0,.1);
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}


Untuk memanggil atau menggunakan di HTML kita bisa gunakan script berikut

<a href="alamat link" class="button">Tombol</a>

Untuk membuat tombol yang berbeda baik itu image atau teks nya seperti pada gambar diatas kita bisa mengganti nama classnya seperti berikut :

<a href="#" class="button">Button</a>
<a href="#" class="button add">Add</a>
<a href="#" class="button edit">Edit</a>
<a href="#" class="button delete">Delete</a>
<a href="#" class="button save">Save</a>
<a href="#" class="button email">Send email</a>
<a href="#" class="button like">Like</a>
<a href="#" class="button next">Next</a>
<a href="#" class="button star">Favourite</a>
<a href="#" class="button spark">Spark</a>
<a href="#" class="button play">Play</a>
<a href="#" class="button tw">Follow me</a>
<a href="#" class="button fb">Become a fan</a>

Untuk melihat hasilnya, bisa dilihat pada link Berikut

Semoga mencoba.

Baca Selengkapnya »

Membuat Auto Slideshow Sederhana Dengan JQuery

Pada artikel ini akan dijelaskan bagaimana membuat slideshow yang berjalan secara otomatis dengan batuan JQuery. Untuk isi dari slideshow bisa berupa teks, gambar atau keduanya dan pada contoh ini kita hanya menggunakan teks.

Pertama tuliskan kode HTML untuk isi dari slideshownya seperti berikut

<div id="slideshow">
      <div>Isi dari slide 1</div>
      <div>Isi dari slide 2</div>
      <div>Isi dari slide 3</div>
</div> 

Buatlah style CSS

 #slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Terakhir buat script JQuery

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Untuk melihat hasil dari contoh diatas, bisa dilihat disini

Semoga bermanfaat..

Baca Selengkapnya »

Membuat PopUp dengan CSS3 Murni

Dalam pembuatan suatu web aplikasi kita sering sekali menggunakan popup / modal dalam menyampaikan informasi misalnya menampilkan informasi keberhasilan dalam menginput data, pengisian form untuk guest book, menampilkan informasi about me atau bisa juga digunakan dalam pencarian data.
Pada artikel ini akan di bahas mengenai pembuatan popup dengan CSS3 murni tanpa menggunakan script seperti javascript. Akan tetapi popup ini hanya akan berjalan pada browser-browser yang terbaru yang sudah support dengan CSS3 sehingga untuk browser yang lama atau jadul script ini tidak akan berfungsi. Untuk lebih jelasnya anda bisa mengikuti contoh berikut :

Pertama buat script HTML seperti berikut

<div id="closed"></div>
<a href="#popup" class="popup-link">Klik untuk memunculkan Popup</a>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<h2>Isi dari popup</h2>
<p>Ini adalah isi dari popup menggunakan CSS3 murni tanpa jquery atau javascript.</p>
<a class="popup-close" href="#closed">X</a>
</div>
</div>

Kemudian buat style CSS3

a.popup-link {
padding:17px 0;
text-align: center;
margin:7% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #eea900;
display: block;
}
a.popup-link:hover {
background-color: #ff9900;
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}
/* end link popup*//*style untuk popup */
#popup {
visibility: hidden;
opacity: 0;
margin-top: -200px;
}
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(255,255,255,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 99999999999;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #333;
color:#fff;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #fff;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#333;
}/* style untuk isi popup */.popup-form {
margin:10px auto;
}
.popup-form h2 {
margin-bottom: 5px;
font-size: 37px;
text-transform: uppercase;
}
.popup-form .input-group {
margin:10px auto;
}
.popup-form .input-group input {
padding:17px;
text-align: center;
margin-bottom: 10px;
border-radius:3px;
font-size: 16px;
display: block;
width: 100%;
}
.popup-form .input-group input:focus {
outline-color:#FB8833;
}
.popup-form .input-group input[type="email"] {
border:0px;
position: relative;
}
.popup-form .input-group input[type="submit"] {
background-color: #FB8833;
color: #fff;
border: 0;
cursor: pointer;
}
.popup-form .input-group input[type="submit"]:focus {
box-shadow: inset 0 3px 7px 3px #ea7722;
}

Setelah HTML dan CSS nya dibuat jalankan di browser dan lihat hasilnya. Untuk contoh diatas bisa dilihat di link Berikut

Selamat mencoba dan semoga bermanfaat.

Baca Selengkapnya »

Membuat Table Zebra Dengan CSS

Dalam membuat sebuah tabel kita biasanya menginginkan baris di table seperti zebra yaitu warna background baris genap dan ganjil berbeda. Hal ini dilakukan supaya memudahkan orang dalam membaca tiap baris dari table tersebut.
Berikut saya akan jelaskan membuat table zebra dengan menggunakan style CSS,

Pertama-tama buatlah class di css, misalnya disini kita buat class zebra seperti berikut :

<style>
.zebra tr:nth-child(even) {
     background-color: #f9f9f9;
}
.zebra tr:nth-child(odd) {
     background-color: #DCDCDC;
}
</style>

Kemudian style tersebut tempelkan pada table seperti berikut,

<table class="zebra">
     <tr><td></td></tr>
     <tr><td></td></tr>
</table> 

Supaya ketika kita arahkan mouse (hover) ke setiap baris bisa berubah warna, tambahkan baris berikut ke tag <style>

.zebra tr:hover {
     background-color: #4679BD;
}

Untuk contoh bisa dilihat pada link berikut Sample Table Zebra

Baca Selengkapnya »

Style CSS Untuk Menghilangkan Garis Bintik-bintik Jejak Link

Pada saat kita membuat sebuah link dan ketika link yang kita buat tersebut di klik selalu meninggalkan jejak berupa garis bintik-bintik seperti border dotted. Untuk menghilangkan jejak tersebut sangatlah mudah cukup menambahkan style CSS sebagai berikut :

a:active{
  text-decoration:none;
  color:#ffffff;
  border:0px;
  -moz-outline-style:none;
}

a:focus{
  outline:none;
  -moz-outline-style:none;
}

Baca Selengkapnya »