Be Programer

Make your dream to be programer is happen

This is Featured Slide 1 Title

This is Featured Slide 2 Title

This is Featured Slide 3 Title

This is Featured Slide 4 Title

This is Featured Slide 5 Title

Cara Membuat Slider Keren Dengan HTML5 dan CSS3

, Tidak ada komentar
Cara Membuat Slider Keren Dengan HTML5 dan CSS3

Cara Membuat Slider Keren Dengan HTML5 dan CSS3 - Slider adalah kumpulan gambar / image di satukan berbentuk galeri dan terkadang diberi berbagai animasi yang pada umumnya diletakan pada suatu halaman website untuk mempresentasikan produk website tersebut atau mempercantik tampilan website.

Baca juga : Cara Membuat Multistep Form Keren Dengan HTML5

Pada umumnya sider dibuat dengan menggabungkan HTML5 + CSS + Javascript, akan tetapi pada kali ini kita akan membuat slider accordian serderhana hanya dengan menggunakan HTML5 + CSS saja. Akan tetapi tetap menghasilkan slider yang keren dan tidak berat saat loadnya. untuk lebih jelasnya langsung saja kita mulai membuat programnya.

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

Buatlah sebuah folder baru di mana saja sesukan anda dengan nama Slider Acc. Buatlah dengan notepad atau notepad++ file baru kemudian isikan script berikut dan simpan dalam folder sebelumnya dengan nama style.css 


/*Now the styles*/
* {
 margin: 0; 
 padding: 0;
}
body {
 background: #ccc; 
 font-family: arial, verdana, tahoma;
}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
 width: 805px; height: 320px;
 overflow: hidden;
 
 /*Time for some styling*/
 margin: 100px auto;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
 width: 2000px;
 /*This will give ample space to the last item to move
 instead of falling down/flickering during hovers.*/
}

.accordian li {
 position: relative;
 display: block;
 width: 160px;
 float: left;
 
 border-left: 1px solid #888;
 
 box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 
 /*Transitions to give animation effect*/
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 /*If you hover on the images now you should be able to 
 see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
 display: block;
}

/*Image title styles*/
.image_title {
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 left: 0; bottom: 0; 
width: 640px; 

}
.image_title a {
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 20px;
 font-size: 16px;
}

HTML

Sekarang untuk tampilannya buatlah sebuah file HTML baru dengan notepad++ anda dan isi dengan script berikut :


<!DOCTYPE html>
<html>
 <head>          
  <link href="style.css" rel="stylesheet">    
    </head>
    <body>
     <!-- Kita akan membuat simple accordian dengan efek hover -->
<div class="accordian">
 <ul>
  <li>
   <div class="image_title">
    <a href="#">Slide 1</a>
   </div>
   <a href="#">
    <img src="1.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Slide 2</a>
   </div>
   <a href="#">
    <img src="2.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Slide 3</a>
   </div>
   <a href="#">
    <img src="3.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Slide 4</a>
   </div>
   <a href="#">
    <img src="4.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="#">Slide 5</a>
   </div>
   <a href="#">
    <img src="5.jpg"/>
   </a>
  </li>
 </ul>
</div>
    </body>
</html>


Simpan nama index.html dalam folder yang sama dengan CSS

Sekrang untuk gambarnya anda dapat mengambil contohnya dari sini atau menggunakan gambar sendiri, yang terpenting simpan di dalam folder yang sama dengan HTML dan CSSnya. anda dapat mengunduh source gambarnya disini beserta HTML dan CSS yang sudah jadi : DOWNLOAD

Sekarang Slider Accordian 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.
Share:
Read More

Cara Membuat Multistep Form Keren Dengan HTML5

, , , Tidak ada komentar
Cara Membuat Multistep Form Keren Dengan HTML5

Cara Membuat Multistep Form Keren Dengan HTML5 - Multistep Form adalah sekelompok inputan yang digunakan untuk mengisi dan mengirim data yang dibagi menjadi beberapa step pengisian data untuk mengatasi form standar yang panjang, form sering kali digunakan untuk membuat login, form pegisian biodata, proses penghitungan, dan berbagai macam lainya.
Form terkadang mempunyai inputan yang banyak atau panjang, sepertihalnya dalam kasus pengisian biodata diri. Dalam biodata terdapat banyak data yang harus di kirimkan seperti nama, alamat, tempat lahir,  tgl lahir, jenis kelamin, email, username, password, dll. Biasanya kita hanya akan memanjangkan form itu ke bawah atau membaginya menjadi dua kolom agar tidak terlalu panjang, akan tetapi dengan teknologi pemrograman web yang ada sekarang kita tidak perlu lagi melakukan hal tersebut.

Ketika kita menemui kasus form yang mepunyai inputan panjang kita dapat menjadinya dalam beberapa step namun tetap pada jendela dan layar yang sama sehingga mebuat website menjadi lebih ringan dengan menggunakan HTML5 dan Javascript. Untuk lebih jelasnya langsung saja kita meluncur ke programnya.

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

Buatlah sebuah folder baru di mana saja sesukan anda dengan nama Multistep Form. Sekarang untuk mempercantik tampilan mutistep form kita menjadi keren, buatlah dengan notepad atau notepad++ file baru kemudian isikan script berikut dan simpan dalam forder sebelumnya dengan nama style.css

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);
   
