Sitemap

By

Comments

Post a Comment

Popular posts from this blog

Border Menu Dengan Animasi dan CSS

By
Image
Suatu hari saya melihat konsep menu yang sangat bagus di situs UI8. CreativeDash menerapkan konsep cantik itu dan saya langsung memiliki beberapa gagasan untuk lebih banyak efek yang melibatkan transisi perbatasan namun juga dengan pemikiran desktop. Jadi hari ini saya ingin menunjukkan cara membuat sesuatu seperti itu dan memberikan beberapa contoh yang lebih inspiratif. Dalam tutorial ini kita akan melalui demo 2 dimana ikon menu ada di pojok kiri atas dan border paling tebal di sisi kiri. Harap perhatikan bahwa kami akan menggunakan transisi dan animasi pada elemen semu yang tidak akan berfungsi di beberapa browser (misalnya Safari dan Safari Seluler). Jadi, mari kita mulai! Markup Struktur HTML untuk menu kita akan terdiri dari elemen nav yang akan berisi trigger anchor dan unordered list dengan item menu yang akan terdiri dari ikon: < nav id = "bt-menu" class = "bt-menu" > < a href = "#" class = "bt-menu-trigger...
Read more

Transisi untuk Menu Off-Canvas

By
Image
Hari ini kami ingin berbagi beberapa gaya dan efek untuk menu di luar kanvas. Sidebar off-kanvas banyak digunakan dan kami telah menciptakan beberapa efek inspirasi sebelumnya. Seperti dengan segalanya, gaya berkembang dan hari ini kita ingin menunjukkan seperangkat efek modern baru untuk inspirasi Anda. Tata letak yang berbeda dan transisi menu yang disinkronkan dan halamannya bisa membuat semuanya terlihat lebih menarik dan kami dapat memanfaatkan ruang yang tersedia untuk menu samping dan kontrol. SVG memungkinkan kita bermain dengan bentuk organik dan menambahkan beberapa gerakan tak terduga dan bergaya ke desain. Kami menggunakan transisi CSS, animasi CSS yang dibuat dengan bounce.js dan SVG animasi dengan bantuan Snap.svg. Kami juga menggunakan Font Awesome dan gambar profilnya berasal dari Random User Generator. Perlu diketahui bahwa efeknya berfungsi sebagai inspirasi dan akan bekerja (terbaik) di browser modern. Mari kita lihat beberapa gaya: 1. Demo pertama ini ter...
Read more

Membuat Progress Button

By
Image
Hari ini kami ingin berbagi beberapa gaya tombol kemajuan dengan Anda. Anda pasti tahu "Ladda" oleh Hakim El Hattab, sebuah konsep UI yang mengindikasikan kemajuan secara langsung pada tombol yang memanggil aksi pemuatan. Beberapa tombol memiliki built-in progress bar dan hari ini kami ingin mengeksplorasi gagasan itu dengan beberapa gaya tombol kemajuan yang kreatif. Menggunakan perspektif akan memungkinkan kita untuk membuat beberapa efek 3D menyenangkan selain gaya "mengisi" datar. Untuk solusi yang lengkap, silakan lihat Ladda dengan lebih baik. Harap perhatikan bahwa kami akan menggunakan transisi pada elemen semu yang masih belum didukung di beberapa browser (misalnya Safari dan Safari Seluler). Perhatikan juga bahwa kita memerlukan gaya transform: mempertahankan dukungan 3-1 untuk gaya 3D, yang tidak didukung IE10 maupun IE11. Dengan naskah yang telah kami buat untuk menampilkan gaya tombol, kami mengambil markup tombol sederhana dan mengubahnya m...
Read more