Sitemap

By

Comments

Post a Comment

Popular posts from this blog

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

Inspirasi Menu Dengan CSS

By
Image
Garis adalah elemen desain yang menakjubkan. Ini sangat serbaguna dan memungkinkan kita menggunakannya untuk menambahkan animasi yang menyenangkan atau meningkatkan poin yang diminati. Hari ini kami ingin berbagi seperangkat ide untuk menggunakan garis sebagai elemen desain dalam menu horizontal. Ada banyak kemungkinan kreatif, beberapa sangat kecil dan halus, yang lain berani dan lebih boros. Kami telah menyiapkan sedikit set inspirasional untuk Anda di mana kami menjelajahi beberapa menu menu. Kami juga ingin mengundang Anda untuk menyumbangkan gaya Anda ke koleksi terbuka ini. Lihat rincian GitHub. Mari kita lihat markup yang, selain beberapa pengecualian, sama untuk setiap gaya menu: < section class = "section section--menu" id = "Prospero" > < h2 class = "section__title" > Prospero </ h2 > < nav class = "menu menu--prospero" > < ul class = "menu__list" > < li class = ...
Read more