/*basic reset*/
* {margin: 0; padding: 0;}
 
html {
 height: 100%;
 /*Image only BG fallback*/
 background: url('gs.png');
 /*background = gradient + image pattern combo*/
 background: 
  linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), 
  url('gs.png');
}
   
body {
 font-family: montserrat, arial, verdana;
}

/*form styles*/
#msform {
 width: 400px;
 margin: 50px auto;
 text-align: center;
 position: relative;
}

#msform fieldset {
 background: white;
 border: 0 none;
 border-radius: 3px;
 box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 padding: 20px 30px;
  
 box-sizing: border-box;
 width: 80%;
 margin: 0 10%;
   
 /*stacking fieldsets above each other*/
 position: absolute;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
 display: none;
}

/*inputs*/
#msform input, #msform textarea {
 padding: 15px;
 border: 1px solid #ccc;
 border-radius: 3px;
 margin-bottom: 10px;
 width: 100%;
 box-sizing: border-box;
 font-family: montserrat;
 color: #2C3E50;
 font-size: 13px;
}

/*buttons*/
#msform .action-button {
 width: 100px;
 background: #27AE60;
 font-weight: bold;
 color: white;
 border: 0 none;
 border-radius: 1px;
 cursor: pointer;
 padding: 10px 5px;
 margin: 10px 5px;
}

#msform .action-button:hover, #msform .action-button:focus {
 box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

/*headings*/
.fs-title {
 font-size: 15px;
 text-transform: uppercase;
 color: #2C3E50;
 margin-bottom: 10px;
}

.fs-subtitle {
 font-weight: normal;
 font-size: 13px;
 color: #666;
 margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
 margin-bottom: 30px;
 overflow: hidden;
 /*CSS counters to number the steps*/
 counter-reset: step;
}

#progressbar li {
 list-style-type: none;
 color: white;
 text-transform: uppercase;
 font-size: 9px;
 width: 33.33%;
 float: left;
 position: relative;
}

#progressbar li:before {
 content: counter(step);
 counter-increment: step;
 width: 20px;
 line-height: 20px;
 display: block;
 font-size: 10px;
 color: #333;
 background: white;
 border-radius: 3px;
 margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
 content: '';
 width: 100%;
 height: 2px;
 background: white;
 position: absolute;
 left: -50%;
 top: 9px;
 z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
 /*connector not needed before the first step*/
 content: none; 
 }

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
 background: #27AE60;
 color: white;
}

Javascript

Untuk memberikan efek animasi dan membagi formnya menjadi beberapa step kita memerlukan telebih dahulu JQuery, dalam form ini kita membutuhkan dua file download filenya di sini : File1 dan File 2 
Kemudian simpan dalam folder yang sama dengan CSS sebelumnya.

Background

Untuk membuat lebih keren lagi form kita kita tambahkan gambar untuk background.

Background Multistep Form
Background Multistep Form

Simpan gambar tersebut dengan nama gs.png dan simpan dalam folder yang sama dengan CSS dan Javascript.

HTML

Sekarang untuk tampilannya buatlah sebuah file HTML baru dengan notepad++ anda dan isi dengan script berikut :

