Rabu, 16 Januari 2013

Inkscape : manipulasi warna pada browser

0. Mukodimah



Berikut ini merupakan catatan latihan saya pada episode interaksi inkscape dengan web. Untuk meilhat / melakukan demo diperlukan browser yang mendukung svg. Dalam hal ini saya menggunakan Mozilla & Opera.

Pada dasarnya yang saya lakukan sederhana saja, yakni maipulasi warna saja. Tentu saja bila berurusan dengan web hal ini bisa dilakukan dengan CSS. Dan memang sebenarnya bahwa CSS pun bisa digunakan untuk memanipulasi file keluaran Inkscape ( SVG ).

Baiklah, tinggalkan kode rumit dan kita mulai bereksperimen.

1. Perhatikan ilustrasi berikut






Seperti ilustrasi diatas, kita akan melakukanya dengan 4 langkah sederhana :

1. Buatlah sebuah 'shape'. Saya membuat sebuah bujursangkar dengan tool yang sudah tersedia.
2. Kemudian buka PROPERTIS
3. Isi onmouseover & onmouseout seperti ilustrasi diatas
4. simpan ke format optimized svg, ingat jangan bentuk svg yang lain.

2. Buka pada browser



Untuk simulasi silahkan arahkan mouse pada kotak dibawah ini.



Seharusnya anda sudah mendapatkan efek perubahan warna. Ini sekedar contoh, dan bila anda membuat sesuatu yang keren, silahkan tinggalkan komentar dibawah sehingga saya dapat mengunjunginya.

Berikut contoh lain dari efek perubahan / manipulasi warna.

Tidak ada komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...