Membuat Tags Atau Label Dengan jQuery Tags Input

Membuat Tags Atau Label Dengan jQuery Tags Input  - Label atau dalam bahasa inggris tag adalah kata kunci yang berhubungan dengan konten yang diberikan tag, tags ini digunakan untuk menunjukan potongan - potongan infromasi sebagai petunjuk dari suatu konten. Hal ini juga dapat membantu memudahkan pencarian terhadap sesuatu yang berhubungan dengan tags tersebut.

Sebagai contoh apabila anda seorang blogger ketika anda selesai membuat sebuah konten kita memasukan label atau tags yang berhubungan dengan konten tersebut untuk mengkategorikan konten tersebut dan juga untuk mempermudah mesin pencari untuk menemukan konten yang kita buat.

Sekarang bagaimana jika kita ingin membuat website sendiri tentu kita harus membuat fitur tags kita sendiri. Nah, bagaimankah untuk membuatnya ?

Baca Juga : Cara Membuat Textarea Dengan Character Count dan Limit

Hal ini dapat dilakukan scara konvesional yaitu dengan menggunakan inputan kemudian setiap tags dipisah dengan koma. Akan tetapi hasil tampilannya tidak menarik karena tags yang di input hanya kita pisahkan dengan koma. untuk itu kita membutuhkan tambahan CSS untuk mempercantiknya tetapi hal ini juga di butuhkan bantuan Javascript dan jQuery.

Untuk lebih jelasnya sekarang langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Jquery Tags, sekarang untuk mempercantik bentuk tampilan inputan tags buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);
*, *:before, *:after { box-sizing: border-box; }
html { font-size: 100%;  }
body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: #0172c6;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h2 { 
  color: #fff;  
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: Center;
}

h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}

ul {
  width: 100%;
  min-height: 100px;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
  &:focus {
    outline: none;
    border: 1px solid darken(#ddd, 5%);
    box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
  }
  &[placeholder] { 
    font-style: italic;
    font-size: 0.875rem;
  }
}

#keywords{
 width:80%;
}
</style>

Simpan dalam folder Jquery Tags dengan nama style.css

Sekarang untuk memperncantik tampilan tagsnya buat lagi sebuah file baru dan ketikan script berikut :

.ui-autocomplete {
    background-color: #fff;
    position: absolute;
    cursor: default;
    list-style: none;
    margin: 25px 0 0;
    padding: 0;
    border: 1px solid #E5E5E5;
    border-top: none;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -moz-box-shadow: 0 3px 5px #888;
    -webkit-box-shadow: 0 3px 5px #888;
    box-shadow: 0 3px 5px #888;
    font-size: 12px;
}

.ui-autocomplete .ui-menu-item {
    padding: 0;
    margin: 0;
}

.ui-autocomplete  .ui-menu-item a {
    display: block;
    padding: 4px 6px;
    margin: 0;
    text-decoration: none;
    line-height: 12px;
    border-bottom: 1px solid #E5E5E5;
    border-top: 1px solid #fff;
    color: #78959D;

}

.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-active {
    background-color: #c0d1e2;
    color: #555;
    border-color: #a6cef7;
}

.ui-autocomplete-loading {
    
}

ul.tagit {
    cursor: text;
    overflow: auto;
    font-size: 14px;
    width: 97%;
    padding: 3px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 16px;
    border: 1px solid #E5E5E5;
    background: #fff;
    color: #333;
}

ul.tagit li {
    display: block;
    float: left;
    margin: 2px 5px 2px 0;
    position: relative;
}

ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{
    float: left;
    width: 12px;
    margin-left: -5px;
    cursor: move;
}

ul.tagit li.tagit-choice {
    background-color: #5bc0de;
 margin: 2px 5px 2px 0;
 display: block;
 padding: 2px 15px 3px 4px;
 color: #fff;
 text-align: center;
 white-space: nowrap;
 vertical-align: baseline;
 border-radius: .25em;
 position: relative;
 float: left;
 font-weight: 500;
}

ul.tagit li.tagit-choice.selected {
    background: #ff3019; /* old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff3019', endColorstr = '#cf0404', GradientType = 0); /* ie */
    border-color: #f76464;
}

ul.tagit li.tagit-choice:hover {
    background: #0172c6;
}

ul.tagit li.tagit-new {
    padding: 2px 4px 3px;
    padding: 2px 4px 1px;
    padding: 2px 4px 1px 0;
}

ul.tagit li.tagit-choice input {
    display: block;
    float: left;
    margin: 0 5px 0 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

ul.tagit li.tagit-choice a.tagit-close {
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    outline: medium none;
    padding: 3px 0 2px 3px;
    text-decoration: none;
    position: absolute;
    display: block;
    top: 0;
    right: 3px;
    text-shadow: -1px -1px 0 rgba(150, 150, 0, 0.7);
}

ul.tagit li.tagit-choice a.tagit-close:hover {
    color: #f00;
}

ul.tagit div.tagit-label.hidden {
 display: none;
}

ul.tagit input.tagit-edit {
 margin: 0px 0px 0px 2px;
 border: none;
 line-height: 16px;
}

ul.tagit input[type="text"] {
    -moz-box-sizing: border-box;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: inherit !important;
    outline: none;
}

.tagit-hiddenSelect {
    display:none;
}

Simpan dalam folder Jquery Tags dengan nama tagit-stylish-yellow.css

Javascript

Sekarang untuk jQuery dan jQuery ui anda dapan mengunduhnya di sini :

Download jQuery

Download jQuery-Ui

Simpan dalam folder Jquery Tags.

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
  <title>Jquery Tag | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet">
  <link href="tagit-stylish-yellow.css" rel="stylesheet">  
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script src="tagit.js" type="text/javascript"></script>
  
  <script type="text/javascript">
   $(function() {
    $('#demo9').tagit({ 
     editable: true,
     triggerKeys:['comma', 'tab'] 
    });
    
   $('#send').click(function (){
     showTags($('#demo9').tagit('tags'))
   });
    
   function showTags(tags){
     var string = "";
     for (var i in tags) string += tags[i].value + ",";
     $('#keywords').val(string);
   }
   });
  </script>
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Jquery Tagit</h2>
   <ul id="demo9" name="demo9"></ul>   
   <button type="submit" id="send" >Get Tags</button>
   <input type="text" class="form-control" name="keywords" id="keywords" readonly/>
  </div>   
 </body>
</html>

Simpan dengan nama index.html.

Sekarang jQuery Tags anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Coba ketikan beberapa ketika kemudian untuk setiap tags anda dapat pisahkan dengan koma maka dia akan otomatis berpisah.

Coba anda klik get tags maka sekarang inputan yang di bawah akan berisi value dari tags tersebut. apa bila anda ingin menyimpan tags tersebut di dalam database gunakanlah inputan yang di bawah untuk menangkapnya dan untuk tombol get tags anda dapat ubah menjadi bertipe submit. 

Jika anda tidak ingin menampilkan inputan yang di bawah anda cukup ubah typenya menjadi hidden.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Read More

Cara Membuat Textarea Dengan Character Count Dan Limit

Cara Membuat Textarea Dengan Character Count Dan Limit - Textarea adalah sebuah komponen dari HTML yang digunakan untuk mengetikan atau menginput text yang biasanya panjang. Pada dasarnya fungsi textarea sama dengan text field yaitu untuk menginput karakter tapi textarea lebih ditujukan untuk ke arah jumlah karakter yang lebih banyak karena bentuk field text area yang luas atau lebih besar dibandingkan dengan text field.

Baca Juga : Cara Membuat Form Pada HTML

Textarea sering digunakan untuk menginput text yang panjang seperti artikel, akan tetapi dalam beberapa kasus terkadang jumlah karakter yang dimasukan kedalam textarea di batasi, contohnya seperti dalam tweeter kita hanya dapat memasukan 140 karakter. Nah, Bagaimana sih sebenarnya membuat limitasi karakter pada textarea ?

Jika kita ingin membatasi karakter yang di inputkan kita dapat menggunakan atribut dari textarea tersebut yaitu maxlength  anda cukup menambahkan maxlength="140" sebagai contoh :

<textarea maxlength="140" placeholder="Enter Your Text Here"></textarea>

Akan tetapi jika hannya menggunakan cara di atas kita hanya membatasi jumlah karakter yang masuk tapi tidak mengetahui jumlah karakter yang sudah di masukan. Sekarang bagaimana kita mengetahui jumlah karakter yang sudah dimasukan yaitu dengan menambahkan javascript. Untuk lebih jelasnya langsung saja meluncur ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Textarea, sekarang untuk mempercantik bentuk tampilan textarea buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);
*, *:before, *:after { box-sizing: border-box; }
html { font-size: 100%;  }
body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: #0172c6;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h2 { 
  color: #fff;  
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: Center;
}

h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}

textarea {
  width: 100%;
  min-height: 100px;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
  &:focus {
    outline: none;
    border: 1px solid darken(#ddd, 5%);
    box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
  }
  &[placeholder] { 
    font-style: italic;
    font-size: 0.875rem;
  }
}

#the-count {
  float: right;
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}
</style>

Simpan dalam folder Textarea dengan nama style.css

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
  <title>Textarea Character Count | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet">   
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Textarea Character Count</h2>
    <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
    <div id="the-count">
   <span id="current">0</span>
   <span id="maximum">/ 140</span>
    </div>
  </div> 
 </body>
</html>

Simpan dalam folder Textarea dengan nama index.html

Javascript

Sekarang untuk counter kita tambahkan javascript di dalam markup HTMLnya, buka file Index.hml anda di Notepad++ kemudian ubah scriptnya menjadi :

<!DOCTYPE html>
<html>
 <head>
  <title>Textarea Character Count | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet"> 
  <script src="jquery.min.js"></script>
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Textarea Character Count</h2>
    <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
    <div id="the-count">
   <span id="current">0</span>
   <span id="maximum">/ 140</span>
    </div>
  </div> 
  <script>
   $('textarea').keyup(function() {   
     var characterCount = $(this).val().length,
      current = $('#current'),
      maximum = $('#maximum'),
      theCount = $('#the-count');
    
     current.text(characterCount);
      
     if (characterCount == 140) {
    maximum.css('color', '#8f0001');
    current.css('color', '#8f0001');
    theCount.css('font-weight','bold');
     } else {
    maximum.css('color','#fff');
    theCount.css('font-weight','normal');
     }
     
      
   });
  </script>
 </body>
</html>

Kemudian simpan.

Jika kalian perhatikan script di atas maka terlihat javascript tambahan di bagian bawah dan jquery di bagian atas. Untuk jquery anda dapat menggambilnya di website resminya atau anda dapat mengunduhnya di sini : Download

Sekarang Textarea Character Count anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Read More

Cara Membuat Tabel Search Dengan Bootstrap dan Javascript

Cara Membuat Tabel Search Dengan Bootstrap dan Javascript - Tabel search adalah sebuah tabel yang ditambahkan fitur search yang berfungsi secara otomatis mencari di dalam baris dari tabel ketika memasukan kata kunci pencariannya. Hal ini akan memudahkan anda dalam memfilter dan mencari data yang terdapat dalam tabel. Fitur ini juga sangatlah ringat sehigga tidak memberikan load page yang berat ketika dalam proses pencarian, hasil akan otomatis muncul seketika. Untuk lebih jelasnya langsung saja kita membuatnya dengan menggunakan Bootstrap dan Javascript.

Baca Juga : Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Tabel Search, sekarang untuk mempercantik bentuk tabel buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

h2 {
  margin-bottom: 50px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
}

Simpan dalam folder Tabel Search dengan nama style.css

Javascript

Sekarang untuk sortingnya kita tambahkan javascript, buatlah sebuah file baru di Notepad++ kemudian ketikan script berikut :

(function(document) {
 'use strict';

 var LightTableFilter = (function(Arr) {

  var _input;

  function _onInputEvent(e) {
   _input = e.target;
   var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
   Arr.forEach.call(tables, function(table) {
    Arr.forEach.call(table.tBodies, function(tbody) {
     Arr.forEach.call(tbody.rows, _filter);
    });
   });
  }

  function _filter(row) {
   var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
   row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
  }

  return {
   init: function() {
    var inputs = document.getElementsByClassName('light-table-filter');
    Arr.forEach.call(inputs, function(input) {
     input.oninput = _onInputEvent;
    });
   }
  };
 })(Array.prototype);

 document.addEventListener('readystatechange', function() {
  if (document.readyState === 'complete') {
   LightTableFilter.init();
  }
 });

})(document);

Simpan dalam folder Tabel Search dengan nama script.js

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
<title>Tabel Search Bootstrap dan Javascript</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script type="text/javascript" async="" src="script.js"></script>
 </head>
 <body>
<section class="container">

 <h2>Tabel Search Bootstrap dan Javascript</h2>

 <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filtrer" />

 <table class="order-table">
  <thead>
   <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Price</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Jin Toples</td>
    <td>jin.doe@gmail.com</td>
    <td>0123456789</td>
    <td>99</td>
   </tr>
   <tr>
    <td>Jane Toples</td>
    <td>jane@toples.org</td>
    <td>9876543210</td>
    <td>349</td>
   </tr>
   <tr>
    <td>Rengo Kolas</td>
    <td>begi@batman.com</td>
    <td>6754328901</td>
    <td>199</td>
   </tr>
  </tbody>
 </table>

</section>

 </body>
</html>

Simpan dalam folder Tabel Search dengan nama index.html

Sekarang Tabel Search anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Read More

Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript

Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript - Tabel sorting adalah sebuah tabel yang ditambahkan sebuah fitur untuk mengurutkan data yang ada dalam setiap baris dari suatu kolom dalam tabel baik secara Ascending maupun descending. Apabila kita memuat list data dalam bentuk baris dalam tabel kemudian data yang di tampilkan tersebut berjumlah cukup banyak maka akan sulit bagi kita untuk melihatnya apalagi jika data tersebut tidak tersusun dan berantakan.

Dengan adanya sort kita dapat lebih mudah mengurutkan data kita hanya perlu mengklik pada bagian header dari setiap kolom maka baris data yang ada akan tersusun otomatis. hal ini dapat terwujudkan dengan adanya tambahan Javascript dan bootstrap untuk tampilannya. Untuk lebih jelasnya langsung saja kita membuatnya.

Baca Juga : Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Tabel Sorting , sekarang untuk mempercantik bentuk tabel buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

h2 {
  margin-bottom: 50px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
  cursor: pointer;
}

.container th.desc:after {
  border-top-color: #666;
}

.container th.asc:before {
  border-bottom-color: #666;
}

.container th:after, .container th:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  width: 0;
  height: 0;
}

.container th:after {
  border-top-color: #ddd;
  top: 22px;
}

.container th:before {
  border-bottom-color: #ddd;
  top: 10px;
}

.github {
  margin-top: 50px;
}

Simpan dalam folder Tabel Sorting dengan nama style.css

Javascript

Sekarang untuk sortingnya kita tambahkan javascript, buatlah sebuah file baru di Notepad++ kemudian ketikan script berikut :

(function(document) {
 'use strict';

 var LightTableSorter = (function(Arr) {

  var _th, _cellIndex, _order = '';

  function _text(row) {
   return row.cells.item(_cellIndex).textContent.toLowerCase();
  }

  function _sort(a, b) {
   var va = _text(a), vb = _text(b), n = parseInt(va, 10);
   if (n) {
    va = n;
    vb = parseInt(vb, 10);
   }
   return va > vb ? 1 : va < vb ? -1 : 0;
  }

  function _toggle() {
   var c = _order !== 'asc' ? 'asc' : 'desc';
   _th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
   _order = c;
  }

  function _reset() {
   _th.className = _th.className.replace('asc', '').replace('desc', '');
   _order = '';
  }

  function onClickEvent(e) {
   if (_th && _cellIndex !== e.target.cellIndex) {
    _reset();
   }
   _th = e.target;
   _cellIndex = _th.cellIndex;
   var tbody = _th.offsetParent.getElementsByTagName('tbody')[0],
    rows = tbody.rows;
   if (rows) {
    rows = Arr.sort.call(Arr.slice.call(rows, 0), _sort);
    if (_order === 'asc') {
     Arr.reverse.call(rows);
    }
    _toggle();
    tbody.innerHtml = '';
    Arr.forEach.call(rows, function(row) { tbody.appendChild(row); });
   }
  }

  return {
   init: function() {
    var ths = document.getElementsByTagName('th');
    Arr.forEach.call(ths, function(th) { th.onclick = onClickEvent; });
   }
  };
 })(Array.prototype);

 document.addEventListener('readystatechange', function() {
  if (document.readyState === 'complete') {
   LightTableSorter.init();
  }
 });

})(document);

Simpan dalam folder Tabel Sorting dengan nama script.js

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

 




 
 


 

Tabel Sorting CSS dan Javascript





























  
    
Name
    
Email
    
Phone
    
Price
   
  
    
Jin Toples
    
jin.doe@gmail.com
    
0123456789
    
99
   
    
Jane Toples
    
jane@toples.org
    
9876543210
    
349
   
    
Rengo Kolas
    
begi@batman.com
    
6754328901
    
199
   
 


 

Simpan dalam folder Tabel Sorting dengan nama index.html

Sekarang Tabel Sorting dengan Bootstrap dan Javascript anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Read More

Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript

Expanding Search

Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript - Expanding search adalah inputan search atau pencarian yang di berikan efek expand ( memanjang atau membesar ) ketika user melakukan suatu aksi pemicu tertentu. expanding search sangat cocok digunakan untuk meminimalkan space pada website karna ketika ia tidak digunakan ia akan mengecil, dan juga dengan teknik ini kita akan lebih mudah dalam merespoinsive input search tersebut hal ini dapat di buat dengan CSS3 dan Javascript. untuk lebih jelansya langsung saja kita membuatnya.

Baca Juga : Cara Membuat Banner Animasi Dengan CSS3 dan HTML5

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Expanding Search kemudian bualah sebuah folder lagi dengan nama css , sekarang untuk mempercantik bentuk inputan serta tombol searchnya buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

/* Search icon by IcoMoon, made with http://icomoon.io/app/ */
@font-face {
 font-family: 'icomoon';
 src:url('../fonts/icomoon/icomoon.eot');
 src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon/icomoon.woff') format('woff'),
  url('../fonts/icomoon/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

.sb-search {
 position: relative;
 margin-top: 10px;
 width: 0%;
 min-width: 60px;
 height: 60px;
 float: right;
 overflow: hidden;
 -webkit-transition: width 0.3s;
 -moz-transition: width 0.3s;
 transition: width 0.3s;
 -webkit-backface-visibility: hidden;
}

.sb-search-input {
 position: absolute;
 top: 0;
 right: 0;
 border: none;
 outline: none;
 background: #fff;
 width: 100%;
 height: 60px;
 margin: 0;
 z-index: 10;
 padding: 20px 65px 20px 20px;
 font-family: inherit;
 font-size: 20px;
 color: #2c3e50;
}

.sb-search-input::-webkit-input-placeholder {
 color: #efb480;
}

.sb-search-input:-moz-placeholder {
 color: #efb480;
}

.sb-search-input::-moz-placeholder {
 color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
 color: #efb480;
}

.sb-icon-search,
.sb-search-submit  {
 width: 60px;
 height: 60px;
 display: block;
 position: absolute;
 right: 0;
 top: 0;
 padding: 0;
 margin: 0;
 line-height: 60px;
 text-align: center;
 cursor: pointer;
}

.sb-search-submit {
 background: #fff; /* IE needs this */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
 color: transparent;
 border: none;
 outline: none;
 z-index: -1;
}

.sb-icon-search {
 color: #fff;
 background: #e67e22;
 z-index: 90;
 font-size: 22px;
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 -webkit-font-smoothing: antialiased;
}

.sb-icon-search:before {
 content: "\e000";
}

/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
 width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
 background: #da6d0d;
 color: #fff;
 z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
 z-index: 90;
}

Simpan dalam folder css dengan nama component.css.

Buat sebuah file baru lagi dengan notepad++ ketikan script berikut :

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
 font-family: 'codropsicons';
 src:url('../fonts/codropsicons/codropsicons.eot');
 src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
  url('../fonts/codropsicons/codropsicons.woff') format('woff'),
  url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
  url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 font-weight: normal;
 font-style: normal;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 color: #eaeaea;
 background: #2c3e50;
}

