Circular Contextual App Menu Experiment

Jika berbicara tentang klik kanan (right click) pada mouse mungkin yang terbesit pada pikiran kita adalah tidak bisa di klik kanan ;)) Secara default pada masing-masing web browser telah disisipkan beberapa konteks menu. Misalkan pada mozilla jika sobat melakukan klik-kanan mouse di area kosong maka akan muncul: go back & go forward one page, Reload current page, Bookmark This Page, Save Page As, Select all, View Page Source, View Page Info dan Inspect Element. Konteks menu akan lain lagi jika sobat melakukan right-click pada textarea, input, link, image, iframe or etc!

Singkat cerita, bagaimana kalau perintah klik kanan pada mouse diisikan dengan context menu kreasi kita :-? Jadi kalo ada orang klik-kanan maka akan terpampang 6 menu bulet-bulet (Circular Contextual App Menu) Here original idea codepen.io/simgooder/details/BNLGXm.Seperti itu versi modifan gue bro! Pada source sumber memakai trik font-awesome. Sehingga akan sedikit berbeda pada pemanggilan script. Trick ini terintegrasi dengan jQuery script! Jadi pada template kalian harus sudah terpasang jQuery ;)

.circle-container {
position: relative;
width: 10em;
height: 10em;
padding: 0;
border-radius: 50%;
list-style: none;
-webkit-animation: 0.2s spin linear;
animation: 0.2s spin linear;
margin: 5em auto 0;
position: absolute;
display: none;
}
.circle-container > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container > *:nth-of-type(1) {
-webkit-transform: rotate(0deg) translate(5em) rotate(0deg);
-ms-transform: rotate(0deg) translate(5em) rotate(0deg);
transform: rotate(0deg) translate(5em) rotate(0deg);
}
.circle-container > *:nth-of-type(2) {
-webkit-transform: rotate(60deg) translate(5em) rotate(-60deg);
-ms-transform: rotate(60deg) translate(5em) rotate(-60deg);
transform: rotate(60deg) translate(5em) rotate(-60deg);
}
.circle-container > *:nth-of-type(3) {
-webkit-transform: rotate(120deg) translate(5em) rotate(-120deg);
-ms-transform: rotate(120deg) translate(5em) rotate(-120deg);
transform: rotate(120deg) translate(5em) rotate(-120deg);
}
.circle-container > *:nth-of-type(4) {
-webkit-transform: rotate(180deg) translate(5em) rotate(-180deg);
-ms-transform: rotate(180deg) translate(5em) rotate(-180deg);
transform: rotate(180deg) translate(5em) rotate(-180deg);
}
.circle-container > *:nth-of-type(5) {
-webkit-transform: rotate(240deg) translate(5em) rotate(-240deg);
-ms-transform: rotate(240deg) translate(5em) rotate(-240deg);
transform: rotate(240deg) translate(5em) rotate(-240deg);
}
.circle-container > *:nth-of-type(6) {
-webkit-transform: rotate(300deg) translate(5em) rotate(-300deg);
-ms-transform: rotate(300deg) translate(5em) rotate(-300deg);
transform: rotate(300deg) translate(5em) rotate(-300deg);
}
.circle-container li > * {
display: block;
max-width: 100%;
border-radius: 50%;
-webkit-transition: .15s;
transition: .15s;
padding: 2em 0;
line-height: 1;
}
.circle-container li {
border: solid 5px #333;
border-radius: 50%;
box-shadow: 0px 3px 6px #333;
}
.home {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9XdDifXtZDr19wWBZpb2_4nHw4EgVfqvVh7AJUWrCl6UMVy9nMPAv9Br1bw7ulZO3OzWt8Jad_Awk3rd1mLs6SDOrXjJxMq9JJNurqQV8LpLahD6MDsBSEUBtGN0TQcGbh2FgLCLJR8/s32/) no-repeat center center;
}
.close {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEirqAKsADePoPaoAUu8NC19J9dy2apKerOGA2Spx8OmB76D8YLdKNfR7R9BSENaw9WZAVBn7tk0jwg-EwpLUbY1ffGJVqxXic20SukdvdDhVtC1NpBG4mCtNCjcyY4J2O0mTPRYk4zvj9/s32/) no-repeat center center;
}
.menu-1 {
background: #f90 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDTWnhKOUREj0fFwc9yltjwQg-kQ7x7mf2M7qdK5P0cx6_G03bFFOhQo2qK9CXp0hJ5-br3yD1ykrEx7N8G_oCU6LkQ8L5Ii_W8k4G34oKXzfq0Idq4ptK4BaOwlGIkSwe7NBjfGbXpI/s32/) no-repeat center center;
}
.menu-2 {
background: #06f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCG90_TWzowPea30Vv_jRZ34eKQV7Cs7-pSRdQueJTF6P190iGHT4LlHb-bWMne_2ZIkX9Jj-4T6yCUUf5kxYxQOx_L5FS-GtUz7A4nD1bRJn4S_3GRCqKNwN59_rPuvE8RQMqWyaXJRWq/s32/) no-repeat center center;
}
.menu-3 {
background: #09f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8tCJ7E1-etym4LQItr18GSjWPE97NCxp9Olaq1pTcgPvWJlmbqZ0DDHK5-9KxYJS5ZBQ17qZO1xryrGSvcIZ-PQBnmdWgsI3ngqfEpZkKi-OE3xuhsut0YT2HOT8n0hpIOuLYZuoNvn-/s32/) no-repeat center center;
}
.menu-4 {
background: #f00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM596bqeTJo_48a4P6ddxpSPg1DuP-X1TSZZrcljPMidozmiHMO-jygixNxAZoz69wJx1bVPCIl2HQSuzH32p6hDzY_MX3WoDoGC9pIom6y-TQcGPotzuL_lQqQkpDZYvZR4VKfjD7f8/s32/) no-repeat center center;
}
.menu-5 {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj834DpcjAGNzVgh4mC-zjbFnz25GfNybgU7wVVo_EIVJnkyslFGzB0cKritXHAqpCEgH1L4WqOyCYRRlhSELon25KzsdnzGTDH8aPyc4oSxln4yNdhyFjxLen3t59Od2gOGcYNTVpENYDY/s32/) no-repeat center center;
}
.hide {
-webkit-animation: 0.2s spinout linear !important;
animation: 0.2s spinout linear !important;
}
@-webkit-keyframes spin {
0% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
30% {
opacity: 0;
}
}
@keyframes spin {
0% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
30% {
opacity: 0;
}
}
@-webkit-keyframes spinout {
0% {
opacity: 1;
}
70% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
}
@keyframes spinout {
0% {
opacity: 1;
}
70% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
}

Jika mau mengganti gambar, gantilah dengan yang memiliki resolusi 32 x 32 pixel.

<script type='text/javascript'>
//<![CDATA[
 $(document).bind("contextmenu", function(event) {
       event.preventDefault();
       var circle = "<ul class='circle-container' style='display:block;'><li class='home'><a href='' target='top'></a></li><li class='menu-1'><a href=''></a></li><li class='menu-2'><a href=''></a></li><li class='menu-3'><a href=''></a></li><li class='menu-4'><a href=''></a></li><li class='menu-5'><a href=''></a></li><li class='close'><a href=''></a></li></ul>";
$(circle)
 .appendTo("body")
 .css({top: event.pageY-160 + "px", left: event.pageX-80 + "px"});
});
$('.circle-container').get(0).click();
//Better solution - Button Specific
$(document).mousedown(function(e){
 if( e.which==1 ) {
  $(".circle-container").toggleClass("hide");
  setTimeout(function(){
       $(".circle-container").hide();
    },100);
 }
});
//]]>
</script>

Isikan alamat link pada syntax <a href=''></a> Sobat bisa tambah variasi target='top' Ingat koma atas satu pakainya jangan yg koma atas dua "" Script di atas sudah ditambahkan sedikit, gak tau bener atau salahnya, tetapi berjalan :D Soalnya kalau pakai dari sumber, pas menanamkan syntax link tidak jalan!!!
Ternyata Circular Contextual App Menu masih sebuah konsep yg perlu pengembangan bro. Karena saya tidak bisa jQuery, silahkan bagi sobat yg mau berbagi ilmunya tolong di fix itu script jQuery di atas :)

Hmmm....:-<

kodeWeave HTML Playground for Free

Sebenarnya tempat koleksi link tempat playground HTML editor gue sudah buatkan pada posingan dengan judul From Me To You...HeHeHe. Ternyata sekarang ada satu web anyar yang berjasa memberikan info link website seputaran list tools dan resources pilihan serta ide buat kalian yg ingin lebih mengetahui dunia web-site wwwhere.io
Karena tema HTML-editor merupakan salah satu tema post andalan pada blog ini, maka AA Koben akan berbagi kembali mengenai hal itu :D Still beta pliss introduce Feditor.IO and more full stylish you must check this one bootstrap snippets, code patterns and playground www.codeply.com/go

