My Blog Menu

Terbaru
Artikel
Label
Tentang

Rabu, 25 Maret 2015

Kode Warna HTML

Assalamualaikum Wr. Wb. Kali ini saya akan menjelaskan tentang Warna di HTML, tentu kita sudah banyak melihat warna di HTML tetapi mungkin kita belum tahu bagaimana mewarnai HTML, sebenarnya warna HTML menggunakan kode CSS background-color: [warna] untuk warna background dan color: [warna] untuk warna dalam (biasanya teks dalam elemen), nah diisi apa [warna] tersebut? disini [warna] bisa diisi dengan red, green, blue, yellow, dll..., tetapi ada juga warna yang tidak bisa ditulis nama warnanya, kita gantikan dengan kode #RRGGBB, contoh warna biru berarti ditulis #0000FF, kode tersebut menggunakan angka 0-255 yang ditulis dalam bentuk hexadesimal 00-FF yang berarti intensitas warnanya, semakin besar angka(hex) semakin terang(jelas) warnanya, baris pertama mewakili RED #RR----, kedua mewakili GREEN #--GG-- dan ketiga mewakili blue #----BB.

Disini berarti warna dibuat dengan kombinasi warna, misal warna kuning ditulis #FFFF00, kenapa? karena kuning adalah campuran merah dengan hijau, jadi kita buat birunya menjadi 00 sehingga ditulis #FFFF00, FF bisa diganti dengan jumlah berapa saja asalkan dalam bentuk hexa desimal (FF = 255, FE = 254, FD = 253, dst --- 00 = 0).

Nah, bagaimana dengan warna yang transparan? Tentu tidak bisa menggunakan warna transparan dengan kode warna diatas (sebenarnya bisa tetapi kita perlu menambahkan opacity: [jumlah] di CSS tetapi mempengaruhi semua isi elemen), kita perlu kode [warna] yang ditulis dengan rgba([R], [G], [B], [A]) dengan aturan depan yg sama yaitu background-color: [warna] untuk warna background dan color: [warna] untuk warna dalam (biasanya teks dalam elemen), nah diisi apa [warna], tetapi apa itu [A]? [A] adalah Alpha atau transparannya, bisa diisi dengan angka desimal 0-1, hah, cuma 0 dan 1? Tidak 0-1 artinya bisa diisi dengan 0.0-1.0, semakin kecil nilainya semakin transparan, misal rgba(126, 126, 126, 0.5). kenapa RGB-nya diisi dengan desimal biasa? Karena kita menggunakan kode rgba maka cara penulisannya berbeda, dengan kode biasa (#) memang ditulis hexadesimal, tetapi dengan rgba ini kita menulisnya desimal biasa yaitu antara 0-255, dan aturannya sama, semakin besar angka semakin tampak warnanya.

Disini saya membuat demo warna sederhana yang akan membuat kita mengetahui warna dengan cepat:

R
G
B
A
RGB:
RGBA:


Anda bisa membuat warna sesuka Anda dengan menarik Slider diatas, warna dan kode akan langsung berubah sesuai dengan nilai yang diberikan. mungkin ada yang membutuhkan HTML diatas untuk digunakan secara offline, saya berikan source codenya.

Source, simpan dengan ekstensi "*.HTML": 

Jumat, 20 Maret 2015

Efek Transisi CSS (Transition Effect CSS)

Assalamualaikum Wr. Wb. Disini saya akan menjelaskan cara termudah untuk mendapatkan efek transisi, yaitu dengan menggunakan kode transition-duration:[waktu][s][ms]; pada CSS, sehingga waktu kita mengubah lokasi, bentuk atau memutar elemen, maka akan ada efek sebelum elemen berubah / berpindah, misalnya:
MUTER
transisi: ms
putaran: deg


Pada contoh diatas kita dapat langsug melihat hasil transisi setelah mengubah nilainya dengan menyeret kursor ke dalam lingkran diatas.
Contoh nilai transisi diatas adalah 500ms maka ditulis transition-duration:500ms; jika dalam hitungan milidetik(ms) atau transition-duration:0.5s; jika dalam hitungan detik(s).

Disini saya memberikan contoh menu sederhana yang akan terlihat profesional dengan efek transisi

Dengan Efek Transisi:


Tanpa Efek Transisi:


Bisa dilihat perbedaan yang sangat jelas, padahal kedua contoh menggunakan HTML dan JS yang sama hanya berbeda pada efek transisinya saja.

Adapun efek transisi yang menggunakan transition:[animasikan] [waktu] [mode];, animasikan berarti apa yang dianimasikan (diberi efek transisi), bisa diisi dengan all, width, height, opacity, dll... tetapi kebanyakan dan biasanya diisi dengan all, untuk waktu diisi sama dengan transition-duration: diatas, dan untuk mode bisa diisi dengan ease (efek default), ease-in (pelan disaat mulai animasi dan akan terus bertambah cepat), ease-out (melambat diakhir animasi), ease-in-out (pelan saat mulai dan akhir), linear [waktu] (pelan menurut waktu linear atau akan seperti ease jika tanpa waktu), contoh transition:all 500ms ease-in-out;

Jam Analog Tanpa Gambar (Analog Clock Without Image) HTML

Daripada nganggur bikin ginian aja, karena males bikin script lagi untuk gerakan jam dan logika pasaran (hari jawa) kopas dari Post Lama Saya dengan sedikit penambahan.


WARNING: Tidak bekerja di IE, untuk IE pake aja Raphaël—JavaScript Library

Source Code 

Kamis, 12 Maret 2015

Offline Javascript Obfuscator

Hmm, back from busy life, i search for Offline JS Obfuscator (javanese people said: 'niku gara2 kuota mung dibatesi jam') with the same method as www.javascriptobfuscator.com but found nothing, so i learn how they obfuscate the JS and try to make it myself, i did it but NOT COMPLETED at all, i just make it to obfuscate string-only and maybe you still face some error here, this is alpha version, because i just take a hour to code this.



you have to select string quotes type (" or ') in order to use this (i said this is alpha version, no automatic decide), for example if u frequently use var a='ABC' u should use '%string%' option.

this is the source for reference and i hope someone will continue this before me, i'm busy about task u know!! :))

Save as "*.HTA" extension 

Minggu, 17 Agustus 2014

Magnetic Piston (Free Energy and no Pollution Engine)

By far we know all engine include the Fuel Injection still need gas and produce the pollution, why we just not try my crazy Invention, the magnetic piston, a free energy engine because every piston rotation is already produce the electricity, and of course, no pollution, i have 2 models:

1. Opened engine:


2. Closed engine:


NOTE: The Opened Engine using air intake/exhaust and the Closed Engine using oil from the back. Magnet in the engine is Electromagnetic and normal magnet in the Piston. The wheel on the piston is to control electric output and of course control the electromagnetic power and piston speed.

3. Special invention (free electricity generator):


4. Original piston image (Searching from Google):