a {
 color: #b4c7da;
 text-decoration: none;
}

a:hover,
a:active {
 color: #fff;
}

/* Header Style */
.main,
.container > header {
 margin: 0 auto;
 padding: 2em;
}

.container > header {
 text-align: center;
 background: rgba(0,0,0,0.01);
}

.container > header h1 {
 font-size: 2.625em;
 line-height: 1.3;
 margin: 0;
 font-weight: 300;
}

.container > header span {
 display: block;
 font-size: 60%;
 color: #e67e22;
 padding: 0 0 0.6em 0.1em;
}

/* Main Content */
.main {
 max-width: 69em;
}

.column {
 float: left;
 width: 50%;
 padding: 0 2em;
 min-height: 300px;
 position: relative;
}

.column:nth-child(2) {
 box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}

.column p {
 font-weight: 300;
 font-size: 2em;
 padding: 0;
 margin: 0;
 text-align: right;
 line-height: 1.5;
}

.column a {
 border: 3px solid #b4c7da;
 padding: 0 15px;
 display: inline-block;
 margin: 20px 0;
}

.column a:hover {
 border-color: #fff;
}

/* To Navigation Style */
.codrops-top {
 background: #566472;
 background: rgba(255, 255, 255, 0.2);
 text-transform: uppercase;
 width: 100%;
 font-size: 0.69em;
 line-height: 2.2;
}

.codrops-top a {
 padding: 0 1em;
 letter-spacing: 0.1em;
 color: #fff;
 display: inline-block;
}

.codrops-top a:hover {
 background: rgba(255,255,255,0.8);
 color: #2c3e50;
}

.codrops-top span.right {
 float: right;
}

.codrops-top span.right a {
 float: left;
 display: block;
}

.codrops-icon:before {
 font-family: 'codropsicons';
 margin: 0 4px;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
 content: "\e001";
}

.codrops-icon-prev:before {
 content: "\e004";
}

@media screen and (max-width: 46.0625em) {
 .column {
  width: 100%;
  min-width: auto;
  min-height: auto;
  padding: 1em; 
 }

 .column p {
  text-align: left;
  font-size: 1.5em;
 }

 .column:nth-child(2) {
  box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
 }
}

@media screen and (max-width: 25em) {

 .codrops-icon span {
  display: none;
 }

}

Simpan dalam folder css dengan nama default.css

Javascript

Buat sebuah folder baru dalam folder Expand Search dengan nama js , sekarang untuk efek expand pada inputan searchnya anda dapat mengunduh javasriptnya disini : Download simpan dalam folder js tersebut.

Font

Buat sebuah folder baru dalam folder Expand Search dengan nama fonts , sekarang untuk font facenya anda dapat mengunduh fontnya disini : Download simpan dalam folder font tersebut

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
  <title>Expanding Search Bar</title>
  <link rel="stylesheet" type="text/css" href="css/default.css" />
  <link rel="stylesheet" type="text/css" href="css/component.css" />
  <script src="js/modernizr.custom.js"></script>
 </head>
 <body>
  <div class="container">
   <div class="main clearfix">
    <!-- Optional columns for small components -->
    <div class="column">
     <div id="sb-search" class="sb-search">
      <form>
       <input class="sb-search-input" placeholder="Search..." type="text" value="" name="search" id="search">
       <input class="sb-search-submit" type="submit" value="">
       <span class="sb-icon-search"></span>
      </form>
     </div>
    </div>
   </div>
  </div><!-- /container -->
  <script src="js/classie.js"></script>
  <script src="js/uisearch.js"></script>
  <script>
   new UISearch( document.getElementById( 'sb-search' ) );
  </script>
 </body>
</html>

Simpan dalam folder Expanding Search dengan nama index.html.

Sekarang Expanding Search anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWLOAD

Read More

Cara Membuat Banner Animasi Dengan CSS3 dan HTML5

Cara Membuat Banner Animasi Dengan CSS3 dan HTML5 - Banner animasi adalah sekumpulan teks atau gambar bergerk yang digunakan sebagai media promosi atau iklan. Banner sering kita jumpai pada kehidupan sehari - hari baik di dunia nyata ataupun di dunia maya. Pada dasarnya ada terdapat dua jenis banner yaitu banner statis dan dinamis atau animasi bergerak. 

Baca juga : Cara Membuat Menu Vertikal Keren Dengan HTML5 dan CSS3

Pada umumnya sebelum adanya CSS3 dan HTML5 banner yang berbentuk animasi dibuat dengan menggunakan flash, akan tetapi untuk menjalankan flash kita memerlukan plugin flash yang terpasang pada browser kita. Dengan adanya CSS3 dan HTML5, sekarang kita bisa membuat banner tanpa harus menggunakan flash jadi kita juga tidak perlu memasang pluginnya pada web browser kita. Banner ini juga berjalan lebih ringan dibandingkan dengan menggunakan flash, pada kali ini kita akan membuat banner dengan CSS3 dan HTML5, untuk lebih jelasnya langsung saja kita meluncur ke programmya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Banner CSS3 kemudian buatlah lagi folder di dalamnya dengan nama CSS , Sekarang style tampilan demonya buatlah sebuah file baru dengan notepad++ kemudian ketikan script berikut :

