Make Full Stylish Dropdown use jQuery

Sobat tentu kenal dengan konten drop-down list? Satu rangkaian yang biasa dibuat dengan elemen <select> dan didalamnya ada tags <option> Artikel berikut dapat mewakili bermacam-macam gaya dari dropdown list! Jangan kalian sangka hanya elemen <select> yg dapat membuat konten drop-down. Tag <ol> or <ul> juga dapat melakukan hal serupa! Cek saja kalau tidak percaya decorate tag ol or ul with flip and unfold effect.
AA Koben kembali menemukan source dropdown full stylish karya Hampus Persson. Terintegrasi dengan jQuery script, batas konten yang pasti membuat hal scroll dilakukan di dalam konten. Pusing menjelaskannya bro :D
DEMO Original...

cdpn.io/CbltK

Pemberian value 100% pada properti width, memudahkan penempatan dropdown tersebut ;) Saya hanya merubah SCSS ke CSS saja kok :P

.dropdown {
text-align: left;
color: #343c3f;
border: 1px solid #a2acb0;
}
.dropdown.closed .dropdown-menu {
margin-top: 0px;
}
.dropdown.closed .dropdown-menu li {
height: 0px;
}
.dropdown.closed .title {
border-bottom: none;
}
.dropdown.closed .title:after {
margin-top: -20px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.dropdown .title {
width: 97.7%;
height: 21px;
padding: 10px;
color: #ddd;
cursor: pointer;
background: #222;
position: relative;
border-bottom: 1px solid #d9e1e4;
}
.dropdown .title:after {
display: block;
content: "\25be";
position: absolute;
right: 14px;
margin-top: -20px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.dropdown .dropdown-menu {
position: relative;
overflow: hidden;
max-height: 200px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-sizing: "border-box";
-moz-box-sizing: "border-box";
box-sizing: "border-box";
}
.dropdown ul {
position: absolute;
top: 0;
padding: 0;
margin: 0;
/* margin-top: 25px; */
width: 100%;
}
.dropdown ul li {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 12px;
border-bottom: 1px solid #d9e1e4;
vertical-align: top;
overflow: hidden;
cursor: pointer;
-webkit-transition: margin-top 0.5s, height 0.5s;
-moz-transition: margin-top 0.5s, height 0.5s;
transition: margin-top 0.5s, height 0.5s;
}
.dropdown ul li:hover {
background-color: #ddd;
color: #343c3f;
}

<div class="dropdown closed">
<div class="title">Please Choose!</div>
<div class="dropdown-menu">
<ul>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
</ul>
</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var $container = $('.dropdown-menu'),
$list = $('.dropdown-menu ul'),
listItem = $list.find('li');
$(".dropdown .title").click(function () {
if( $container.height() > 0) {
closeMenu(this);
} else {
openMenu(this);
}
});
$(".dropdown-menu li").click(function () {
closeMenu(this);
});
function closeMenu(el) {
$(el).closest('.dropdown').toggleClass("closed").find(".title").text($(el).text());
$container.css("height", 0);
$list.css( "top", 0 );
}
function openMenu(el) {
$(el).parent().toggleClass("closed");
$container.css({
height: 200
})
.mousemove(function(e) {
var heightDiff = $list.height() / $container.height(),
offset = $container.offset(),
relativeY = (e.pageY - offset.top),
top = relativeY*heightDiff > $list.height()-$container.height() ?
$list.height()-$container.height() : relativeY*heightDiff;
$list.css("top", -top);
});
}
});
//]]>
</script>

DEMO modifan...

cdpn.io/xfbAw

Bonus: cdpn.io/CElur

Happy dorpdown \m/

20+ Hover effect for Button to be implemented in only CSS

Sebagai seorang bloglang (blogger petualang) sejati AA Koben menclok ke negeri matahari terbit Jepang. Gue mandapatkan artikel dengan judul "CSS nomi de jissō suru botan dezain ya hobāefekuto 20＋α" terjemah indonesia "20 + α hgaya over efek dan desain tombol untuk diterapkan hanya menggunakan CSS" Dengan hadirnya tools online untuk belajar kode CSS, memudahkan para user untuk berkreasi :)
Kode CSS berikut akan dikonfigurasi sebagai gaya dasar, seperti berikut ini, silakan membuat perubahan pada mereka sendiri, seperti ada atau tidaknya box-sizing dan ukuran tombol.
Markup HTML

