Script Versus CSS3, What's Your Choice!

Memang sedikit berkendala jika sobat kepengen bisa kayak itu, mau seperti ini tetapi minim dengan ilmunya. Anggap diri kita kek bayi baru lahir yang baru belajar berbahasa. Bahasa web tentunya yg Beben maksudkan disini yah ;)) Rajin pangkal pandai dalam kasus ini berlaku. Semakin kita rajin membaca, praktek or else guna mengasah skill & kemampuan, maka dipastikan keinginan ini-itu bisa terkabulkan :D Referensi web HTML bisa disatroni HTML YA HTML serta mengenai CSS agan caplok deh All About CSS.
Kenapa eh kenapa Beben Koben si Bloglang anu Ganteng Kalem tea membeberkan pernyataan diatas! Karena eh karena mau tidak mau jangan sampai tertinggal dengan fitur CSS3 makin hari makin menggelitik kreatifitas :x

Lihat perubahan drastis pada beberapa contoh yang dahulu mesti memakai script sekarang bisa hanya dengan penggunaan CSS3. Sobat V Divya Sai selaku owner @BloggerStop dot net pernah memosting Share & Boomark with Boucing Effect with jQuery :-bd How about this my brooo Bouncing Effect with CSS3 Transition or jQuery :-/
Apa beben bilang, ketinggalan sedikit dari para developer maka akan semakin jauh sobat-sabit berada di belakang ;)) SEMANGAT!!!
Dahulu kala menginginkan efek nudging sama toh harus pakai script! Apa itu NUDGING, lirik diblog demo sobat satu ini (tengok disebelah kiri blog) Klik buat mengambil link!
Penjelasannya ada disini, tapi mungkin cara menjelaskannya hanya terfokus pada scriptnya saja Menambahkan Effect JQuery Link Nudging Pada Tabel. Yuk kita kuak yg ada didemo sebelah kirinya itu loh ;)) :D

jQuery Script

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>

<script type="text/javascript">
//<![CDATA[
$(function () {
$('#menugigir a').stop().animate({
'marginLeft': '-50px'
}, 1000);
$('#menugigir > li').hover(

function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 500);
}, function () {
$('a', $(this)).stop().animate({
'marginLeft': '-50px'
}, 300);
});
});
//]]>
</script>

Script warna biru jangan dipakai lagi kalau memang sudah ada, sisipkan saja script berikutnya diatas tag </body>

Kode CSS

ul#menugigir {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menugigir li {
width: 100px;
}
ul#menugigir li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
filter: alpha(opacity=80); /* MSIE/PC */
-moz-opacity: 0.8; /* Mozilla 1.6 and older */
opacity: 0.8;
}
ul#menugigir .rumah a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menugigir .about a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menugigir .search a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menugigir .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menugigir .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menugigir .tools a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menugigir .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

Seperti biasa sebelum/diatas tag </b:skin>

Kode HTML

<ul id="menugigir">
<li class="rumah">
<a href="LINKANDA" title="home"></a>
</li>
<li class="about">
<a href="LINKANDA" title="Tentang"></a>
</li>
<li class="search">
<a href="LINKANDA" title="Cari"></a>
</li>
<li class="tools">
<a href="LINKANDA" title="Alat"></a>
</li>
<li class="rssfeed">
<a href="LINKANDA" title="RSS Feed"></a>
</li>
<li class="komentar">
<a href="LINKANDA" title="Komentar"></a>
</li>
<li class="kontak">
<a href="LINKANDA" title="Kontak"></a>
</li>
</ul>Didalam tag <body> ... </body> bisa jg Add a Gadget ► HTML/Javascript ;)

Save

demo
Proses panjang guna mencapai efek nudging yak :D Bagaimana peranan CSS3 memainkan fitur nudging effect ini :-? Jurus Transition :-" yang memainkan peranan ;)) Look demo simple berikut arahkan mouse...

Lorem Ipsum Pret

Pret Lorem Ipsum

Beben kasih 2 contoh kode efek nudging, cek gi dot

/* transition code with "li (list)" attribute */

#nudgeList li a {
cursor: pointer;
-webkit-transition: padding-left 300ms ease-out;
-moz-transition: padding-left 300ms ease-out;
}
#nudgeList li a:hover {
padding-left: 10px;
}

/* transition code with "class" attribute */

.nudge {
-moz-transition: all 0.4s ease-out;  
-o-transition: all 0.4s ease-out;  
-webkit-transition: all 0.4s ease-out;  
-ms-transition: all 0.4s ease-out;  
transition: all 0.4s ease-out;  
}
.nudge:hover {
margin-left: 25px;
padding-left: 5px;
}

Pemakaian!
<ul id="nudgeList">
<li>
<a href=''>Link 1</a>
</li>
<li>
<a href=''>Link 2</a>
</li>
<li><a href=''>Link 3</a>
</li>
</ul>

<a href="Disini URL" class="nudge">Disini teks</a>Perhatikan tulisan berwarna, satuan 1.0s atau 300ms bisa sobat atur. Begitu caranya kalo pakek CSS3 sob :) Referensi sudah tersedia, developer dimana-mana, balik keatas baca muqadimah Beben :P
Koben tutup artikel kali ini, semoga sobat semakin tergelitik mendalami bahasa web. Sorot kotak dibawah ini, that's transition trick ;)

Belajar dan Prakteklah ^_^

Happy blogging \m/