/* CSS reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 margin:0;
 padding:0;
}
fieldset,img { 
 border:0;
}
ol,ul {
 list-style:none;
}
h1,h2,h3,h4,h5,h6 {
 font-size:100%;
 font-weight:normal;
}
/* General Demo Style */
body{
 font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 background: #fbf8f4 url(../images/wood_pattern.jpg) repeat top left;
 font-weight: 400;
 font-size: 15px;
 color: #936a46;
 overflow-y: scroll;
 overflow-x: hidden;
}
.ie7 body{
 overflow:hidden;
}
a{
 color: #333;
 text-decoration: none;
}
.container{
 position: relative;
 text-align: center;
}
.clr{
 clear: both;
}
.container > header{
 padding: 20px 30px 10px 30px;
 margin: 0px 20px 10px 20px;
 position: relative;
 display: block;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
 font-family: 'Alfa Slab One', 'Arial Narrow', Arial, sans-serif;
 font-size: 35px;
 line-height: 35px;
 position: relative;
 font-weight: 400;
 color: #333;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{
 color: #008dc1;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2, p.info{
 font-family: 'Boogaloo', 'Arial Narrow', Arial, sans-serif;
 font-size: 22px;
 font-style: italic;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.container > header h2 a{
 color: #936a46;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2 a:hover{
 color: #614429;
}
/* Header Style */
.codrops-top{
 font-family:'Arial Narrow', Arial, sans-serif;
 line-height: 24px;
 font-size: 11px;
 width: 100%;
 background: #000;
 opacity: 0.9;
 text-transform: uppercase;
 z-index: 9999;
 position: relative;
 -moz-box-shadow: 1px 0px 2px #000;
 -webkit-box-shadow: 1px 0px 2px #000;
 box-shadow: 1px 0px 2px #000;
}
.codrops-top a{
 padding: 0px 10px;
 letter-spacing: 1px;
 color: #ddd;
 display: block;
 float: left;
}
.codrops-top a:hover{
 color: #fff;
}
.codrops-top span.right{
 float: right;
}
.codrops-top span.right a{
 float: none;
 display: inline;
}

p.codrops-demos{
 text-align:center;
 display: block;
 padding: 14px;
 font-family: 'Alfa Slab One', 'Arial Narrow', Arial, sans-serif;
}
p.codrops-demos a,
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
    display: inline-block;
 border: 1px solid #ddd;
 border-color: #ddd #aaa #aaa #ddd;
 padding: 4px 10px 3px;
 font-size: 15px;
 line-height: 18px;
 margin: 0px 3px;
 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
 -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
 box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
 color: #29abe1;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #fff;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
 background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
 background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}
p.codrops-demos a:hover{
 background: #fff;
 color: #29abe1;
}
p.codrops-demos a:active{
 background: #e5e5e5;
 background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
 background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
 -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9);
 box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
 color: #fff;
 background: #29abe1;
 border-color: #29abe1;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
/* Media Queries */
@media screen and (max-width: 767px) {
 .container > header{
  text-align: center;
 }
 p.codrops-demos {
  position: relative;
  top: auto;
  left: auto;
 }
}

Simpan dengan nama demo.css letakan dalam folder CSS tadi, kemudian buatlah sebuah file baru untuk style banner serta animasi bannernya ketikan script berikut di notepad++ :

/* Begin Ad 1 */

#ad-1 {
 width: 720px;
 height: 300px;
 margin: 40px auto 0;
 background-image: url(../images/ad-1/background.png);
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
 position: relative;
 box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#ad-1 #content {
 width: 325px;
 float: right;
 margin: 40px;
 text-align: center;
 z-index: 4;
 position: relative;
 overflow: visible;
}
 #ad-1 #content h2 {
  font-family: 'Alfa Slab One', cursive;
  color: #137dd5;
  font-size: 50px;
  line-height: 50px;
  text-shadow: 0px 0px 4px #fff;
  -webkit-animation: h2-animation 7s 1 ease-in-out;
  -moz-animation: h2-animation 7s 1 ease-in-out;
  -o-animation: h2-animation 7s 1 ease-in-out;
  -ms-animation: h2-animation 7s 1 ease-in-out;
  animation: h2-animation 7s 1 ease-in-out;
 }
 #ad-1 #content h3 {
  font-family: 'Boogaloo', cursive;
  color: #202224;
  font-size: 31px;
  line-height: 31px;
  text-shadow: 0px 0px 4px #fff;
  -webkit-animation: h3-animation 10s 1 ease-in-out;
  -moz-animation: h3-animation 10s 1 ease-in-out;
  -o-animation: h3-animation 10s 1 ease-in-out;
  -ms-animation: h3-animation 10s 1 ease-in-out;
  animation: h3-animation 10s 1 ease-in-out;
 }
 #ad-1 #content form {
  margin: 30px 0 0 6px;
  position: relative;
  -webkit-animation: form-animation 12s 1 ease-in-out;
  -moz-animation: form-animation 12s 1 ease-in-out;
  -o-animation: form-animation 12s 1 ease-in-out;
  -ms-animation: form-animation 12s 1 ease-in-out;
  animation: form-animation 12s 1 ease-in-out;
 }
 #ad-1 #content #email {
  width: 158px;
  height: 48px;
  float: left;
  padding: 0 20px;
  font-size: 16px;
  font-family: 'Lucida Grande', sans-serif;
  color: #fff;
  text-shadow: 1px 1px 0px #a2917d;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border:1px solid #a2917d;
  outline: none;
  box-shadow: -1px -1px 1px #fff;
  background-color: #c7b29b;
  background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -o-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
 }
 #ad-1 #content #email:focus {
  background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -o-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  
 }
 #ad-1 #content #submit {
  height: 50px;
  float: left;
  padding: 0 20px;
  font-size: 20px;
  font-family: 'Boogaloo', cursive;
  color: #137dd5;
  text-shadow: 1px 1px 0px #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border:1px solid #bcc0c4;
  border-left: none;
  background-color: #fff;
  background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  cursor: pointer;
 }
 #ad-1 #content #submit:hover {
  background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
 }
#ad-1 ul#water{
}
 #ad-1 li#water-back {
  width: 1200px;
  height: 84px;
  background-image: url(../images/ad-1/water-back.png);
  background-repeat: repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 10px;
  left: -20px;
  -webkit-animation: water-back-animation 3s infinite ease-in-out;
  -moz-animation: water-back-animation 3s infinite ease-in-out;
  -o-animation: water-back-animation 3s infinite ease-in-out;
  -ms-animation: water-back-animation 3s infinite ease-in-out;
  animation: water-back-animation 3s infinite ease-in-out;
 }
 #ad-1 li#water-front {
  width: 1200px;
  height: 158px;
  background-image: url(../images/ad-1/water-front.png);
  background-repeat: repeat-x;
  z-index: 3;
  position: absolute;
  bottom: -70px;
  left:-30px;
  -webkit-animation: water-front-animation 2s infinite ease-in-out;
  -moz-animation: water-front-animation 2s infinite ease-in-out;
  -o-animation: water-front-animation 2s infinite ease-in-out;
  -ms-animation: water-front-animation 2s infinite ease-in-out;
  animation: water-front-animation 2s infinite ease-in-out;
 }