From master Michael, github nick is mikethedj4 he has made coding playground to export your HTML5 web apps as native desktop and mobile apps! kodeWeave adalah salah satu playground HTML paling komplit dalam menu-opsi yg pernah gue temuin untuk saat ini. Sudah opensource dan di buat dalam beberapa bentuk.

• kodeweave.sourceforge.net
• github.com/mikethedj4/kodeWeave
• developer.mozilla.org/en-US/demos/detail/kodeweave
Bonus...
• github.com/mikethedj4/mmd

Saya akan bantu menerangkan menu-menu yg ada di apps KodeWave.html ;))

>> Gambar kunci inggris kiri pojok atas: Lorem Ispum generator Upload file & embed color code generator.
>> Gambar buku: Option for add language scripts.
>> Gambar orang: Jika sobat ingin berbagi/berkolaborasi kode (This is fiture by togetherjs must Online mode on)
>> Gambar disket jadul: Opsional download mau versi apaan. 8 opsi choose for download!
Ada deretan tombol, gunakan scroll pada mouse untuk melihat semua. Tombol² tsb merupakan shortcut pilihan! Pada pojok kanan atas dengan gambar phone adalah opsi display bisa di ganti dengan 3 pilihan. Pojok paling kanan atas dengan gambar bingkisan kado tempat contoh-contoh tutorial yg mana kode/script akan otomatis ditempatkan pada editor.

Kalau sobat download dari link sumber mungkin ada beberapa address link yang masih tertuju pada web-host. Gue sudah buatkan via offline termasuk link² yg ada pada gambar buku dan gambar bingkisan kado. Kalau tidak jalan berarti memang harus online ;))
Download kodeWeave via 4shared www.4shared.com/zip/u_uQS0q3ba/kodeWeave.html
Download kodeWeave.zip in Ziddu downloads.ziddu.com/download/24516142/kodeWeave.zip.html
Password kodeWeave_mikethedj4

Happy playground \m/

Make Rain or Snow Falling Effects use CSS3

Update trik dari postingan sebelumnya tentang creativity using CSS keyframe animations. Sekarang AA Koben akan berbagi kembali trick membuat efek salju dan hujan menggunakan CSS3. Tutorial ini datang dari web keren dengan judul asli "Create Rain & Snow Falling Effects using CSS3 – weather.css"
Trick weather.css menyertakan sebuah gambar dalam menampilkan efek rain/snow yang di rangkai dengan bumbu CSS3 animation keyframes! Masukan bumbu CSS di tempat semestinya :D

.salju {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.salju:before,.salju:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
background: transparent repeat;
opacity: 0.5;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-animation-name: salju;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: salju1;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.salju:after {
opacity: 0.8;
-webkit-animation-name: salju1;
animation-name: salju1;
}
.salju.snow:before,.salju.snow:after {
background-image: url("HOST-LINK-IMAGE-SNOW/RAIN.PNG");
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
.salju.snow:after {
-webkit-animation-duration: 4.5s;
animation-duration: 4.5s;
}
@-webkit-keyframes salju {
from {
background-position: 0 0;
}
to {
background-position: 0 1024px;
}
}
@keyframes salju {
from {
background-position: 0 0;
}
to {
background-position: 0 1024px;
}
}
@-webkit-keyframes salju1 {
from {
background-position: 64px 64px;
}
to {
background-position: 64px 1088px;
}
}
@keyframes salju1 {
from {
background-position: 64px 64px;
}
to {
background-position: 64px 1088px;
}
}

Planing HTML<body>
<div class="salju snow">

</div>
</body>

NB:
Pada bumbu CSS, gantikan tulisan HOST-LINK-IMAGE-SNOW/RAIN.PNG dengan link host gambar hujan/salju. Gue sudah siapkan, silahkan tinggal hostingkan. Snow Picture atau Rain Picture Pilih salah satu saja! Pada property .salju:before,.salju:after sobat bisa merubah arah jatuhnya snow/rain dengan merubah angka pada kode properties-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);Untuk kecepatan jatuhnya snow/rain perhatikan pada property .salju.snow:before,.salju.snow:after dan .salju.snow:after rubahlan nominal timing pada properties-webkit-animation-duration: 6s;
animation-duration: 6s;Dalam memasukan markup HTML <div class="salju snow"> harus di dalam tagging <body> Bisa juga di dalam tagging <main-wrapper> tergantung unik-ID pada template masing-masing. Demikian dan terima kasih :)