<a class="button" href="#">Button</a>

Kode CSS

.button {
 width: 200px;
 height: 54px;
 outline: none;
 line-height: 54px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
}
.button::before, .button::after {
 z-index: -1;
 display: block;
 content: '';
 position: absolute;
}
.button, .button::before, .button::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}

Kode CSS tersebut merupakan kode dasar dari 20 gaya hover sebelum ditambahkan dengan kode lainnya! Jadi kode itu harus di pakai dalam setiap gaya yang akan menyertai ;))
Semua transition pada dasarnya: all .3s, Karena memiliki entri dalam bentuk, tempat yang ".3s" jika ingin mengubah bagian dari "all", kecepatan jika ingin menerapkan beberapa silahkan rubah untuk setiap masing-masing. Selain itu, nilai "linear" dan "ease-in-out" jika ingin mengubah kondisi perubahan.

1. Perubahan background color.

Ini adalah hal yang sederhana seperti mengubah warna latar belakang di latar belakang warna ketika hover.Button
.button {
background-color: #333;
color: #fff;
}
.button:hover {
background-color: #59b1eb;
}

2. Perubahan background color dengan border.

Button
.button {
background-color: #333;
border: 2px solid #333;
color: #fff;
line-height: 50px;
}
.button:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}

3. Warna latar belakang dibagi menjadi ke kanan dan ke kiri.

Button
.button {
position: relative;
z-index: 2;
background-color: #333;
border: 2px solid #333;
color: #fff;
line-height: 50px;
}
.button:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.button::before,
.button::after {
top: 0;
width: 50%;
height: 100%;
background-color: #333;
}
.button::before {
right: 0;
}
.button::after {
left: 0;
}
.button:hover::before,
.button:hover::after {
width: 0;
background-color: #59b1eb;
}

4. Warna latar belakang dibagi menjadi ke atas dan ke bawah.

Button
.button {
position: relative;
z-index: 2;
background-color: #333;
border: 2px solid #333;
color: #fff;
line-height: 50px;
}
.button:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.button::before,
.button::after {
left: 0;
width: 100%;
height: 50%;
background-color: #333;
}
.button::before {
top: 0;
}
.button::after {
bottom: 0;
}
.button:hover::before,
.button:hover::after {
height: 0;
background-color: #59b1eb;
}

5. Melebarkan spasi teks.

Button
.button {
background-color: #333;
color: #fff;
}
.button:hover {
letter-spacing: 5px;
}

6. Menampilkan blok di dalam.

Button
.button {
position: relative;
z-index: 2;
background-color: #fff;
border: 2px solid #333;
color: #333;
line-height: 48px;
}
.button::after {
top: 4px;
left: 4px;
width: 188px;
height: 42px;
border: 2px solid #333;
opacity: 0;
}
.button:hover::after {
opacity: 1;
}

7. Background color turun dari atas ke bawah.

Button
.button {
position: relative;
z-index: 2;
background-color: #fff;
border: 2px solid #333;
color: #333;
line-height: 50px;
overflow: hidden;
}
.button:hover {
color: #fff;
}
.button::after {
top: -100%;
width: 100%;
height: 100%;
}
.button:hover::after {
top: 0;
background-color: #333;
}Contohnya 7 saja yah, komplitnya silahkan kalian kunjungi ke www.nxworld.net/tips/css-only-button-design-and-hover-effects.html Kode banyak yg bentrok ternyata :D

Happy hover \m/

Other Way Show-Hide use Draggable Panels

Pada umumnya untuk menampilkan beberapa konten berjejer menjadi satu wadah memakai trick tab Setali tiga uang kalian bisa menggunakan trik accordion Ada teknik baru namanya yaitu draggable panels. Basic concept come from draggabilly.desandro.com Membuat segala sesuatu bisa dibikinkan menjadi menyeret/terseret/drag. Draggable panels concept created by David DeSandro cdpn.io/FHhEe Karena terintegrasi dengan jQuery, maka harus sudah tertanam script jQuery utama di dalam template ;)
Begini planning markup HTML...

