Trik Komputer: Juli 2014

Kamis, 24 Juli 2014

Add Animation Click Effect use Waves

Datang dari artikel milik google mengenai google material design, yang mana tertulis kata-kata "We challenged ourselves to create a visual language..." dan ternyata responpun berdatangan bak virus penyakit :D Para developer, coderer, scripter ~~whatever the name~~ berlomba menunjukan kabisanya masing-masing! Berikut beberapa contoh hasil karya orang-orang hebat yg terhosting on web codepen codepen.io/search?q=Google+Material+Design.
Setelah melihat karya para maestro kode, dapat kita lihat seksama apa yg menjadi pusat perhatian mereka :-?? Sebagian besar fokus terhadap trick/tutorial animation effect! CMIIW...;)) Berikut salah satu contoh animation click effect inspirasi dari google's material design.

Touch ripple - Close

Pokoknya efek blink-blink buricak burinong seperti itulah! Karena banyak master yg berkreasi mengenai hal ini, maka AA Koben pilihkan buat anda master Fians dari Indonesia?

Take a look: publicis-indonesia.github.io/Waves/Planning code

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
 <html>
  <head>
   <meta charset='utf-8'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
        <title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
        <link rel="stylesheet" type="text/css" href=".../waves.css" />
 <b:skin>
  <![CDATA[

  ]]>
 </b:skin>
  </head>
<body>  

 <script type="text/javascript" src=".../waves.js"></script>
 <script type="text/javascript">
  var w = new Waves();
  w.displayEffect();
 </script>
</body>
</html>

Masukan kode CSS (waves.css) mau di hosting atau enggak, terserah kalian. Host JavaScript (waves.js) biar cepat rendering.
Beberapa markup HTML waves:

Flat buttons<a class="waves-effect waves-button">Button A</a> <button class="waves-effect waves-button">Button B</button> <input class="waves-effect waves-button" type="submit" value="Button C"> <input class="waves-effect waves-button" type="button" value="Button D">

DIVs<div class="waves-effect waves-block">Plain Box</div> <div class="colored-box waves-effect waves-light waves-block">Colored Box</div> <div class="raised-box waves-effect waves-float waves-block">Raised Box</div>

Images<span class="waves-effect"> <img src="LINK-IMAGE.jpg"> </span> <span class="waves-effect waves-light waves-float"> <img src="LINK-IMAGE.jpg"> </span>

Si yu :-h

Jumat, 18 Juli 2014

Make Spoiler Alert with Waiting Time when Hover

Spoiler alert salah satu jenis gaya spoiler yang cukup unik. Mungkin agak-agak mirip dengan trik spoiler popbox spoiler with blurred effect. Full 100% menggunakan bahasa CSS. Jika pada pop-box spoiler teks terlihat blur dan akan jelas ketika melakukan klik. Kalau pada gaya spoiler-alert, teks blur tampak dan akan jelas ketika dilakukan hover!

Vyyavlyayetʹsya , vin buv mertvyy vesʹ tsey chas. Tsey khlopetsʹ povnistyu yoho batʹko i pryntsesa yoho sestra . Vony vse alerhiya na vodu i vse vidbuvayetʹsya z prychyny. Vin vybrav odyn zaraz , ale vin ne buv pershym. Shcho dumav , shcho vin chuzhiy planeti bulo naspravdi Zemlya. Vony zvertayutʹsya lyudy odyn proty odnoho , shchob zrobyty vtorhnennya prostishe. Te , shcho vy dumaly , buly spohady diysno mayutʹ mistse v maybutnʹomu. Modelyuvannya buly realʹnymy .

Apakah sobat tertarik memasang spoiler content full stylish di atas ke dalam blog kalian?

Kode CSS:

.spoiler {
cursor: wait;
position: relative;
color: transparent;
text-align: justify;
text-shadow: 0 0 19px #000;
}
.spoiler::before, .spoiler::after {
color: #000;
display: block;
line-height: 1;
text-align: center;
text-shadow: none;
position: absolute;
font-family: arial, sans-serif;
}
.spoiler::before {
top: 19px;
left: 0;
right: 0;
font-size: inherit;
content: 'Please hover n wait 3 seconds...';
}
.spoiler::after {
top: 0;
opacity: 0;
width: 25px;
font-size: 25px;
content: '3 2 1';
line-height: 72px;
text-align: center;
left: calc(50% - 36px);
clip: rect(0, 72px, 72px, 0);
}
.spoiler:hover {
color: #000;
transition: all 1s;
transition-delay: 3s;
text-shadow: 0 0 0 transparent;
}
.spoiler:hover::before {
animation: countdown-before 4s forwards;
}
.spoiler:hover::after {
animation: countdown-after 4s forwards;
}
@keyframes countdown-before {
25% {
transform: translateY(-24px);
}
75% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-24px);
}
}
@keyframes countdown-after {
25% {
opacity: 1;
clip: rect(0, 72px, 72px, 0);
transform: translateY(0);
animation-timing-function: steps(1, start);
}
50% {
clip: rect(72px, 72px, 144px, 0);
transform: translateY(-72px);
animation-timing-function: steps(1, start);
}
75% {
opacity: 1;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
100% {
opacity: 0;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
}

Planning HTML:

<p class="spoiler">

--------- CONTENT HERE ---------

</p>

Source by: codepen.io/lonekorean/details/kocrl

Happy spoiler \m/

Senin, 14 Juli 2014

Add Stop-Play in GIF Image use Gifffer

Pada artikel sebelumnya bercerita tentang bagaimana cara menyembunyikan image gif menjadi sebuah link dan akan muncul ketika melakukan hover, AA dapat lagi source unik how to stop autoplaying your gifs! Gifffer [github.com/krasimir/gifffer] adalah sebuah perpustakaan JavaScript size kecil (1.8K) yang mencegah autoplaying dari animasi gifs. Kalau biasanya kita melihat gambar bergerak-gerak dengan format gif, maka gambar tersebut akan bergerak simultan tanpa ada henti! Dengan hadirnya Giffer by master Krasimir Tsonev, gif image akan diberikan sentuhan stop/play seperti video :P

Demo: work.krasimirtsonev.com/git/gifffer/example

Masukan gifffer.min.js pada blog sobat.<script type="text/javascript" src="gifffer.min.js"></script>Script pemanggil harus ikut masuk juga dong ;))