#ad-1 ul#boat {
 width: 249px;
 height: 215px;
 z-index: 2;
 position: absolute;
 bottom: 25px;
 left: 20px;
 overflow: visible;
 -webkit-animation: boat-in-animation 3s 1 ease-out;
 -moz-animation: boat-in-animation 3s 1 ease-out;
 -o-animation: boat-in-animation 3s 1 ease-out;
 -ms-animation: boat-in-animation 3s 1 ease-out;
 animation: boat-in-animation 3s 1 ease-out;
}
 #ad-1 ul#boat li {
  width: 249px;
  height: 215px;
  background-image: url(../images/ad-1/boat.png);
  position: absolute;
  bottom: 0px;
  left: 0px;
  overflow: visible;
  -webkit-animation: boat-animation 2s infinite ease-in-out;
  -moz-animation: boat-animation 2s infinite ease-in-out;
  -o-animation: boat-animation 2s infinite ease-in-out;
  -ms-animation: boat-animation 2s infinite ease-in-out;
  animation: boat-animation 2s infinite ease-in-out;
 }
  #ad-1 #question-mark {
   width: 24px;
   height: 50px;
   background-image: url(../images/ad-1/question-mark.png);
   position: absolute;
   right: 34px;
   top: -30px;
   -webkit-animation: question-mark-animation 4s 1 ease-in-out;
   -moz-animation: question-mark-animation 4s 1 ease-in-out;
   -o-animation: question-mark-animation 4s 1 ease-in-out;
   -ms-animation: question-mark-animation 4s 1 ease-in-out;
   animation: question-mark-animation 4s 1 ease-in-out;
  }
#ad-1 #clouds {
 position: absolute;
 top: 0px;
 z-index: 0;
}
#ad-1 #cloud-group-1 {
 width:720px;
 position: absolute;
 left:0px;
 -webkit-animation: cloud-group-1-animation 30s infinite linear;
 -moz-animation: cloud-group-1-animation 30s infinite linear;
 -o-animation: cloud-group-1-animation 30s infinite linear;
 -ms-animation: cloud-group-1-animation 30s infinite linear;
 animation: cloud-group-1-animation 30s infinite linear;
}
#ad-1 #cloud-group-2 {
 width: 720px;
 position: absolute;
 left: 720px;
 -webkit-animation: cloud-group-2-animation 30s infinite linear;
 -moz-animation: cloud-group-2-animation 30s infinite linear;
 -o-animation: cloud-group-2-animation 30s infinite linear;
 -ms-animation: cloud-group-2-animation 30s infinite linear;
 animation: cloud-group-2-animation 30s infinite linear;
}
 #ad-1 .cloud-1 {
  width: 172px;
  height: 121px;
  background-image: url(../images/ad-1/cloud-1.png);
  position: absolute;
  top: 10px;
  left: 40px;
 }
 #ad-1 .cloud-2 {
  width: 121px;
  height: 75px;
  background-image: url(../images/ad-1/cloud-2.png);
  position: absolute;
  top: -25px;
  left: 300px;
 }
 #ad-1 .cloud-3 {
  width: 132px;
  height: 105px;
  background-image: url(../images/ad-1/cloud-3.png);
  position: absolute;
  top: -5px;
  left: 530px;
 }
 
/* WebKit Animations */

@-webkit-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-webkit-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-webkit-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-webkit-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-webkit-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-webkit-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-webkit-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-webkit-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-webkit-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-webkit-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* FireFox Animations */

@-moz-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-moz-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-moz-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-moz-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-moz-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-moz-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-moz-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-moz-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-moz-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-moz-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* Opera Animations */

@-o-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-o-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-o-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-o-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-o-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-o-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-o-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-o-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-o-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-o-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* IE Animations */

@-ms-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-ms-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-ms-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-ms-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-ms-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-ms-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-ms-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-ms-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-ms-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-ms-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* Animations */

@keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* End Ad 1 */

/* Begin Ad 2 */

#ad-2 {
 width: 160px;
 height: 600px;
 margin: 40px auto 40px;
 background-image: url(../images/ad-2/background.png);
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
 position: relative;
 box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
 text-align: center;
}
#ad-2 h2 {
 font-family: 'Alfa Slab One', cursive;
 color: #137dd5;
 font-size: 50px;
 line-height: 50px;
 text-shadow: 0px 0px 4px #fff;
 margin-top: 110px;
 -webkit-animation: h2-animation-2 10s 1 ease-in-out;
 -moz-animation: h2-animation-2 10s 1 ease-in-out;
 -o-animation: h2-animation-2 5s 1 ease-in-out;
 -ms-animation: h2-animation-2 5s 1 ease-in-out;
 animation: h2-animation-2 5s 1 ease-in-out;
}
#ad-2 ul#boat {
 width: 96px;
 height: 84px;
 overflow: visible;
 z-index: 2;
 position: absolute;
 top: 326px;
 left: 10px;
 -webkit-animation: boat-in-animation-2 15s 1 ease-in-out;
 -moz-animation: boat-in-animation-2 15s 1 ease-in-out;
 -o-animation: boat-in-animation-2 15s 1 ease-in-out;
 -ms-animation: boat-in-animation-2 15s 1 ease-in-out;
 animation: boat-in-animation-2 15s 1 ease-in-out;
}
 #ad-2 ul#boat li {
  width: 96px;
  height: 84px;
  z-index: 2;
  position: relative;
  top: 0px;
  left: 0px;
  background-image: url(../images/ad-2/boat.png);
  -webkit-animation: boat-animation-2 2.5s infinite ease-out;
  -moz-animation: boat-animation-2 2.5s infinite ease-out;
  -o-animation: boat-animation-2 2.5s infinite ease-out;
  -ms-animation: boat-in-animation-2 2.5s infinite ease-out;
  animation: boat-animation-2 2.5s infinite ease-out;
 }
#ad-2 #water {
 position: absolute;
 top: 382px;
 -webkit-animation: water-in-animation-2 2s 1 ease-out;
 -moz-animation: water-in-animation-2 2s 1 ease-out;
 -o-animation: water-in-animation-2 2s 1 ease-out;
 -ms-animation: water-in-animation-2 2s 1 ease-out;
 animation: water-in-animation-2 2s 1 ease-out;
}
 #ad-2 #water-back {
  width: 200px;
  height: 75px;
  background-image: url(../images/ad-2/water-back.png);
  background-repeat: repeat-x;
  z-index: 1;
  position: absolute;
  top: 0px;
  left: -22px;
  -webkit-animation: water-back-animation-2 3s infinite ease-in-out;
  -moz-animation: water-back-animation-2 3s infinite ease-in-out;
  -o-animation: water-back-animation-2 3s infinite ease-in-out;
  -ms-animation: water-back-animation-2 3s infinite ease-in-out;
  animation: water-back-animation-2 3s infinite ease-in-out;
 }
 #ad-2 #water-front {
  width: 200px;
  height: 368px;
  background-image: url(../images/ad-2/water-front.png);
  background-repeat: repeat-x;
  z-index: 3;
  position: absolute;
  top: 2px;
  left:-30px;
  -webkit-animation: water-front-animation-2 2s infinite ease-in-out;
  -moz-animation: water-front-animation-2 2s infinite ease-in-out;
  -o-animation: water-front-animation-2 2s infinite ease-in-out;
  -ms-animation: water-front-animation-2 2s infinite ease-in-out;
  animation: water-front-animation-2 2s infinite ease-in-out;
 }