Happy falling effect \m/

Show Messages use Address Link Post

Aapakah anda pernah memperhatikan tulisan hasil ketikan dari sebuah search engine? Misalkan sobat mengetik "Tutorial Blog for Stylish Blogger" di dalam kotak pencarian google. Maka pada address bar browser akan terlihat menjadi: https://www.google.com/?q=Tutorial+Blog+for+Stylish+Blogger Pada tampilan halaman pencarian, tulisan yang diketikan akan memiliki warna yg berbeda!
Ex: Tutorial Blog for Stylish Blogger
Dengan bantuan jQuery script, AA Koben akan berbagi trik tutorial bagaimana cara membuat pesan di mana prinsip kerja seperti sebuah search engine (kalimat pembuka tadi) Jadi, link sebuah postingan blog anda akan menjadi korban :D agar trick ini berjalan mulus :))

Buatlah satu artikel post, terserah mau di isi dengan kalimat basa-basi apaan. Kemudian hilangkan style (CSS) template/area konten/widget/etc seperlunya. Masukan bumbu ajaib berikut ke dalam area postingan...

<div class="box">
<p>Message here...</p>
</div>

<style>
.box {
font: normal 12px/1.5 "Verdana", arial, sans-serif;
width: auto;
height: auto;
min-height: 53px;
margin: 0 auto;
padding: 12px 5px 4px 41px;
position: relative;
color: #cc0000;
line-height: 20px;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.box::before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
function escapeHtml(text) {
var map = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#039;'
};

return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
var replacestring = "`1234567890-= qwertyuiop[] asdfghjkl;' zxcvbnm,./ ~!@#$%^&*()_+ QWERTYUIOP{}| ASDFGHJKL:\ ZXCVBNM<>?";
var paperstring = escapeHtml(decodeURI(getQueryVariable("txt")).substr(0, 120).replace(/\+/g," "));
$('.box p').html(paperstring);
var plength = paperstring.length;
var rlength = replacestring.length;
});
//]]
</script>

Selesai misi membuat dashboard untuk menampilkan pesan.
Demo: My Messages For You (Press Enter if you see skull head)

Permasalahan timbul, apakah kita harus secara manual membuat lambang + pada setiap antar kata! Solusinya, buatlah ___.html secara terpisah? Buka notepad/teks editor sobat

<!DOCTYPE html>
<html>
<head>
<title> </title>
<script type="text/javascript">
function work(what) {
 var escapedString = escape(what);
 var stringToReplace = escapedString.split('%20');
 escapedString = stringToReplace.join("+");
 stringToReplace = escapedString.split('%0A');
 escapedString = stringToReplace.join("+"); 
 return escapedString;
}
</script>
<style>
#toParse {
 font-family:inherit;
 font-size:11pt;
 width:100%;
 height:100px;
}
#button {
 background:#f3f3f3;
 border:solid 1px #d9d9d9;
 border-radius:2px;
 -webkit-border-radius:2px;
 color:#666;
 font-weight:bold;
 margin:0 0 0 16px;
 padding:6px 12px;
}
</style>
</head>
<body>
<textarea id="toParse" spellcheck="false" onkeyup="document.getElementById('linkText').value = document.getElementById('theirURL').value + '?txt=' + work(document.getElementById('toParse').value)"></textarea>
<p>
 Basic link: <input type="text" name="txt" size="50" id="theirURL" value=" LINK-POSTINGAN "/>
</p>
<button id="button" onclick="document.getElementById('linkText').value = document.getElementById('theirURL').value + '?txt=' + work(document.getElementById('toParse').value)">Make Link</button>
<p>
 Your link (CTRL+C or right-click to copy):
<input id="linkText" type="text" size="60" onclick="this.select();" readonly="readonly"/>
</p>
</body>
</html>

Gantikan tulisan LINK-POSTINGAN dengan link address postingan yg tadi sobat buat (penjelasan di atas!!!)
Source by: Shre Per
Itu hanya versi standar yg saya buat. Jika sobat mengerti akan JavaScript, you bisa menambahkan banyak lagi vaiasi urlEncoding ke dalamnya :)

Happy ngoding \m/

Snippet Inline CSS Filter for Mozilla Update

Dulu gue pernah memposting tentang snippet inline CSS filter for mozilla. Kemudian aku melihat artikel svg filters effects · drag & drop codepen.io/jorgeatgu/pen/wBRmBZ! Ternyata ada beberapa efek keren hasil generate menggunakan syntax SVG Filters? Adapun nama efek tersebut adalah turbu map, turbulence, luminance, discrete, table, fematrix dan morpho.
Singkat cerita, AA Koben akan berbagi trik penulisan CSS secara inline di mana meliputi dari efek-efek yg gue sebutkan tadi! Updated for simple hover effects with CSS filters codepen.io/beben-koben/full/ckKzh.

Syntax HTML<img src="LINK-IMAGE" alt="" class="EFFECT BLUR" />Gantikan tulisan EFFECT BLUR dengan nama-nama efek!
Buka satu halaman full artikel jika demo tidak jalan!

Original Image

Turbu Map Effect

.turbuMap {
-webkit-filter: url("#turbuMap");
filter: url("#turbuMap");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'turbuMap\'><feTurbulence baseFrequency=\'0.015\' numOctaves=\'2\' type=\'fractalNoise\' result=\'turbulence\' data-filterId=\'3\' /><feDisplacementMap xChannelSelector=\'R\' yChannelSelector=\'G\' in=\'SourceGraphic\' in2=\'turbulence\' scale=\'40\' /></filter></svg>#turbuMap");
}

Turbulence

.turbulence {
-webkit-filter: url("#turbulence");
filter: url("#turbulence");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'turbulence\'><feTurbulence baseFrequency=\'.7\' numOctaves=\'2\' type=\'turbulence\' result=\'fuzz\' stitchTiles=\'stitch\' /><feComposite in=\'SourceGraphic\' in2=\'fuzz\' operator=\'arithmetic\' k1=\'0\' k2=\'1\' k3=\'-3\' k4=\'.01\' /></filter></svg>#turbulence");
}

Luminance

.luminance {
-webkit-filter: url("#luminanceToAlpha");
filter: url("#luminanceToAlpha");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'luminanceToAlpha\'><feColorMatrix type='\luminanceToAlpha'\ values='\0.4'\ in=\'SourceGraphic\' /></filter></svg>#luminanceToAlpha");
}

Discrete I

.discrete {
-webkit-filter: url("#discrete");
filter: url("#discrete");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'discrete\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 .5 1 1\' /><feFuncG type=\'discrete\' tableValues=\'0 .5 1\' /><feFuncB type=\'discrete\' tableValues=\'0 .5\' /></feComponentTransfer></filter></svg>#discrete");
}

Discrete II

.discrete2 {
-webkit-filter: url("#discrete2");
filter: url("#discrete2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'discrete2\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 .5 1 1\' /><feFuncG type=\'discrete\' tableValues=\'0 5 1\' /><feFuncB type=\'discrete\' tableValues=\'0 .5 1 1\' /></feComponentTransfer></filter></svg>#discrete2");
}

Table I

.table {
-webkit-filter: url("#table");
filter: url("#table");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'table\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0 1\' exponent=\'5\' /><feFuncG type=\'table\' tableValues=\'1 0 1\' exponent=\'2\' /><feFuncB type=\'table\' tableValues=\'1 0 1\' exponent=\'5\'/></feComponentTransfer></filter></svg>#table");
}

Table II

.table2 {
-webkit-filter: url("#table2");
filter: url("#table2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'table2\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0 1\' exponent=\'5\' /><feFuncG type=\'table\' tableValues=\'1 10 1\' exponent=\'2\' /><feFuncB type=\'table\' tableValues=\'1 5 1\' exponent=\'5\'/></feComponentTransfer></filter></svg>#table2");
}

Fematrix I

.fematrix {
-webkit-filter: url("#fematrix");
filter: url("#fematrix");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'fematrix\'><feConvolveMatrix order=\'3\' kernelMatrix=\'-1 -1 3 -2 1 -1 -1 1 -1\' /></filter></svg>#fematrix");
}

Fematrix II

.fematrix2 {
-webkit-filter: url("#fematrix2");
filter: url("#fematrix2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'fematrix2\'><feConvolveMatrix order=\'4\' kernelMatrix=\'-2 2 1 -1 -1 3 2 1 -1 0 -1 -4 -1 1 0 0\' /></filter></svg>#fematrix2");
}

Morpho I

.morpho {
-webkit-filter: url("#morpho");
filter: url("#morpho");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'morpho\'><feMorphology operator=\'erode\' radius=\'3\'/></filter></svg>#morpho");
}

Morpho II