#accordion {
height: 100%;
max-width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.panel {
position: absolute;
left: 0;
top: 0;
}
.panel-toolbar {
background: #333;
color: #CCC;
padding: 10px;
border-top: 1px solid #666;
border-bottom: 1px solid #111;
}
.panel-2 .panel-toolbar,.panel-3 .panel-toolbar {
cursor: row-resize;
}
.panel-content {
height: 100px;
overflow-y: scroll;
padding: 0 10px;
color: white;
background: #444;
}
.panel-content p {
margin-bottom: 0.8em;
}
.is-dragging .panel-toolbar {
background: #700;
}

Itu merupakan kode CSS dasar, silahkan edit sesuai dengan keperluan! Berikut susunan script draggable panels.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://draggabilly.desandro.com/draggabilly.pkgd.js"></script>
<script type='text/javascript'>
//<![CDATA[
// quickie Draggabilly jQuery plugin
$.fn.draggabilly = function( options ) {
  return this.each( function() {
    var draggie = new Draggabilly( this, options );
    $.data( this, 'draggabilly', draggie );
  });
}
$( function() {
// set initial panel position and content height
  var $accordion = $('#accordion');
  var accordionHeight = $accordion.innerHeight();
  var panelHeight = accordionHeight / 3;
  var toolbarHeight = $accordion.find('.panel-toolbar').outerHeight();
  var $panelContents = $accordion.find('.panel-content');
  var panelContentHeight = panelHeight - toolbarHeight;
// set initial content height
  $panelContents.height( panelContentHeight );
  var $panel1Content = $panelContents.eq(0);
  var $panel2Content = $panelContents.eq(1);
  var $panel3Content = $panelContents.eq(2);
  var $panel2 = $('.panel-2').css({ top: panelHeight })
    .draggabilly({
      axis: 'y',
      handle: '.panel-toolbar'
    });
  var draggie2 = $panel2.data('draggabilly'); 
  draggie2.containDrag = function( axis, drag ) {
    if ( axis === 'x' ) {
      return drag;
    }
    var startY = draggie2.startPosition.y;
    var min = toolbarHeight - startY;
    var max = accordionHeight - startY - toolbarHeight * 2;
    return Math.max ( min, Math.min( max, drag ) );
  }
  var $panel3 = $('.panel-3').css({ top: panelHeight * 2 })
    .draggabilly({
      axis: 'y',
      handle: '.panel-toolbar'
    });
  var draggie3 = $panel3.data('draggabilly'); 
  draggie3.containDrag = function( axis, drag ) {
    if ( axis === 'x' ) {
      return drag;
    }
    var startY = draggie3.startPosition.y;
    var min = toolbarHeight * 2 - startY;
    var max = accordionHeight - startY - toolbarHeight;
    return Math.max ( min, Math.min( max, drag ) );
  }
// position panel3 when panel2 is moving
  draggie2.on( 'dragMove', function() {
    var panel3Top = parseInt( $panel3.css('top'), 10 );
    if ( panel3Top < draggie2.position.y + toolbarHeight ) {
      panel3Top = draggie2.position.y + toolbarHeight;
      $panel3.css({
        top: panel3Top
      });
    }
    resizePanelContents( draggie2.position.y, panel3Top );
  });
// position panel3 when panel2 is moving
  draggie3.on( 'dragMove', function() {
    var panel2Top = parseInt( $panel2.css('top'), 10 );
    if ( panel2Top + toolbarHeight > draggie3.position.y  ) {
      panel2Top = draggie3.position.y - toolbarHeight;
      $panel2.css({
        top: panel2Top
      });
    }
    resizePanelContents( panel2Top, draggie3.position.y );
  });
// resizes panel contents with the two positions
  function resizePanelContents( panel2Y, panel3Y ) {
    $panel1Content.height( panel2Y - toolbarHeight );
    // size the panels
    $panel2Content.height( panel3Y - panel2Y - toolbarHeight );
    $panel3Content.height( accordionHeight - panel3Y - toolbarHeight );
  }  
});
//]]></script>