#ad-2 #content {
 width: 100%;
 position: absolute;
 bottom: 0px;
 z-index: 4;
 -webkit-animation: content-in-animation-2 15s 1 ease-in-out;
 -moz-animation: content-in-animation-2 15s 1 ease-in-out;
 -o-animation: content-in-animation-2 15s 1 ease-in-out;
 -ms-animation: content-in-animation-2 15s 1 ease-in-out;
 animation: content-in-animation-2 15s 1 ease-in-out;
}
 #ad-2 #content h3 {
  color: #fff;
  font-family: 'Boogaloo', cursive;
  font-size: 30px;
  line-height: 32px;
  text-shadow: 0px 0px 4px #137dd5;
 }
 #ad-2 #content a:link, #ad-2 #content a:visited {
  display: inline-block;
  height: 20px;
  padding: 15px;
  font-family: 'Boogaloo', cursive;
  font-size: 20px;
  line-height: 20px;
  color: #137dd5;
  text-shadow: 1px 1px 0px #fff;
  background-color: #fff;
  border-radius: 5px;
  margin: 20px 0px;
  box-shadow: 2px 2px 0px #137dd5;
  border: 1px solid #fff;
  background-image: linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -o-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
 }
 #ad-2 #content a:hover, #ad-2 #content a:active {
  background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
 }

/* WebKit Animations */

@-webkit-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-webkit-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-webkit-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-webkit-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-webkit-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-webkit-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-webkit-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* FireFox Animations */

@-moz-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-moz-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-moz-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-moz-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-moz-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-moz-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-moz-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* Opera Animations */

@-o-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-o-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-o-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-o-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-o-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-o-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-o-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* IE Animations */

@-ms-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-ms-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-ms-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-ms-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-ms-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-ms-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-ms-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* Animations */

@keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* End Ad 2 */

Kemudian simpan dalam folder CSS dengan nama style.css.

Image

Sekarang untuk gambar banner serta backgroundnya anda dapat mengunduhnya disini : DOWNLOAD
Letakan foder image tersebut dalam folder Banner CSS3

HTML

Sekarang untuk markupnya kita akan membuat dua buah jenis banner yaitu banner Vertikal dan Banner Horisontal, pertama untuk banner horisontal buatlah sebuah file baru di notepad++ kemudian ketikan script berikut :

Horisontal

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Web Banners Dengan CSS3</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
   <header>
    <h1>Animated Web Banners Dengan CSS3</h1>
    <h2>Membuat banner tanpa flash hanya dengan CSS3.</h2>
    <p class="codrops-demos">
     <a class="current-demo"  href="index.html">Horisontal</a>
     <a href="index2.html">Vertikal</a>
    </p>
   </header>
            <section class="wrapper">
    <div id="ad-1">
     <div id="content">
      <h2>Kesasar di laut?</h2>
      <h3>Tenang - Konsultasikan dengan kami.</h3>
      <form>
       <input type="text" id="email" value="Email address..." />
       <input type="submit" id="submit" value="Submit" />
      </form>
     </div>
     <div id="clouds">
      <ul id="cloud-group-1">
       <li class="cloud-1"></li>
       <li class="cloud-2"></li>
       <li class="cloud-3"></li>
      </ul>
      <ul id="cloud-group-2">
       <li class="cloud-1"></li>
       <li class="cloud-2"></li>
       <li class="cloud-3"></li>
      </ul>
     </div>
     <ul id="boat">
      <li>
       <div id="question-mark"></div>
      </li>
     </ul>
     <ul id="water">
      <li id="water-back"></li>
      <li id="water-front"></li>
     </ul>
    </div>
            </section> 
        </div>
    </body>
</html> 

Simpan dalam folder Banner CSS3 dengan nama index.html

Vertikal

Sekarang untuk yang vertikal buat sebuah file baru dan ketikan script berikut :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Web Banners Dengan CSS3</title>
  <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
   <header>
    <h1>Animated Web Banners Dengan CSS3</h1>
    <h2>Membuat banner tanpa flash hanya dengan CSS3.</h2>
    <p class="codrops-demos">
     <a href="index.html">Horisontal</a>
     <a class="current-demo" href="index2.html">Vertikal</a>
    </p>
   </header>
            <section class="wrapper">
    <div id="ad-2">
     <h2>Ilang<br />di<br />laut?</h2>
     <ul id="boat">
      <li>
       <div id="question-mark"></div>
      </li>
     </ul>
     <ul id="water">
      <li id="water-back"></li>
      <li id="water-front"></li>
     </ul>
     <div id="content">
      <h3>Tenang.<br />Konsultasilah dengan kami.</h3>
      <a href="#">Sekarang !</a>
     </div>
    </div>
            </section> 
        </div>
    </body>
</html> 

Sekarang Banner dengan CSS3 dan HTML5 anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWLOAD

Read More

Cara Membuat Kalkulator Keren Dengan CSS3 dan Javascript

Cara Membuat Kalkulator Keren Dengan CSS3 dan Javascript - Kalkulator adalah alat sederhana yang digunakan untuk mempermudah pengguna dalam melakukan penghitungan aritmatika bilangan. kalkulator berbasis website biasanya dibuat menggunakan bahasa pemrograman server side seperti PHP, ASP, Ruby, dan lain - lain. akan tetapi pada kali ini kita akan membuatnya dengan bahasa pemrograman client side yaitu Javascript, sehingga kita tidak perlu lagi untuk menginstal webserver di komputer kita. untuk lebih jelasnya langsung saja kita meluncur ke programnya.

Baca juga : Cara Membuat Game Snake Dengan HTML5

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

HTML