<!DOCTYPE html>
<html>
 <head>          
  <link href="style.css" rel="stylesheet">
        <!-- jQuery -->
        <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
        <!-- jQuery easing plugin -->
        <script src="jquery.easing.min.js" type="text/javascript"></script>      
    </head>
    <body>
     
        <!-- multistep form -->
        <form id="msform">
            <!-- progressbar -->
            <ul id="progressbar">
                <li class="active">Account Setup</li>
                <li>Social Profiles</li>
                <li>Personal Details</li>
            </ul>
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title">Create your account</h2>
                <h3 class="fs-subtitle">This is step 1</h3>
                <input type="email" name="email" placeholder="Email" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="password" name="cpass" placeholder="Confirm Password" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Social Profiles</h2>
                <h3 class="fs-subtitle">This is step 3</h3>
                <input type="text" name="twitter" placeholder="Twitter" />
                <input type="text" name="facebook" placeholder="Facebook" />
                <input type="text" name="gplus" placeholder="Google Plus" />
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Personal Details</h2>
                <h3 class="fs-subtitle">This is step 3</h3>
                <input type="text" name="fname" placeholder="First Name" />
                <input type="text" name="lname" placeholder="Last Name" />
                <input type="text" name="phone" placeholder="Phone" />
                <textarea name="address" placeholder="Address"></textarea>
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
            </fieldset>
        </form>
        
        <script type="text/javascript">
   //jQuery time
   var current_fs, next_fs, previous_fs; //fieldsets
   var left, opacity, scale; //fieldset properties which we will animate
   var animating; //flag to prevent quick multi-click glitches
   
   $(".next").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    
    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
    
    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
     step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale current_fs down to 80%
      scale = 1 - (1 - now) * 0.2;
      //2. bring next_fs from the right(50%)
      left = (now * 50)+"%";
      //3. increase opacity of next_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({'transform': 'scale('+scale+')'});
      next_fs.css({'left': left, 'opacity': opacity});
     }, 
     duration: 800, 
     complete: function(){
      current_fs.hide();
      animating = false;
     }, 
     //this comes from the custom easing plugin
     easing: 'easeInOutBack'
    });
   });
   
   $(".previous").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    
    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    
    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
     step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale previous_fs from 80% to 100%
      scale = 0.8 + (1 - now) * 0.2;
      //2. take current_fs to the right(50%) - from 0%
      left = ((1-now) * 50)+"%";
      //3. increase opacity of previous_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({'left': left});
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
     }, 
     duration: 800, 
     complete: function(){
      current_fs.hide();
      animating = false;
     }, 
     //this comes from the custom easing plugin
     easing: 'easeInOutBack'
    });
   });
   
   $(".submit").click(function(){
    return false;
   })
   
  </script>
    </body>
</html>

Simpan nama index.html dalam folder yang sama dengan CSS dan Javascript. di dalam HTML ini lah kita memanggil CSS dan JQuery yang kita buat sebelumnya. Dan di dalam sini kita meletakan javascript yang digunakan untuk membagi formnya menjadi beberapa step.

Sekarang Multistep form keren dengan 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 klw di IE tidak jalan saya sudah tidak heran.
Share:
Read More

Cara Membuat Game Snake Dengan HTML5

, , Tidak ada komentar
Cara Membuat Game Snake Dengan HTML5

Cara Membuat Game Snake Dengan HTML5 - HTML5 adalah generasi ke lima dari HTML yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web yang digunakan untuk menampilkan informasi di dalam internet. Perbedaan HTML 5 secara garis besar adalah HTML5 lebih mendukung dalam konten multimedia di bandingkan versi HTML sebelumnya dan juga HTML5 lebih mudah di mengerti oleh browser dan mesin.

Baca juga : Cara Membuat Kalkulator Keren Dengan CSS3 dan Javascript

Dengan HTML5 kita dapat melakukan berbagai macam animasi multimedia yang beragam jika kita bisa mengkombinasikannya dengan CSS dan JavaScript. Sebagai contoh sederhana pada kali ini kita akan membuat game snake dengan menggabungkan HTML5 dan JavaScript.

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.

HTML5

Buka Notepad++ anda kemudian buatlah sebuah file baru dengan nama snake_html5_game kemudian tuliskan script berikut :

<!DOCTYPE html> 
<html>
    <head>   
    </head>
    <body>
        <!-- HTML5 canvas untuk lokasi game -->
        <canvas id="canvas" width="450" height="450"></canvas>       
    </body>
</html>

Penjelasan : 

Kita mebuat canvas untuk lokasi game kita nanti dengan ukuran 450 x 450

Javascript

Sekarang untuk java scriptnya tambahkan java script pada script di atas, letakan di antara <head></head> sehingga script anda sekarang menjadi seperti ini :