Apakah kalian tertarik memasang draggable panels? Kembali kepada kebutuhan dan selera masing-masing ;))

Happy drag \m/

Installing JUSH Javascript Syntax Highlighter Into The Blog

Apakah fungsi dari pemasangan fitur Syntax Highlighters Salah satu mungkin berfungsi untuk memudahkan membaca bahasa script/kode tertulis. Di samping itu tentunya memperindah tulisan kode-kode. Banyak sekali jenis syntax-highlighters tawaran tersedia! Satu link source buat anda www.realcombiz.com/2014/02/15-code-syntax-highlighters-to-prettify.html Dari 15 tawaran yang diberikan, AA kepincut sama jush.sourceforge.net
Berikut beberapa feature JUSH JavaScript Syntax Highlighter:

• Mendukung sintaks bahasa seperti berikut: HTML, CSS, JavaScript, PHP, SQL, HTTP dan SMTP protocol, php.ini dan Apache config.
• Highlights language tertanam satu sama lain.
• Link ke dokumentasi dari semua bahasa.
• Warna dapat dengan mudah dimodifikasi melalui CSS.
• Bekerja pada semua browser utama Internet Explorer, Firefox, Opera, Google Chrome.

Perhatikan fitur baris ke-3 dari si JUSH, "Links to documentation of all languages" Ini berarti hasil render syntax akan tertanam links source ke halaman dokumentasi terkait sesuai tag bahasa!

Perhatikan kata yg bergaris bawah pada screenshot, itulah yg dimaksudkan :-?

Installation instructions

1. Copy jush.css jush.sourceforge.net/jush.css and jush.js jush.sourceforge.net/jush.js ke dalam template.
2. Tambahkan snippet berikut sebelum tag </body>
<script type="text/javascript" src="jush.js"></script> <script type="text/javascript"> jush.style('jush.css'); jush.highlight_tag('code'); </script>Snippet jush.css jika sobat menghostingkan file CSS-nya! Bila mau menambahkan kode snippet, Ex:<script type="text/javascript" src="jush.js"></script> <script type="text/javascript"> jush.style('jush.css'); jush.highlight_tag('pre'); jush.highlight_tag('code'); </script>

Planning HTML

Pemakaian ketika mau melakukan posting, jangan lupa kode/script diphrase terlebih dahulu. Semua tag <code class="jush"> akan disorot. Bahasa ditentukan oleh nama kelas diawali dengan "jush-" (misalnya <code class="jush-js">). Bahasa default adalah htm. Hal ini juga memungkinkan untuk menggunakan <code class="language-*">.

Happy JUSH \m/

Free Download Photo Album Creation & Image Search Tool

Ada bahan postingan full stylish, tetapi banyak sumber dan bahan keren, eh malah pusing bagaimana cara memostingkannya :D Entar-entar aja gue share buat kalian! Sekarang mah yang ringan-ringan ajah. AA Koben akan berbagi dua buah page .html tools untuk sobat setia pengunjung. Pertama offline system yaitu photo album creation tool, and yg kedua online system search image presentation style display ;))

Photo album creation tool

Satu tool untuk membuat tumpukan poto-poto dengan cara drop images dari lokal file kalian. Link download akan berupa daraURI Base64. Layak kita miliki!

MashStar strongest presentation of zero preparation

Dengan teknologi Google Image Search API JSON interface, tool ini akan membantu pencarian image dengan query target dan ditampilkan dengan gaya presentasi! Dari pada search via Google munculnya kebanyakan bikin loading lola, mendingan pakek ini :))

Ekstrak file File Tool.zip nanti akan ada 2 file .html Bukalah di browser kalian, coba dan explore kedua aplikasi tersebut :)
Source: jsdo.it/qurihara/mashstar - jsdo.it/kazuki_nagasawa/createjs-easeljs-002

Happy tools \m/

Get Free Download 3 Tool Beautify Code

