Penggunaan Pseudo Element di CSS3Hallo teman-teman, apa kabarnya ? semoga baik-baik saja yah, amin.

Ketemu lagi nih dengan saya, pada kesempatan kali ini saya akan berbagi artikel mengenai beberapa generator untuk Flat UI dan Animasi Website, sekarang ini kan banyak sekali generator-genarator yang mempermudah kita dalam pembuatan website. berikut adalah referensi generator untuk teman-teman bisa gunakan:

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

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

Nah itulah beberapa generator yang dapat teman-teman gunakan, baiklah samapai disini pertemuan kita kali ini semoga bisa menjadi referensi bagi teman-teman yang masih bingung mencari genarator. Sampai ketemu dilain kesempatan 🙂