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

Cara Membuat Menu Vertikal Keren Dengan HTML5 dan CSS3

Cara Membuat Menu Vertikal Keren Dengan HTML5 dan CSS3 - Menu adalah sistem navigasi yang digunakan user untuk memilih dalam melakukan suatu operasi tertentu. Di dalam website terkadang kita meletakan menu sebagai navigasi website untuk merujuk ke suatu halaman tertentu, pada umumnya menu berdasarkan orientasinya terbagi menjadi dua yaitu horizontal dan vertikal. Pada kali ini kita akan membuat menu yang berbentuk vertikal atau ke memanjang ke bawah. Menu ini sangat cocok digunakan sebagai backend website, Menu vertikal ini dibuat dengan HTML5 dan CSS3 sehingga tidak berat.

Baca juga  : Cara Membuat Slider Keren Dengan HTML5 dan CSS3

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

HTML

Buatlah sebuah folder baru dengan nama vertikal menu, kemudian buka notepad++ anda dan masukan script berikut :

<!DOCTYPE html>
<html>
 <head>          

    </head>
    <body>
 <div id="wrapper">
 <h1>Menu Vertikal Dengan Animasi Link</h1>
 <div class="mobile">
  <!-- Checkbox to toggle the menu -->
  <input type="checkbox" id="tm">
  <!-- The menu -->
  <ul class="sidenav">
   <li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li>
   <li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>
   <li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>
   <li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>
   <li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li>
   <li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>
  </ul>
  <!-- Content area -->
  <section>
   <!-- Label for #tm checkbox -->
   <label for="tm">Click Me</label>
  </section>
 </div>
</div>
    </body>
</html>

Sekarang simpan dengan di dalam folder sebelumnya dengan nama index.html

CSS

Sekarang tambahkan script CSS di antara tag <head></head> sehingga script anda sekarang sepenuhnya menjadi :

<!DOCTYPE html>
<html>
 <head>          
  <style class="csscreations">
  /*Fontawesome Iconfont*/
  @import url(http://thecodeplayer.com/uploads/fonts/font-awesome-4.0.1/css/font-awesome.min.css);
  /*Montserrat, Open Sans*/
  @import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300);

  * {margin: 0; padding: 0;}
  body {background: #333;}

  #wrapper {width: 645px; height: 500px; margin: 35px auto 0 auto;}
  h1 {
   color: white; font: 300 40px 'Open Sans';
   width: 300px; padding: 30px; float: left;
  }

  .mobile {
   float: left; position: relative;
   box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
   overflow: hidden;
  }
  /*Hiding the checkbox*/
  #tm {display: none;}
  /*Content area*/
  .mobile section {
   background: url("mb1.png");
   width: 285px; height: 500px;
   position: relative; transition: all 0.25s;
  }
  .mobile section label {
   color: white; font: bold 14px Montserrat; text-align: center;
   border: 2px solid white; border-radius: 4px;
   display: block; padding: 10px 0;
   width: 60%; position: absolute; left: 20%; top: 100px;
   cursor: pointer; text-transform: uppercase;
  }
  /*Nav styles*/
  .sidenav {
   background: rgb(50, 60, 60); width: 150px;
   position: absolute; left: 0; top: 0; bottom: 0; padding-top: 100px;
  }
  .sidenav li {list-style-type: none;}
  .sidenav a { color: white; text-decoration: none; }
  .sidenav b {
   font: bold 12px/48px Montserrat; display: block;
   opacity: 0; -webkit-transform: translateX(50px); transition: all 0.4s;
  }
  .sidenav i {
   display: block; width: 50px; float: left; 
   font-size: 16px; line-height: 48px; text-align: center;
  }
  /*Animation controls dengan checkbox hack*/
  /*Animate content area to the right*/
  #tm:checked ~ section {-webkit-transform: translateX(150px);}
  /*Animate links dari kanan ke kiri + fade in effect*/
  #tm:checked ~ .sidenav b {opacity: 1; -webkit-transform: translateX(0);}

  /*Adding delay animation - in multiples of .08s*/
  #tm:checked ~ .sidenav li:nth-child(1) b {transition-delay: 0.08s;}
  #tm:checked ~ .sidenav li:nth-child(2) b {transition-delay: 0.16s;}
  #tm:checked ~ .sidenav li:nth-child(3) b {transition-delay: 0.24s;}
  #tm:checked ~ .sidenav li:nth-child(4) b {transition-delay: 0.32s;}
  #tm:checked ~ .sidenav li:nth-child(5) b {transition-delay: 0.40s;}
  #tm:checked ~ .sidenav li:nth-child(6) b {transition-delay: 0.48s;}
  </style>
    </head>
    <body>
 <div id="wrapper">
 <h1>Menu Vertikal Dengan Animasi Link</h1>
 <div class="mobile">
  <!-- Checkbox to toggle the menu -->
  <input type="checkbox" id="tm">
  <!-- The menu -->
  <ul class="sidenav">
   <li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li>
   <li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>
   <li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>
   <li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li>
   <li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li>
   <li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>
  </ul>
  <!-- Content area -->
  <section>
   <!-- Label for #tm checkbox -->
   <label for="tm">Click Me</label>
  </section>
 </div>
</div>
    </body>
</html>

Kemudian untuk bankground menu simpan file gambar berikut ini dalam folder yang sama dengan sebelumnya simpan dengan nama mb1.png

Background Vertikal Menu

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

Read More