Ada cara menyembunyikan kode/script yaitu dengan cara meng-encrypt atau meng-encode Terserah itu mah sah-sah saja kok ;)) Apakah sobat pernah melihat kode CSS atau markup HTML yang di compress, bahkan script pun tak luput dari tindakan kompres! Salah satu jalan untuk memperbaiki script/code yg sudah terkompres or mengalami minimalis size file, yaitu dengan jalam Beautify atau membaguskan, memperbagus or memperindah 8-> Dari sekian banyak web yg bergerak pada layanan urusan mempercantik, membongkar atau deobfuscate kode adalah jsbeautifier.org by Liam Newman.

Tetapi master Koben tidak akan membahas mengenai web jsbeautifier, melainkan sekarang AA akan berbagi embed page .html offline version beautify CSS, HTML and bautify JavaScript secara terpisah :-j Tiga buah tools keren plus bonus 2 embed tool lagi buat kalian sikat 3:-O All source file by Lidar github.com/Lidar
Berikut screenshot 3 tool beautify code:

Beauty HTML	Beauty CSS	Beauty JS

Password .ZIP: Tutorial Blog for Stylish Blogger
Ingat ya ada 2 bonus .html by lidar yaitu tentang convert HTML to ZenCoding ;)
Source by: github.com/Lidar/htmlBeautifier.js - github.com/Lidar/cssBeautifier.js - github.com/Lidar/jsBeautifier.js
Semoga bermanfaat ;)

Happy beauty \m/

Intension of CSS3 Code

Timing is for CSS3 animation. Ada 10 gaya animasi yang bisa kalian nikmati. Kalau mau melihat macam-macam CSS animation, buka saja halaman miscellaneous effects use css3! Selamat menikmati CSS3 animation that can be used in copy and paste :D

Save page as halaman tersebut, buka pada notepad, dan kode-kode sudah ada di sana semuanya. Karena kode animasi hanya mendukung kode webkit dan moz, browser selain memakai kode itu tidak akan jalan :D Sebagai bonusnya embed html pure CSS social icon!!!

Source:
jsdo.it/gryng02/css3animation/fullscreen
jsdo.it/No_1026/qOYM/fullscreenjsdo.it/teetteet/8KKG/fullscreen

Happy coding \m/

Make CD Case using CSS

Koben akan berbagi tutorial cara membuat rak case CD/DVD menggunakan bahasa CSS! Gue sudah menemukan 2 link source yang membahas issue ini. Penggunaan kode yg cukup banyak, penulisan snippet kode CSS tingkat master merupakan beberapa unsur pembentuk trick CSS3 case. Source pertama ada 2 jenis yg dibuat animated css3 cd cases on a shelf by: acidmartin.wordpress.com/2014/03/02/animated-css3-cd-cases-on-a-shelf Tipe tersebut adalah frontal and semi frontal.Source ke dua datang dari CSS only dvd/cd case placeholders with a shelf by Tobias Bleckert codepen.io/tbleckert/pen/CkufHPada kreasi ini, sudah dibuatkan 4 type tempat CD. Sobat tinggal mau pakai yg mana atau pakai semuanya :P AA Koben sudah membuatkan file download menjadi 1 paket. Sobat tinggal mempelajarinya saja ;)

www.ziddu.com/download/23619916/AnimatedCSS3CDCasesonaShelf.zip.html

Happy case \m/

Decorate Tag ol or ul with Flip and unfold Effect

Salah satu variasi efek yang bisa di pakai dalam urusan dropdown mungkin dengan menggunakan flip effect atau unfold effect! Sebenarnya hanya beda nama, tetapi setelah melihat sama-sama saja ;)) Tag ol or ul dipadukan dengan bumbu² CSS sehingga menghasilkan sebuah efek. Sekarang coba buka halaman berikut untuk contoh www.webdesigncrowd.com/demo/unfolding-menu-2.10.13 Terlihat efek unfolding pada menu ketika menyorot sub-menu! Jika sobat tertarik dengan unfolding menu animation, AA Koben sudah buatkan versi mandiri :D

Save Page As demo tersebut, buka pada Notepad (sejenis) guna melihat kode bumbunya yah :P
Berikut beberapa tutorial serupa yg bisa kalian pelajari:

