Dunia Desain

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...

Hari ini kami ingin membagikan beberapa animasi "cek" keren untuk kotak centang dan tombol radio dengan Anda. Idenya adalah untuk menghidupkan SVG untuk menciptakan efek visual yang bagus untuk memilih kotak centang atau masukan radio. Ada banyak kemungkinan untuk grafis animasi, seperti salib, tanda cek, lingkaran dan sebagainya. Teknik untuk menjiwai jalur SVG adalah dengan Jake Archibald dan Anda bisa membaca bagaimana cara kerjanya secara mendetail dalam artikelnya gambar garis animasi di SVG. Perlu diketahui bahwa ini hanyalah sebuah proof-of-concept dan bukan solusi yang lengkap. Transisi jalur SVG mungkin tidak bekerja di semua browser, terutama yang mobile. Untuk kotak centang atau tombol radio khusus kita menggunakan :: before pseudo-element dari label dan kita menyembunyikan input dengan mengatur opacity menjadi 0. Sebenarnya ada, di atas elemen semu, sehingga kita cukup mengklik itu dan mempertahankan perilaku seleksi input default. Kami juga membuat label...

Hari ini kami ingin berbagi slideshow / slider eksperimental dengan Anda. Idenya adalah untuk menghidupkan sebuah frame SVG sementara kita beralih dari satu slide ke slide lainnya. Dengan menggunakan berbagai bentuk kita bisa menciptakan berbagai gaya bingkai saat memilah-milah jalur SVG. Inspirasi untuk ide ini didasarkan pada tembakan Dribbble MEDIOCRE: 06 oleh Shota. Kami menggunakan anime.js untuk animasi. Berikut beberapa screenshot dari Slideshow ini. 1. Box-like sederhana 2. Dalam demo ini kami menggunakan pola untuk mengisi bentuk yang agak miring persegi panjang. Pola itu berasal dari Hero Patterns 3. Di sini kita menghidupkan bentuk melingkar agar terlihat seperti kita "memfokuskan" pada tempat tertentu di peta. Peta ditambahkan ke SVG yang sama 4. Dalam demo ini, kita membuat animasi step-wise, membuat setiap sudut bergerak dengan delay 5. Contoh ini menunjukkan bahwa kita bisa menggunakan bentuk apapun, bahkan yang sangat ...