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 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

Membuat Slide Menu Dengan CSS dan Jquery

By Irvan Galuh,

Menu yang ketika Mouse Hover akan berganti seperti slide, dibuat dengan CSS dan Jquery.
Kali ini kita akan mencaba membuat contoh menu yang bisa diterapkan di website anda, menu ini cukup menarik karena terlihat agak animatif dengan slide nya.

Oke kita mulai saja langsung

Ingredients

  1. Font Electrolize dari Google Web Fonts
  2. Jquery
  3. Subtlepattern Egg-Shell

Struktur HTML Menu

<div class=”mn-container”>

<ul id=”topnav”>
<li><a href=””>Home</a></li>
<li><a href=””>Services</a></li>
<li><a href=””>Portfolio</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>About</a></li>
<li><a href=””>Contact</a></li>
</ul>
</div>

Disitu kita membuat container untuk menu, dan sebuah unordered list untuk list menu nya.


Code untuk bagan menu

.mn-container{
margin:50px auto;
width:680px;
padding:20px;
background:rgba(255,255,0,.1);
overflow:hidden;
border:1px solid rgba(225,225,225,.9)
}


Berikut ini code untuk List Menu nya

ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
font-family: ‘Electrolize’, sans-serif;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #333;
background:rgba(255,255,255,.5);
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
}
ul#topnav a{
color: #ff0000;
background-position: left bottom;
}
ul#topnav span{
background-position: left top;
}


Code Jquery untuk membuat menu terlihat berganti seperti sebuah slide


$(document).ready(function() {

$(“#topnav li”).prepend(“<span></span>”);

$(“#topnav li”).each(function() {
var linkText = $(this).find(“a”).html();
$(this).find(“span”).show().html(linkText);
});

$(“#topnav li”).hover(function() { //On hover…
$(this).find(“span”).stop().animate({
marginTop: “-40”
}, 500);
} , function() { //On hover out…
$(this).find(“span”).stop().animate({
marginTop: “0”
}, 500);
});

});


Oke sekian tulisan saya kali ini, semoga bermanfaat ya.

Salam Web Design Indonesia 🙂



SUMBER = http://www.tutorial-webdesign.com/membuat-slide-menu-dengan-css-dan-jquery/

  Category: CSS, jquery
  Comments: Comments Off on Membuat Slide Menu Dengan CSS dan Jquery

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