1. mintik.com/upload/demolar/2013/06/Drop-Down
2. mintik.com/upload/demolar/2013/06/Drop-Down-Images
3. codepen.io/Quelltextfabrik/pen/Efdjc
4. cssdeck.com/labs/navigation-dropdown-with-flip-effect
5. www.cssbox.me/2013/05/navigation-dropdown-with-unfold-effect.html

Happy coding \m/

Selection Good Resources March 2014

Sudah lama juga AA Koben tidak memosting artikel selection good resources :D Kumpul-kumpul links yang gue anggap full stylish untuk dibagikan kepada pelongok setia blog aku :"> Pertama-tama sobat mungkin sudah pernah membaca sources font icon Menampilkan icon dengan menggunakan CSS font! Berikut contoh font gokil & we love icon fonts. Gue kasih yg baru nih buat ente² page useiconic.com dan stackicons.com Kalau mau membuat font hasil karya sendiri, anda bisa coba layanan gratis dari glyphrstudio.com Berikut tool buat membandingkan jenis font tiff.herokuapp.com

Pencarian untuk perpustakaan javascript, plugin jQuery, font, kerangka CSS dan apa pun yang mungkin Anda butuhkan www.jsdelivr.com. Satu lagi web development and programming tutorials yg mungkin sobat belum kenal www.tutorialspark.com, masih dalam perkembangan ;))
Corak tampilan hexagonal yg sedang melanda para developer, sikat 10+ sosial media icon heksagonal bestpremiumthemes.net/hexagonal-social-media-icons-buttons Dari issue jQuery saya mendapatkan direction aware hover effect www.jozefbutko.com/html/direction-aware-hover-effect-css3-jquery Ternyata dengan jQuery ada jQuery fontIconPicker codeb.it/fonticonpicker Check your customer's web browsing environment in seconds yourbrowser.is

Hampir kelupaan nih, tadi ada web jsdelivr utk mencari script apapun, nah sedikit kerenan hampir sama www.javascriptoo.com Sebagai bonus seperti biasa Koben sudah seleksi dari codepen.io and cssdeck.com ;))

cdpn.io/FjlEc - cdpn.io/njIBe - cdpn.io/rajGL - cdpn.io/akHzy - cdpn.io/HDkcl - cdpn.io/rzaLA - cdpn.io/qzfoc - cssdeck.com/labs/full/oiynb4au - cssdeck.com/labs/full/awesome-flat-login-form - cssdeck.com/labs/full/pinterest-like-waterfall-design-purely-css
Demikian saja seleksi link di bulan maret 2014. Lebih dan kurang silahkan komentarnya yah :))

Happy blogging \m/

Free Ten Style CSS Shake use CSS/Sass

Ada yang bilang vibrates effect atau shake effect untuk membuat hasil getaran-getaran pada sebuah konten. Satu yang pasti AA Koben akan berbagi sepuluh jenis efek CSS shake buat kalian b-) Sedangkan pada web source elrumordelaluz.github.io/csshake banyak variasi yg bisa kita rangkai agar efek menjadi lebih full stylish! Seperti gue katakan sebelumnya, 10 gaya dasar efek dari web CSS shake menggunakan bahasa CSS akan AA berikan buat ente-ente pade ;))

Jangan lupa sorot yah pake mouse cursor . . .

Basic Shake

Basic

.shake {
transform-origin: center center;
}
.shake:hover {
animation-name: shake-base;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-base {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0.5px, 0.5px) rotate(2.5deg);
}
50% {
transform: translate(1.5px, 1.5px) rotate(-1.5deg);
}
75% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
100% {
transform: translate(2.5px, 2.5px) rotate(-2.5deg);
}
}

Slow Shake

Slow

.shake {
transform-origin: center center;
}
.shake-slow:hover {
animation-name: shake-slow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-slow {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0.5px, 0.5px) rotate(2.5deg);
}
50% {
transform: translate(1.5px, 1.5px) rotate(-1.5deg);
}
75% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
100% {
transform: translate(2.5px, 2.5px) rotate(-2.5deg);
}
}

Little Shake

Little

