Technology

10 CSS Generator untuk Flat UI dan Animasi Website

 

Loading...

CSS merupakan salah satu aspek terpenting dari terbentuknya sebuah halaman webiste. Biasanya penggunaan CSS selalu beriringan dengan penggunaan HTML, sehingga mampu tercipta suatu tampilan website yang indah. Penulisan kode CSS sendiri sudah bisa dipelajari melalui modul – modul yang ada di internet. Namun saat ini sudah ada cara yang lebih mudah untuk membuat sebuah kode CSS, yaitu melalui CSS Generator. Berikut ini 20 CSS Generator yang sangat cocok digunakan untuk pembuatan website berbasis Flat UI dan Animasi :

1. CSSButton.me
Fitur terpenting dalam sebuah website salah satunya adalah sebuah button. CSS Generator yang satu ini lebih dikhususkan untuk pembuatan sebuah button. Disini kita bisa mengatur ukuran button, radius, style, color dan lain sebagainya. Setelah kita selesai mengatur button yang diinginkan, kita bisa mendapatkan sebuah source kode CSSnya di sebelah kanan bawah.

1

2. CSS3 Button Generator
CSS3 Button Generator ini juga merupakan CSS Generator untuk Button. Disini kita bisa memilih model button seperti apa yang kita inginkan. Kita juga bisa mengatur style dari button itu sendiri, dan mendapatkan kode CSSnya. Lebih dari 100 model button tersedia disini.

2

3. CSS Menu Maker
Menu dalam sebuah website juga merupakan salah satu bagian terpenting. Karena dari menu yang disediakan kita bisa mengetahui apa saja yang tersedia didalam website tersebut, seperti home, artikel, contact us, galery, dan lain sebagainya. CSS Menu Maker, menyediakan berbagai contoh menu. Disini kita bisa memilih menu mana yang sesuai dengan keinginan kita. Untuk beberapa CSS menu disediakan gratis, namun ada juga yang berbayar.

3 copy

4. Form Builder
Pada suatu website tentu saja kita sering melihat adanya form pengisian, baik form login atau seperti form registrasi lainnya. Untuk pembuatan form sendiri diharuskan semenarik mungkin, agar pengunjung website anda mau mengisi form yang tersedia. Salah satu cara untuk membuat Form anda indah adalah dengan menggunakan Form Builder. Disini form builder disediakan untuk membuat, menyusun dan mendesain form sesuai keinginan.

4

5. Ribbon Builder
Pernah melihat adanya sebuah ribbon dalam sebuah website? Ya, biasanya penggunaan ribbon untuk sebuah pengumuman pemenang suatu event, penghargaan terhadap sesuatu atau bisa juga untuk sebuah label. Pembuatan Ribbon dengan CSS kini bisa menggunakan Ribbon Builder. Disini kita bisa mendesain Ribbon sesuai keinginan kita. Dan nantinya kode CSS bisa dipindahkan kedalam kode css yang kita buat.

5

6. CSS3 Shapes
Pembuatan Shape dalam sebuah website terkadang menyulitkan, karena kita harus membuat kode CSS yang sesuai dengan bentuk yang diinginkan. Namun kali ini sudah ada CSS3 Builder yangmana menyediakan kode CSS dari berbagai macam Shape. Disini kita bisa memilih dan menyalin kode CSS dari shape tersebut.

6

7. CSS Hexagon
Pembuatan CSS Hexagon dalam sebuah website kini bisa sangat mudah, karena sudah banyak tutorial yang disediakan di internet. Salah satu contohnya seperti berikut. kita hanya tinggal mengambil source kode CSSnya :

7

8. CSS Arrow
Dalam sebuah website ada salah satu content yaitu sebuah arrow atau tanda panah. Pembuatan tanda panah ini memang diharuskan fokus pada objek, sehingga dibutuhkan pengaturan css yang sesuai. Sudah ada css generator yang disediakan untuk membuat sebuah arrow. Disana kita bisa mengatur style yang diinginkan, kemudian bisa menyalin kode css yang sudah terbentuk.

8

9. Metro UI
Tren pembuatan flat design dengan menggunakan metro UI sudah bukan hal yang baru. Design ini biasanya hampir sama seperti design windows 8. Design ini terlihat lebih sederhana namun tetap elegant.

9

10. Animate.css
Kali ini mengenai animasi, disini animasi.css menyediakan pilihan bagaimana objek yang kita miliki ingin kita beri animasi, seperti bounce, flip, slide dan sebagainya. Di website ini hanya menyediakan demo animasi, jika ingin mendownload source kode css bisa mendownload di github.

10

Loading...

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *