Category: Tutorial


Membuat Popup Image Gallery Dengan Jquery dan HTML5

By Irvan Galuh,

 
Image Popup atau Photo Popup yaitu gambar gambar yang akan menampilkan ukuran yang lebih besar jika salah satu gambar thumbnail nya di klik.

 

Beberapa hari yang lalu ada seorang follower di twitter yang menanyakan tentang cara membuat gambar popup untuk gallery website.

 

Untuk itu kita akan mencoba membuatkan nya, lengkap dengan bahan dan cara singkatnya 🙂


Ingredients

 

Bahan-bahan yang kita perlukan adalah :


*Kayak mau masak 🙂


1. White Carbonfiber Patter dari subtlepattern
2. Photo dari Bartek Elsner
3. Jquery
4. Jquery Lightbox


Code HTML (index.html)

 

Berikut ini kode HTML untuk bagian [head] [/head]



<link rel=”stylesheet” type=”text/css” href=”css/twd-base.css” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css” media=”screen” />

<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>

Bagian ini digunakan mengaktifkan Jquery Lightbox dengan target ID #gallery

<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>

 

Code untuk BODY [body] [/body]


<section>

<div id=”gallery”>
<ul>
<li>
<a href=”photo/1.jpg” title=”Satu”>
<img src=”photo/thumb/1.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/2.jpg” title=”Dua”>
<img src=”photo/thumb/2.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/3.jpg” title=”Tiga”>
<img src=”photo/thumb/3.jpg” alt=”tutorial web design”/>
</a>
</li>
<li>
<a href=”photo/4.jpg” title=”Empat”>
<img src=”photo/thumb/4.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/5.jpg” title=”Lima”>
<img src=”photo/thumb/5.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/6.jpg” title=”Lima”>
<img src=”photo/thumb/6.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/7.jpg” title=”Lima”>
<img src=”photo/thumb/7.jpg” alt=”tutorial web design” />
</a>
</li>
<li>
<a href=”photo/8.jpg” title=”Lima”>
<img src=”photo/thumb/8.jpg” alt=”tutorial web design” />
</a>
</li>
</ul>
</div>

</section>


Code CSS (css/style.css)

 

Untuk mempercantik tampilan awal gunakan code css berikut ini, sedangkan untuk popup lightbox tidak perlu dirubah, kecuali jika diinginkan dan diperlukan.


body{background:url(‘../images/white_carbonfiber.png’);}

section{width:672px;margin:20px auto;background:rgba(255,255,255,.3)}
#gallery{padding:10px}
#gallery ul{
list-style-type:none;
}
#gallery ul li{
display:inline-block;
padding:5px;
}
#gallery ul li img:hover{
opacity:0.8;
}.



Oke sekian tutorial kali ini, semoga bermanfaat 🙂




SUMBER = http://www.tutorial-webdesign.com/membuat-popup-photo-jquery/

  Category: html, jquery, Tips, Tutorial
  Comments: Comments Off on Membuat Popup Image Gallery Dengan Jquery dan HTML5

Membatasi Input text dengan Jquery | ala Twitter

By Irvan Galuh,

 
Beberapa waktu lalu saya diminta untuk membuat sebuah web aplikasi untuk keperluan lomba menulis cerita, cerita tersebut panjang nya hanya boleh 700 karakter.

Bagaimana caranya agar data yang tersimpan ke database tidak lebih dari 700 karakter?

Bagaimana pula caranya agar user mengetahui sudah berapa banyak karakter yang mereka tulis (bagian dari user experiance) ?

 

Ada 2 cara yang bisa digunakan.

1. Membatasi dengan PHP (Server site)
2. Membatasi dengan Javascript/Jquery (Client site)

Kali ini akan dibahas dengan Javascript, khususnya menggunakan Jquery.
Seperti apa yang akan dibuat?
Yang kita buat mungkin akan mirip dengan twitter, dimana twitter membatasi pengguna dengan hanya mengizinkan menulis 140 karakter untuk setiap kali posting status.
Mirip dengan kasus membatasi karakter untuk cerita.

Bagaimana membuat nya?

Struktur HTML (index.html)

 

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>Limit Input Jquery</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.2.min.js”></script>
<script type=”text/javascript”>
<!– Javascript ditulis disini –>
</script>
<style>
<!– CSS ditulis disini –>
</style>
</head>
<body>