.shake {
transform-origin: center center;
}
.shake-little:hover {
animation-name: shake-little;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-little {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0.5px, 0.5px) rotate(1deg);
}
50% {
transform: translate(1px, 1px) rotate(-1deg);
}
75% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
100% {
transform: translate(0.5px, 0.5px) rotate(-1deg);
}
}

Hard Shake

Hard

.shake {
transform-origin: center center;
}
.shake-hard:hover {
animation-name: shake-hard;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-hard {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(-6px, 7px) rotate(0.5deg);
}
50% {
transform: translate(9px, 1px) rotate(-3.5deg);
}
75% {
transform: translate(4px, -10px) rotate(3.5deg);
}
100% {
transform: translate(4px, -10px) rotate(-0.5deg);
}
}

Fixed Horizontal

F. Hor

.shake {
transform-origin: center center;
}
.shake-horizontal:hover {
animation-name: shake-horizontal;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-horizontal {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(1px, 0px) rotate(0deg);
}
50% {
transform: translate(-9px, 0px) rotate(0deg);
}
75% {
transform: translate(-3px, 0px) rotate(0deg);
}
100% {
transform: translate(-7px, 0px) rotate(0deg);
}
}

Fixed Vertical

F. Ver

.shake {
transform-origin: center center;
}
.shake-vertical:hover {
animation-name: shake-vertical;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-vertical {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0px, 1px) rotate(0deg);
}
50% {
transform: translate(0px, -8px) rotate(0deg);
}
75% {
transform: translate(0px, -4px) rotate(0deg);
}
100% {
transform: translate(0px, -8px) rotate(0deg);
}
}

Fixed Rotation

F. Rot

.shake {
transform-origin: center center;
}
.shake-rotate:hover {
animation-name: shake-rotate;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-rotate {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0px, 0px) rotate(-1.5deg);
}
50% {
transform: translate(0px, 0px) rotate(2.5deg);
}
75% {
transform: translate(0px, 0px) rotate(-2.5deg);
}
100% {
transform: translate(0px, 0px) rotate(-0.5deg);
}
}

Opacity Shake

Opaci.

.shake {
transform-origin: center center;
}
.shake-opacity:hover {
animation-name: shake-opacity;
animation-duration: 200ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-opacity {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(3px, -4px) rotate(0.5deg);
opacity: 0.1;
}
50% {
transform: translate(-2px, 4px) rotate(-2.5deg);
opacity: 0.8;
}
75% {
transform: translate(-4px, -5px) rotate(-1.5deg);
opacity: 0;
}
100% {
transform: translate(1px, -4px) rotate(0.5deg);
opacity: 0.8;
}
}

Crazy Shake

Crazy

.shake {
transform-origin: center center;
}
.shake-crazy:hover {
animation-name: shake-crazy;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-crazy {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(-10px, -18px) rotate(-1deg);
opacity: 0;
}
50% {
transform: translate(5px, 13px) rotate(-2deg);
opacity: 0.4;
}
75% {
transform: translate(12px, -12px) rotate(1deg);
opacity: 0.3;
}
100% {
transform: translate(16px, 6px) rotate(-9deg);
opacity: 0.6;
}
}

Constant Shake

Const.

.shake {
transform-origin: center center;
}
.shake-constant {
animation-name: shake-constant;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
@keyframes shake-constant {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
25% {
transform: translate(0.5px, 0.5px) rotate(2.5deg);
}
50% {
transform: translate(1px, 1px) rotate(-1.5deg);
}
75% {
transform: translate(1.5px, -1.5px) rotate(1.5deg);
}
100% {
transform: translate(2.5px, -2.5px) rotate(-2.5deg);
}
}

Syntax penggunaan, perhatikan saja default (basic shake)<div class="shake">Blah Bleh Bloh</div>Sobat tinggal tambahkan pada bagian belakang di dalam selektor class.
Ex:<div class="shake shake-slow">Blah Bleh Bloh</div>Kalau getarannya mau lebih banyak, pada variabel @keyframes harus sobat rubah sesuai mau berapa biji dalam mode persentase (%) Atur-atur dan pelajari saja deh and jangan lupa di fix kode keyframes agar support pada browser engine :D

Happy shake \m/