Jumat, 07 Februari 2014

Selection Good Resources February 2014

Berbagi informasi lagi... Datang dari salah satu web developer playground yakni jSDO.IT Dua postingan sebelumnya gue sudah melakukan seleksi tools dari web tersebut, yaitu: seleksi tools dari jsdo.it & extra selection tools of jsdo.it. Masih dari sana namun 1 account dengan nick akm2 AA akan bagi apps pilihan dari si akm2 itu! Yang akan saya ulas adalah tool membuat CSS keyframes dinamis menggunakan JavaScript. Demo: jsrun.it/akm2/ede6
Pada sesi demo dengan hanya melakukan klik akan langsung terlihat hasil dan kode CSS keyframes. Permasalahan timbul bagaimana cara mengambil kode CSS nya :D Generate tool ini akan menggenerate kode CSS-keyframes sesuai browser yg di pakai. Mirip dengan kinerja prefixfree script.

Koben sudah rubah dan tambahkan pada page CSS keyframes の Javascript による動的な書き換え double click untuk membuat/menentukan efek animasi, single click untuk mendapatkan kode CSS plus cursor x & y coordinates.

CSS-Keyframes

Pure CSS Image Generator

jsdo.it/akm2/sz2T
Generator merubah image menjadi format CSS. Hati-hati dalam menggenerate image dengan resolusi besar.

Triangulate It

jsdo.it/peko/bpkd
Generator merubah gambar menjadi ada efek triangulate (segi tiga) dengan cara di klik-klik.

Pure CSS Image Generator

jsdo.it/akm2/hQf1
Mirip dengan yg pertama, tetapi pada generator ini terdapat opsi ukuran dot (titik) yg mana efek dari mau jelas atau tidak.

Triangulation Image Generator

jsdo.it/akm2/xoYx
Generator penerus dari point ke 2 diatas, tetapi yg ini sudah otomatis tanpa harus klik-klik jebret jadi.

Triangle Mosaic

jsdo.it/akm2/nGBI
Efek lain dari tool generate triangle image dengan gaya mosaic.

Beberapa tool menarik lainnya namun tidak ada fasilitas drop image. Jadi rada repot buat ganti2 gambarnya nih :P jsdo.it/imageData/umzD - jsdo.it/imageData/kI7e - jsdo.it/akm2/iy3E
Kalau mau mencoba tools generator tetapi males pindah kesana-kemari, you have to try it coy code generator

Bonus:
dizyne.net/30-tutorials-help-master-css3 - www.webdesignersblog.net/coding/amazing-collection-animation-and-transition-effect-roundups - freakify.com/best-buttons-2014
Script cursor coordinate by www.brenz.net/snippets/xy.asp

Happy blogging \m/

Tidak ada komentar:

Posting Komentar