CSS 3 Generator Part I

Selamat Tahun Baru 2014 

Pada kesempatan ini akan saya perkenalkan tools dari website yang berguna sekali dalam memberikan efek css 3 dan gampang sekali untuk di terapkan ke website teman-teman.

CSS 3 Generator | www.css3generator.com

Nah, teman-teman bisa melihat kita bisa memilih 12 tools yang telah di sediakan. Di kesempatan kali ini saya akan mengenalkan tool yang bernama "Border Radius".

Di halaman awal, kita akan melihat menu yang sangat simple. "Choose Something". Silahkan di klik. Maka akan muncul list tools yang bisa di terapkan di website kita.

Saya akan pilih "Border Radius". Maka tampilannya akan menjadi seperti gambar di bawah ini.

Nah, sekarang kita tentukan dulu, apakah kesemua sisi / sudut dari website akan kita beri efek melengkung. untuk kasus di sini akan saya demokan kalau sisi kiri dan kanan atas saja yang kita berikan efek "Border Radius" sebesar 20 pixel.

Bisa di lihat, highlight paling ata adalah informasi versi minimum browser untuk menjalankan CSS 3 ini. Lalu untuk yang di bagian kotak putih, bisa di lihat kalau sudut kanan dan kiri itu udah melengkung sebesar 20 pixel. Sedangkan yang di kiri dan kanan bawah masih tajam sudutnya.

Kalau sudah cocok, maka tinggal kita klik button "Copy". Maka code-nya siap kita pindahkan ke css website kita. Contoh, kalau mau di taruh di "header" sebuah website, maka kita cek dulu struktur HTML nya. Kalau struktur halaman websitenya terdiri dari "wrapper" lalu "header", maka yang harus kita beri code CSS 3 barusan itu di "wrapper" dan "header". Silahkan mencoba. Kalau ada yang mau ditanyakan silahkan ke www.facebook.com/dumetschool untuk tanya-tanya