<!DOCTYPE html> 
<html>
    <head>
        <!-- Jquery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" >
            $(document).ready(function() {
                var canvas = $("#canvas")[0];
                var ctx = canvas.getContext("2d");
                var w = $("#canvas").width();
                var h = $("#canvas").height();

                var cw = 10;
                var d;
                var food;
                var score;

                var snake_array; //membuat cell aray untuk membuat ular

                function init()
                {
                    d = "right"; //default direction
                    create_snake();
                    create_food(); //membuat makanan untuk ular
                    //score game
                    score = 0;

                    if (typeof game_loop != "undefined")
                        clearInterval(game_loop);
                    game_loop = setInterval(paint, 60);
                }
                init();

                function create_snake()
                {
                    var length = 5; //panjang ular default
                    snake_array = []; 
                    for (var i = length - 1; i >= 0; i--)
                    {
                        //membuat ular horizontal mulai dari arah kiri
                        snake_array.push({x: i, y: 0});
                    }
                }

                //membuat makanan
                function create_food()
                {
                    food = {
                        x: Math.round(Math.random() * (w - cw) / cw),
                        y: Math.round(Math.random() * (h - cw) / cw),
                    };
                }

                //Mewarnai tubuh ular
                function paint()
                {
                    ctx.fillStyle = "white";
                    ctx.fillRect(0, 0, w, h);
                    ctx.strokeStyle = "black";
                    ctx.strokeRect(0, 0, w, h);

                    //Membuat pergerakan untuk ular.
                    var nx = snake_array[0].x;
                    var ny = snake_array[0].y;
                    if (d == "right")
                        nx++;
                    else if (d == "left")
                        nx--;
                    else if (d == "up")
                        ny--;
                    else if (d == "down")
                        ny++;
                    
                    //Cek tabakan tembok
                    if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array))
                    {
                        //restart game
                        init();
                        return;
                    }
                    
                    //Cek tabrakan dengan makanan
                    if (nx == food.x && ny == food.y)
                    {
                        var tail = {x: nx, y: ny};
                        score++;
                        //membuat makanan baru
                        create_food();
                    }
                    else
                    {
                        var tail = snake_array.pop(); 
                        tail.x = nx;
                        tail.y = ny;
                    }

                    snake_array.unshift(tail); 

                    for (var i = 0; i < snake_array.length; i++)
                    {
                        var c = snake_array[i];
                        paint_cell(c.x, c.y);
                    }

                    //Mewarnai makanan
                    paint_cell(food.x, food.y);
                    //Mewarnai score game
                    var score_text = "Score: " + score;
                    ctx.fillText(score_text, 5, h - 5);
                }

                function paint_cell(x, y)
                {
                    ctx.fillStyle = "blue";
                    ctx.fillRect(x * cw, y * cw, cw, cw);
                    ctx.strokeStyle = "white";
                    ctx.strokeRect(x * cw, y * cw, cw, cw);
                }

                function check_collision(x, y, array)
                {
                    for (var i = 0; i < array.length; i++)
                    {
                        if (array[i].x == x && array[i].y == y)
                            return true;
                    }
                    return false;
                }

                //Keyboard control ular
                $(document).keydown(function(e) {
                    var key = e.which;
                    if (key == "37" && d != "right")
                        d = "left";
                    else if (key == "38" && d != "down")
                        d = "up";
                    else if (key == "39" && d != "left")
                        d = "right";
                    else if (key == "40" && d != "up")
                        d = "down";
                })
            })

        </script>
    </head>
    <body>
        <!-- HTML5 canvas untuk lokasi game -->
        <canvas id="canvas" width="450" height="450"></canvas>       
    </body>
</html>

Sekrang simpan file anda dengan ekstensi .html contoh : snake_html5_game.html.

Sekarang game 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 klw di IE tidak jalan saya sudah tidak heran.
Share:
Read More

Cari Blog Ini
Diberdayakan oleh Blogger.

Statemen Kendali / Kondisional If di C#

Statemen Kendali / Kondisional If di C#  -  C# mempunyai statemen kendali yang hampir sama dengan bahasa - bahasa pemrograman lainnya. Ter...

Label

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Label Cloud

AJAX (3) Blogging (4) C (13) C# (15) Codeigniter (5) CSS (18) Game Maker (12) Google Maps (21) HTML (46) Instaling (2) Java (12) Java Script (40) JQUERY (16) PHP (12)

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.