.morpho2 {
-webkit-filter: url("#morpho2");
filter: url("#morpho2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'morpho2\'><feMorphology operator=\'dilate\' radius=\'3\'/></filter></svg>#morpho2");
}

Capek #:-S

Eyes Saver, Make Your Screen Cool

Pada dasarnya trik ini memiliki fungsi hampir sama dengan tutorial membuat screensaver untuk blog. Jika pada trick screensaver mempunyai tujuan yakni menyembunyikan konten dan digantikan dengan tampilan lain, kesempatan sekarang AA Beben akan mencoba bagaimana cara membuat Eyes Saver! Eyes-saver adalah secuil deretan kode CSS untuk menampilkan efek redup-redup (rgba) supaya ketika menemukan web/blog dengan tampilan warna yang kontras mata kita akan terbantu terlindungi dengan mengaktifkan fitur eyes saver :D
Ilustrasi on sekrin siut:Dalam kasus ini, penanaman kode rgba(0,0,0,0.3); sebagai warna background akan membantu berfungsi sebagai filter kontras cahaya yg berlebihan (mencolok)! Singkat cerita, gue mau kasih tau bagaimana cara membuat layar monitor anda sekalian menjadi rgba(0,0,0,0.3) :))

.container_ {
transition: transform 0.5s;
backface-visibility: hidden;
}
.eyesSaver-Overlay {
display: none;
background: rgba(0,0,0,0.3);
}
.eyesSaver-Overlay,.eyesSaver-Overlay a {
position: fixed;
z-index: 99;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.button {
display: block;
float: right;
background: #fff;
padding: 5px 10px;
border-radius: 50%;
font-size: 1.3em;
transition: all 0.3s linear;
}
.button:before {
content: '\2600';
}
.button:hover {
box-shadow: 0 13px 25px 0 rgba(0,0,0,0.3);
}
nav:target ~ .container_ .eyesSaver-Overlay {
display: block;
}
.nav1 {
bottom: 5%;
right: 4%;
position: fixed;
}

Tempatkan syntax HTML di dalam tag <body> sebelum tag </body> template.<nav id="slideLeft"></nav>
<div class="container_">
<div class="eyesSaver-Overlay"><a href="#"></a></div>
<div class="nav1">
<a href="#slideLeft" class="button"></a>
</div>
</div>DEMO
Bye :-h

Get One Free Two for Code Tester

Ternyata begini rasanya jika sudah dihinggapi virus malas, source developer lagi pada sepi plus blank idea :D Gue angkat kembali tema kojo pada blog ini yaitu HTML editor with live preview supaya para pengunjung tidak kecewa! Kok nggak update yaaa :-" Tidak sengaja menemukan ketika browsing dengan keyword code tester masuk ke bagian dalam halaman jelajah google! AA tidak akan menjelaskan apa itu code tester? Satu yg pasti mempunyai fungsi sama dengan playground HTML editor. Biasalah bro, bermain sambil belajar ;))

Untuk mempersingkat waktu, dipersilahkan bagi kalian yg sudah bisa mengambil sendiri source kode dari sumber. Get Code Tester www.jschneider88.com/codetester. Sama gue sudah dimodif dengan menambahkan syntax-highlighter by codemirror! Pada bagian navigasi telah disisipkan form color Spectrum by @bgrins bgrins.github.io/spectrum.
Screenshot...Seperti yg sudah saya utarakan di atas, mendapatkan code-tester berada di halaman dalam google entah page berapa! Sebagai contoh dengan keyword serupa, ternyata playground HTML editor masih ada :D Silahkan lihat sendiri:

• Online Code Tester.
www.lutanho.net/goodies/codetester.html
• Demonstration HTML Test Page.
www.play-hookey.com/htmltest

Sengaja saya comot contoh tersebut, karena teknik penampilan page.html menggunakan penulisan syntax iframe Semoga owner web tidak keberatan juga saya sikat source code untuk dibagikan kepada para blogger :"> Amal ibadah itung-itung ;))
Silahkan download ketiga apps.html tersebut bagi yg berkenan. Absolutely this is for learning and work offline mode.

>> Code Tester unduh via 4shared
www.4shared.com/zip/Z0veh_aFce/Code_Tester.html
>> Download Code-Tester.zip in Ziddu
downloads.ziddu.com/download/24467777/Code-Tester.zip.html

Kekurangan modifikasi dan penambahan fitur silahkan add masing-masing ya :)) Soalnya nggak ada waktu buat bagus-bagusin...UGH!!! :P

Happy coding \m/