<script>
window.onload = function() {
    Gifffer();
}
</script>

Syntax img sedikit berbeda, yg biasa memakai src=".." sekarang di ganti pakai data-gifffer

Default syntax img.<img data-gifffer="image.gif" />Control syntax img.<img data-gifffer="image.gif" data-gifffer-width="123" data-gifffer-height="456" />Demo (Kalo jalan, lakukan klik klik pd image)

Maaf lahir dan bathin :)

Jumat, 11 Juli 2014

Hide GIF Image use Giflinks and Turn up when Hover

Sebetulnya AA Koben lagi malas mosting, sudah nggak ada bahan yg menarik plus di waktu ramadhan membuang waktu buat beramal saja (~~tidur~~) :)) Gue melihat artikel tentang Giflinks tholman.com/giflinks by Tim Holman. Apakah Giflinks itu...sebuah javascript sederhana yang digunakan untuk menambahkan tindakan gif layar penuh sebagai efek hover
Singkat cerita menyembunyikan gambar berekstensi .GIF (yg mana notabene gambar .gif memakan waktu loading) dan akan muncul ketika sobat melakukan hover pada link giflinks.

Letakan JavaScript berikut sebelum tag </body>

Perhatikan pada script bertuliskan .post-body, gantikan sesuai dengan tagging bagian post template blog kalian masing-masing! Jika ingin memberi sentuhan CSS pada gif links...

.giflink {
 font-style: italic;
 color: rgb(245, 90, 3);
 /* BLAH-BLEH-BLOH HERE */ 
}

Syntax HTML<a data-src="LINK-IMG.gif">Title</a>DONE.

Buat bonusnya, silahkan sobat buka live HTML editor kepunyaan kalian masing² kemudian masukan bumbu ramuan berikut ini Open it atau ini juga boleh Open it

Semoga rakyat Palestina diberikan kesabaran dalam menghadapi cobaan dari tindakan rakyat bar-bar ~~zionis yahudi israel~~.

Allohu Akbar...

Kamis, 03 Juli 2014

Selection Sources in Ramadhan 1435 Hijriah

Semakin populernya satu layanan web dengan di dukung oleh fitur² yang tersedia, dengan sendirinya bagai air mengalir berdatangan orang (master developer) untuk mendukung web tersebut! Siapa tidak kenal dengan CodePen web? Setelah menambahkan fitur terbaru dengan adanya fasilitas untuk menulis (blog) codepen semakin mengukuhkan dari web sejenis yg pernah ada! Koben dapat codepen stats checker codepen.io/zerospree/full/sjcoa! Jika sobat mempunyai account web codepen, maka dengan apps tersebut kalian bisa melihat secara live status masing² user (huruf besar kecil pengaruh pada kotak pengisian username).

Berikut beberapa link game sederhana namun mengasyikan yg gue dapatkan dari code-pen, lumayan buat ngabuburit ;))
>> codepen.io/devstate/full/rtiqk - codepen.io/chagaf/full/daqlg - codepen.io/vaielab/full/yoKEF - codepen.io/natewiley/full/HBrbL <<
Sekalian saja selection resource :D
>> codepen.io/yoksel/pen/ckldD - codepen.io/johannlaqua/pen/mHetz - codepen.io/jascha/pen/yponz - codepen.io/social_quotient/pen/zwcIm - codepen.io/creotip/pen/jvhDu - codepen.io/adobe/pen/DCeGf - codepen.io/kman/pen/DFAzG - codepen.io/coderalex/pen/DKzeE<<
Takut kurang :-"
>> cssdeck.com/labs/simple-toggle-switch - cssdeck.com/labs/full-css-drop-down-contact-form - cssdeck.com/labs/menu-shadow-under-links-on-hover - cssdeck.com/labs/full-css-stylized-select-v2 - cssdeck.com/labs/javascript-rain - cssdeck.com/labs/login-4 - cssdeck.com/labs/vector-math-in-coffee <<

Sekedar berbagi di bulan penuh berkah ini. Mari kita tingakatkan amal-amalan kita, karena hanya amal yg akan dibawa modar :)) Maafkan Beben Koben lahir dan bathin kepada kalian semua blogger sejati di manapun anda berada
Happy Ramadhan \m/