Category: CSS


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/

Tips Membuat Horizontal Menu Dengan CSS

By Irvan Galuh,

Navigasi merupakan hal yang ponting untuk ada di website, ini untuk memudahkan user dalam menjelajahi isi website, Navigasi bisa disebut menu, menu ada yang berbentuk Vertical, dan ada juga yang berbentuk Horizontal.Menu Vertical adalah menu yang berderet kebawah, sedangkan Horizontal Memanjang Kesamping.

Pada tips singkat berikut ini kita akan mencoba teknik dasar bagaimana teknik dasar membuat Horizontal menu dengan CSS.




Disini kita juga akan belajar Pseudo-element :before dan :first-child milik CSS.

Oke kita mulai dengan Membuat Struktur HTML seperti berikut ini



HTML



<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>Basic Horizontal Menu CSS : DEMO</title>
<style type=”text/css”>
<!– /CSS Code Here –>
</style>
</head>
<body>

<div class=”demo-container”>
<h1>Tutorial-Webdesign.com</h1>
<ul class=”horizon-menu”>
<li><a href=”#” class=””>Home</a></li>
<li><a href=”#” class=”lang”>About</a></li>
<li><a href=”#” class=”lang”>Work</a></li>
<li><a href=”#” class=”lang”>Portfolio</a></li>
<li><a href=”#” class=”lang”>Contact</a></li>
</ul>

</div>

</body>
</html>



Setelah membuat struktur HTML nya, sekarang kita mempercantik dengan CSS

CSS




h1{margin:5px}
.demo-container{margin:50px;}
.horizon-menu{list-style-type:none;padding:0;margin:0;background:#fff000;padding:10px;border-radius:5px;box-shadow:inset 0 0 5px 2px #f4f4f4}
.horizon-menu a{text-decoration:none; color:#111;font-weight:bold}
.horizon-menu li{display:inline;margin:5px 0}
.horizon-menu li:before{content:’ | ‘;color:rgba(0,0,0,.1)}
.horizon-menu li:first-child:before{content:’ ‘}
.horizon-menu li a{margin-right:5px; margin-left:5px;padding:5px;border-radius:5px;
-webkit-transition:background-color 500ms ease-in-out;
-moz-transition:background-color 500ms ease-in-out;
}
.horizon-menu li a:hover{background-color:orange}



Penjelasan:


Inti utama dalam membuat menu horizontal yaitu pada baris code 4, dimana tertulis display:inline


.horizon-menu li{display:inline;margin:5px 0}


Sedangkan untuk membuat pemisah kita menggunakan li:before{content:’ | ‘}, dimana akan menulis karakter [ | ]

Agar pemisah tidak muncul diawal maka kita membutuhkan li:first-child:before{content:’ ‘}

Tambahan:

Untuk membuat menu tersebut Responsive terhadap lebar layar, dimana akan berfungsi dengan baik jika dibuka di layar yang lebih kecil seperti Smartphone atau PC Tablet, maka kita tambahkan code berikut:


@media (max-width:767px){
.demo-container{margin:5px;}
.horizon-menu li{display:block}
.horizon-menu li:before{content:”;color:rgba(0,0,0,.1)}
}



Oke sekian tips kali ini, semoga berguna






SUMBER = http://www.tutorial-webdesign.com/tips-membuat-horizontal-menu-dengan-css3/


  Category: CSS, CSS, Tutorial
  Comments: Comments Off on Tips Membuat Horizontal Menu Dengan CSS

Mendesain halaman Gallery dengan CSS3

By Irvan Galuh,

Membuat halaman Profile atau halaman Team work dalam sebuah website perusahaan itu penting, halaman itu biasanya berisi foto anggota tim dan jabatannya pekerjaannya.

Dalam tutorial ini kita akan mencoba membuat halaman tersebut agar terlihat lebih menarik. Idenya yaitu membuat biodata muncul ketika mouse berada diatas gambar dan disaat itu juga gambar yang lain akan ikut meredup. Seperti gambar berikut. Kita gunakan CSS Transition dan bantuan Opacity 😀







Bahan-Bahan

Rebel Background Pattern dari subtlepattern

2 Buah Font Doppio One dan Noticia Text yang diembed dari Google Webfonts

Foto Avatar dari Sarah Parmenter

Struktur HTML


   <ul class=”profiles”>

<li class=”maurice”>
<a href=”#”>
<div class=”bio”>
<div class=”name”>Maurice</div>
<div class=”position”>Co-Founder</div>
<div class=”description”>Vivamus ornare massa in nisl posuere sit amet interdum nisl accumsan. Cras accumsan viverra justo sit amet faucibus.</div>
</div>
</a>
</li>

<li class=”adrian”>
<a href=”#”>
<div class=”bio”>
<div class=”name”>Adrian</div>
<div class=”position”>Manager</div>
<div class=”description”>Fusce ornare quam ut leo aliquam et dignissim urna pulvinar</div>
</div>
</a>
</li>

<!– Next Member Thumbnail –>
</ul>


     
disitu bisa kita lihat bahwah ada unordered list (ul), dan setiap list anggota disertai dengan biodata singkat.


CSS

Untuk mempercantik struktur HTML dan membuatnya lebih animatif kita akan banyak menggunakan css transition

Halaman akan kita buat selebar 660px, karena kita butuh 3 kolom untuk gambar yang berukuran 200px * 6 dan margin 10px * 6


.profiles{
overflow:hidden;
list-style:none;
width:660px;
margin:40px auto;
padding:10px 20px;
}




Untuk membuat list foto yang dibuat menjadi 3 kolom kita akan butuhkan float:left


.profiles li{
display:inline;
float:left;
margin:10px;
transition: opacity 500ms ease-in-out;
box-shadow: inset 0 0 1px 0px #000;
}



Untuk membuat biodata meredup yaitu background:rgba(0,0,0,0.8);


.profiles li a .bio{
color:#fff;
height:90%;
width:90%;
background:rgba(0,0,0,0.8);
opacity:0;
padding:5%;
box-shadow: inset 0 0 5px 5px #000;
}




Untuk mempercantik elemen-elemen biodata menggunakan font yang telah ditentukan



name{font-size:20px;font-weight:bold;font-family: ‘Doppio One’, sans-serif;color:#fff000}
.position{font-size:18px;font-family: ‘Noticia Text’, serif;}
.description{padding-top:10px;font-size:13px;font-family: ‘Noticia Text’, serif;}




Untuk memunculkan foto kita jadikan background



li.maurice{background-image:url(img/Maurice.jpeg)}
li.sarah{background-image:url(img/Sarah.png)}
li.adrian{background-image:url(img/Adrian.png)}
li.amber{background-image:url(img/Amber.jpg)}
li.giles{background-image:url(img/Giles.jpg)}
li.petra{background-image:url(img/Petra1.png)}
li.shane{background-image:url(img/Shane.jpg)}



Oke cukup sekian tutorial kali ini, perlu diperhatikan bahwa browser yang bisa menjalankan halaman ini dengan baik hanya yang sudah support CSS Transition.




SUMBER = http://www.tutorial-webdesign.com/animasi-hover-dengan-css3/



  Category: CSS, CSS
  Comments: Comments Off on Mendesain halaman Gallery dengan CSS3