Pertama kita akan membuat terlebih dahulu tampilan dasarnya dengan HTML5, buatlah sebuah folder baru dengan nama Kalulator, kemudian buat sebuah file baru dan ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>          

    </head>
    <body>
  <div id="calculator">
   <!-- Layar dan tombol clear -->
   <div class="top">
    <span class="clear">C</span>
    <div class="screen"></div>
   </div>
   
   <div class="keys">
    <!-- operators dan angka -->
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span class="operator">+</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span class="operator">-</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span class="operator">/</span>
    <span>0</span>
    <span>.</span>
    <span class="eval">=</span>
    <span class="operator">x</span>
   </div>
  </div>
    </body>
</html>

Kemudian simpan dengan nama index.html, dan simpan dalam folder yang teah di buat sebelumnya.

CSS

Sekarang untuk mempercantik tampilan kalkulator anda sekarang buat file baru kemudian ketikan script berikut :

/* Basic reset */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 
 /* Better text styling */
 font: bold 14px Arial, sans-serif;
}


/* A nice BG gradient */
html {
 height: 100%;
 background: white;
 background: radial-gradient(circle, #fff 20%, #ccc);
 background-size: cover;
}

/* Using box shadows to create 3D effects */
#calculator {
 width: 325px;
 height: auto;
 
 margin: 100px auto;
 padding: 20px 20px 9px;
 
 background: #9dd2ea;
 background: linear-gradient(#9dd2ea, #8bceec);
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}

/* Top portion */
.top span.clear {
 float: left;
}

/* Inset shadow on the screen to create indent */
.top .screen {
 height: 40px;
 width: 212px;
 
 float: right;
 
 padding: 0 10px;
 
 background: rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
 
 /* Typography */
 font-size: 17px;
 line-height: 40px;
 color: white;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 text-align: right;
 letter-spacing: 1px;
}

/* Clear floats */
.keys, .top {overflow: hidden;}

/* Applying same to the keys */
.keys span, .top span.clear {
 float: left;
 position: relative;
 top: 0;
 
 cursor: pointer;
 
 width: 66px;
 height: 36px;
 
 background: white;
 border-radius: 3px;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
 
 margin: 0 7px 11px 0;
 
 color: #888;
 line-height: 36px;
 text-align: center;
 
 /* prevent selection of text inside keys */
 user-select: none;
 
 /* Smoothing out hover and active states using css3 transitions */
 transition: all 0.2s ease;
}

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
 background: #FFF0F5;
 margin-right: 0;
}

.keys span.eval {
 background: #f1ff92;
 box-shadow: 0px 4px #9da853;
 color: #888e5f;
}

.top span.clear {
 background: #ff9fa8;
 box-shadow: 0px 4px #ff7c87;
 color: white;
}

/* Some hover effects */
.keys span:hover {
 background: #9c89f6;
 box-shadow: 0px 4px #6b54d3;
 color: white;
}

.keys span.eval:hover {
 background: #abb850;
 box-shadow: 0px 4px #717a33;
 color: #ffffff;
}

.top span.clear:hover {
 background: #f68991;
 box-shadow: 0px 4px #d3545d;
 color: white;
}

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
 box-shadow: 0px 0px #6b54d3;
 top: 4px;
}

.keys span.eval:active {
 box-shadow: 0px 0px #717a33;
 top: 4px;
}

.top span.clear:active {
 top: 4px;
 box-shadow: 0px 0px #d3545d;
}

Kemudian simpan dengan nama style.css, simpan dalam folder yang sama dengan index.html

Javascript

Sekarang untuk perhitungannya kita menggunakan javascript, buatlah sebuah file baru kemudian ketikan script berikut :

// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
 keys[i].onclick = function(e) {
  // Get the input and button values
  var input = document.querySelector('.screen');
  var inputVal = input.innerHTML;
  var btnVal = this.innerHTML;
  
  // Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
  // If clear key is pressed, erase everything
  if(btnVal == 'C') {
   input.innerHTML = '';
   decimalAdded = false;
  }
  
  // If eval key is pressed, calculate and display the result
  else if(btnVal == '=') {
   var equation = inputVal;
   var lastChar = equation[equation.length - 1];
   
   // Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
   equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
   
   // Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
   if(operators.indexOf(lastChar) > -1 || lastChar == '.')
    equation = equation.replace(/.$/, '');
   
   if(equation)
    input.innerHTML = eval(equation);
    
   decimalAdded = false;
  }
  
  // Basic functionality of the calculator is complete. But there are some problems like 
  // 1. No two operators should be added consecutively.
  // 2. The equation shouldn't start from an operator except minus
  // 3. not more than 1 decimal should be there in a number
  
  // We'll fix these issues using some simple checks
  
  // indexOf works only in IE9+
  else if(operators.indexOf(btnVal) > -1) {
   // Operator is clicked
   // Get the last character from the equation
   var lastChar = inputVal[inputVal.length - 1];
   
   // Only add operator if input is not empty and there is no operator at the last
   if(inputVal != '' && operators.indexOf(lastChar) == -1) 
    input.innerHTML += btnVal;
   
   // Allow minus if the string is empty
   else if(inputVal == '' && btnVal == '-') 
    input.innerHTML += btnVal;
   
   // Replace the last operator (if exists) with the newly pressed operator
   if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
    // Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
    input.innerHTML = inputVal.replace(/.$/, btnVal);
   }
   
   decimalAdded =false;
  }
  
  // Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
  else if(btnVal == '.') {
   if(!decimalAdded) {
    input.innerHTML += btnVal;
    decimalAdded = true;
   }
  }
  
  // if any other key is pressed, just append it
  else {
   input.innerHTML += btnVal;
  }
  
  // prevent page jumps
  e.preventDefault();
 } 
}

Kemudian simpan dengan nama calc.js, letakan dalam folder yang sama dengan sebelumnya. Kemudian download prefixfree-1.0.7.js dan jquery.min.js disini : DOWNLOAD 

Letakan file tersebut dengan folder yang sama dengan sebelumnya.

Sekarang buka kembali file index.html anda dan letakan CSS serta Javasript anda, sehingga sekarang script index.html anda menjadi seperti ini :

<!DOCTYPE html>
<html>
 <head>          
 <link href="style.css" rel="stylesheet">
    </head>
    <body>
  <div id="calculator">
   <!-- Screen and clear key -->
   <div class="top">
    <span class="clear">C</span>
    <div class="screen"></div>
   </div>
   
   <div class="keys">
    <!-- operators and other keys -->
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span class="operator">+</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span class="operator">-</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span class="operator">/</span>
    <span>0</span>
    <span>.</span>
    <span class="eval">=</span>
    <span class="operator">x</span>
   </div>
  </div>
  <script src="prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
 <script src="jquery.min.js" type="text/javascript" type="text/javascript"></script>
 <script src="calc.js" type="text/javascript" type="text/javascript"></script>
    </body>
</html>

Sekarang kakulator anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Read More