<div class=”box”>
<h2>What’s Happening?</h2>
<textarea id=”status”></textarea>
<span id=”text_counter”></span><input type=”submit” id=”posting” value=”Post” />
</div>
<div class=”footer”><a href=”http://tutorial-webdesign.com”>Wakaka Design | <a href=”http://tutorial-webdesign.com/membatasi-input-jquery-limit”>Back to Tutorial</div>

</body>
</html>


Code Javascript


$(document).ready(function(){
var left = 140
$(‘#text_counter’).text(‘Characters left: ‘ + left);

$(‘#status’).keyup(function () {

left = 140 – $(this).val().length;

if(left < 0){
$(‘#text_counter’).addClass(“overlimit”);
$(‘#posting’).attr(“disabled”, true);
}else{
$(‘#text_counter’).removeClass(“overlimit”);
$(‘#posting’).attr(“disabled”, false);
}

$(‘#text_counter’).text(‘Characters left: ‘ + left);
});
});

Code CSS

body{background:#222 url(http://subtlepatterns.com/patterns/natural_paper.png)}
a{text-decoration:none;color:#999}
textarea{
width:100%;
height:50px;
display:block
}
input[type=”submit”]{padding:5px 10px;}
#text_counter{float:right;}
.box{
overflow:hidden;
width:400px;
margin:150px auto;
background:#f4f4f4;
padding:10px 30px;
box-shadow:0 0 10px #f4f4f4;
-webkit-box-shadow:0 0 10px #f4f4f4;
}
.overlimit{color: red;}
.footer{width:400px;padding:10px;margin:0 auto;text-alig



Oke sekian tutorial kali ini, semoga berguna untuk anda yang sedang belajar Jquery 🙂




SUMBER = http://www.tutorial-webdesign.com/jquery-limit-input/

  Category: jquery, Tips, Tutorial
  Comments: Comments Off on Membatasi Input text dengan Jquery | ala Twitter

Memberi Efek Animasi Warna Pada Gambar Dengan CSS3 Filter

By Irvan Galuh,

Membuat efek dengan css semakin marak saat ini, dengan menggunakan CSS Filter kita bisa membuat efek-efek yang biasanya kita temukan di Photoshop, bahkan efek-efek seperti instagram bisa kita ciptakan dengan kemampuan CSS3. CSS Filter ini relatif masih baru, dan masih jarang digunakan.




Pada tutorial kali ini kita akan mencoba membuat efek dengan CSS Filter di gabung dengan CSS Animation sehingga akan menghasilkan efek transisi warna gambar yang menarik. Sayang nya baru support browser webkit seperti Google Chrome atau Safari.

Penggunaan: Efek ini bisa digunakan untuk mempercantik Header, Gambar di website gallery, dan lainnya.



Langsung saja kita mulai dengan membuat file html.


HTML

Pada tulisan ini saya hanya menampilkan satu div saja, walaupun dalam demo nya akan banyak div karena untuk mempercantik tampilan demo, tapi intinya hanyalah satu div yang ada efek saja.



<div class=”column1 my-cell”>
<img src=”http://imcreator.com/wp-content/uploads/2014/01/wpid-Featured_Picture22.jpg” alt=””>
<div class=”desc”>
<h1>Tutorial Web Design Indonesia</h1>
<p><a href=”http://www.tutorial-webdesign.com”>http://www.tutorial-webdesign.com</a></p>
</div>
</div>



Yang perlu diperhatikan disitu hanyalah pemberian class column1, karena kolom itu yang akan diberi efek dengan css.


CSS

Untuk memberi efek pada div yang berisi gambar tersebut kita kasih efek dengan menggunakan css berikut ini


.column1{
position: relative;
}
.column1 img{
width: 100%;
height: auto;
}

.desc{
position: absolute;
top: 50%;
left: 5%;
}
.desc h1{
color: #fff;
font-family: ‘Hammersmith One’, sans-serif;
font-size: 20px;
}
.desc a{
color: #ddd;
}

.column2{
padding: 40px;
}
.column2 p{
margin: 20px 0;
}
.column2 ul{
margin-left: 15px;
}
.column2 ul li{
border-bottom: 1px solid #ddd;
padding: 5px 0;
}

/* Animation */
@-webkit-keyframes pulse {
0% { -webkit-filter: contrast(400%) grayscale(0%); }
100% { -webkit-filter: contrast(100%) grayscale(100%); }
}
@-webkit-keyframes mover {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

.column1{

/* -webkit-filter: */
/* contrast(200%) */
/* brightness(25%) */
/* invert(100%) */
/* hue-rotate(110deg) */
/* grayscale(100%) */
/* sepia(100%) */
/* blur(10px); */

/* Bisa dipilih efek-efek diatas */

/* -webkit-transition: -webkit-filter 1s; */
-webkit-animation: pulse 3s alternate infinite
/*mover 5s alternate infinite*/;

}
.column1:hover { -webkit-filter: contrast(300%) hue-rotate(80deg) grayscale(100%) /* blur(2px) */; }

bisa dilihat disitu kita hanya menggunakan efek contrast dan grayscale saja, untuk efek lainnya bisa anda gunakan seperti invert, sepia, blur, dll.





Sekian, semoga berguna untuk anda yang sedang mendalami CSS3.

Salam web design indonesia









SUMBER = http://www.tutorial-webdesign.com/memberi-efek-animasi-warna-pada-gambar-dengan-css3-filter/

  Category: CSS, CSS, Tips
  Comments: Comments Off on Memberi Efek Animasi Warna Pada Gambar Dengan CSS3 Filter

Membuat Animasi Efek Mengetik Teks Dengan CSS

By Irvan Galuh,

Animasi mengetik teks biasanya dibuat dengan bantuan Jquery, namun pada artikel kali ini kita akan mencoba membuatnya hanya dengan CSS.Animasi ini tentunya bisa digunakan jika ingin membuat semacam presentasi di website, atau untuk sekedar mempercantik halaman website.
Ilustrasi Mengetik, credit photo by Janelene Juanillo
 
Animasi ini juga bisanya sering kita lihat di website-website yang diretas, biasanya siperetas meninggalkan jejak dengan pesan yang seolah-olah sedang diketik.

Bagaimana Membuatnya?
Untuk membuatnya tidak terlalu sulit, cukup beberapa baris kode css maka kita bisa mendapatkan efek ketikan teks tersebut pada website kita.Kode HTML

Berikut kode HTML yang digunakan


 
<p class=”wadah-mengetik”>Welcome to Tutorial Web Design Indonesia | <a href=”http://www.tutorial-webdesign.com”>http://www.tutorial-webdesign.com</a></p>
 
Bisa dilihat disitu kita membuat sebuah class dengan nama .wadah-mengetik.

Kode CSS

Untuk kode CSS nya kita menggunakan CSS Animation yang merupakan fitur dari CSS3

.wadah-mengetik
{
font-size: 22px;
width: 740px;
white-space:nowrap;
overflow:hidden;
-webkit-animation: ketik 5s steps(50, end);
animation: ketik 5s steps(50, end);
}
@keyframes ketik{
from { width: 0; }
}@-webkit-keyframes ketik{
from { width: 0; }
}

Bisa dilihat pada kode css diatas kita membuat animasi dengan nama ketik dan mengatur animasi nya pada keyframe.Selanjutnya tambahkan overflow:hidden sehingga ketika animasi mengubah ukuran paragraf ke 0 kita tidak akan dapat melihat teks. Akhirnya kita dapat menambahkan animasi ketik dengan fungsi steps()

Animasi akan meningkatkan ukuran paragraf dari 0 sampai 740px, dalam 50 frame sehingga menciptakan efek bahwa teks yang sedang diketik.


 
 
Sekian tutorial kali ini, semoga menambah wawasan dan meningkatkan skill kita semua.
 
 
 

  Category: CSS, html, Tips, Tutorial
  Comments: Comments Off on Membuat Animasi Efek Mengetik Teks Dengan CSS

Membuat Tabs Dengan CSS

By Irvan Galuh,

Membuat tab biasanya lebih populer dengan menggunakan jquery, namun sebenarnya cukup dengan css saja kita sudah bisa membuat tab yang tak kalah bagusnya.




Pada tulisan kali ini kami akan menjelaskan secara singkat cara membuat tab hanya dengan css, tanpa bantuan jquery atau javascript lainnya.


Struktur HTML

Untuk pertama kita buat dulu struktur HTML nya



<main>

<h4><a href=”http://www.tutorial-webdesign.com”>Tutorial Web Design.com</a></h4>
<h2>CSS Tabs</h2>
<input id=”tab1″ type=”radio” name=”tabs” checked>
<label for=”tab1″>Home</label>
<input id=”tab2″ type=”radio” name=”tabs”>
<label for=”tab2″>About</label>
<input id=”tab3″ type=”radio” name=”tabs”>
<label for=”tab3″>Contact</label>
<input id=”tab4″ type=”radio” name=”tabs”>
<label for=”tab4″>Social Media</label>

<section id=”content1″>
<h3>Selamat Datang TWDers</h3>
<p>Content….</p>
</section>
<section id=”content2″>
<h3>About TWD</h3>
<p>Content….</p>
</section>
<section id=”content3″>
<h3>Contact TWD</h3>
<p>Content….</p>
</section>
<section id=”content4″>
<h3>Social Media</h3>
<p>Content…</p>
</section>
</main> 



Bisa dilihat pada script diatas, untuk membuat Judul dari Tab kita menggunakan tag input dan lebel, pada contoh tersebut kita membuat 4 tab, dimana setiap tab di beri ID tab1, tab2, tab3, tab4



Sedangkan untuk konten dari setiap tab dibuat dengan tag section yang masing-masing memiliki ID content1, conten2, content3, content4.


Styling dengan CSS

Setelah kita membuat struktur html dari tab tersebut, tentu ini belum akan berbentuk tab, perlu di desain atau diberi style dengan menggunakan css, seperti ini lah kode css yang kita gunakan

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
background: #5B264E;
font-family: “Open Sans”, “Arial”;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: #B7977B;
}
main {
background: #FFF;
width: 500px;
margin: 50px auto;
padding: 10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
font-size: 13px;
}

/* Important code */
input, section {
clear: both;
padding-top: 10px;
display: none;
}
label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
border-top: 2px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #DDD;
}
label:hover {
cursor: pointer;
text-decoration: underline;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
display: block;
}
input:checked + label {
border-top-color: #B7977B;
border-right-color: #DDD;
border-left-color: #DDD;
border-bottom-color: transparent;
text-decoration: none;
}


Kode CSS untuk Tab

Yang paling penting di perhatikan pada kode diatas adalah kode yang kami tandai dengan /* Important Code */ sampai dengan akhir.

Dimana kode tersebut lah yang merubah tag input menjadi berbentuk tab, kenapa menggunakan input tipe radio? karena tab biasanya hanya memiliki satu bagian yang aktif sedangkan yang lain akan tertutup, untuk itu hanya input bertipe radio yang memungkinkan untuk di pilih seperti itu.

Jadi logika sederhanya begini: tag section pada saat diload akan disembunyikan, ketika salah satu ID tab sedang aktif (salah satu input radio dipilih), maka konten dari ID tersebut akan ditampilkan, dengan menggunakan perintah display:block



Demikian tutorial kita kali ini, salam web design & development indonesia.





SUMBER = http://www.tutorial-webdesign.com/membuat-tabs-dengan-css/

  Category: CSS, Tips, Tutorial
  Comments: Comments Off on Membuat Tabs Dengan CSS

Membuat Gambar Hitam Putih Dengan CSS Filter

By Irvan Galuh,

Membuat gambar berwarna menjadi hitam putih dengan CSS3 adalah bahasan kita kali ini.

Dulu kita harus menggunakan Photoshop untuk memberi efek photo grayscale (hitam putih) untuk sebuah gambar, namun sekarang dengan kecanggihan fitur-fitur css3 kita tidak perlu capek2 mengeditnya di Photoshop, cukup dengan beberapa baris kode css kita sudah bisa membuat foto berwarna menjadi hitam putih.

Image by : comzeraddt
 

Beberapa bulan yang lalu tutorial-webdesign.com pernah membahas juga pada tulisan Membuat Efek-efek instagram dengan css3 filter, namun sampai saat ini belum support Firefox, Namun kali ini kita akan coba membuat yang efek grayscale yang bisa dijalankan di Firefox.

Oke langsung saja kita praktek membuat.

Siapkan sebuah file dengan nama grayscale.html dengan struktur sebagai berikut


<h2>CSS Filter : <small><a href=”http://www.tutorial-webdesign.com/grayscale-css3-filter/”>http://www.tutorial-webdesign.com</a></small></h2>
<div class=”normal”>
<img src=”http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg” alt=””>
</div>
<div class=”grayscale”>
<img src=”http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg” alt=””>
</div>

Untuk kode css nya seperti ini


 
<pre><code> .grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”); /* Firefox 3.5+ */
}
.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”); /* Firefox 3.5+ */
}


Pada css diatas kita membuat efek grayscale(hitam putih), namun ketika mouse hover gambar kembali berwarna.

Sekian tulisan kali ini, semoga bermanfaat.

SUMBER = http://www.tutorial-webdesign.com/grayscale-css3-filter/