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

Inspirasi Button Dengan pop-up

By
Image
Hari ini kita ingin berbagi sedikit inspirasi untuk konsep tombol morphing. Anda pasti sudah menemukan konsep ini: idenya adalah menggunakan elemen tindakan, seperti sebuah tombol, dan mengubahnya menjadi sesuatu yang lain saat diklik. Pada dasarnya, elemen tindakan sedang "digunakan kembali" secara visual untuk mengungkapkan beberapa konten lainnya. Ini bisa berupa overlay fullscreen, jendela modal, tombol share yang meluas, dan sebagainya. Harap dicatat bahwa ini hanya untuk tujuan inspirasi saja! Sebagian besar konten dan fungsionalitas terdiri dari dummies dan kami hanya mendukung peramban modern. Cara kita mengubah satu tombol menjadi, misalnya, hamparan layar penuh adalah sebagai berikut: Kami memiliki pembungkus tombol utama yang berisi elemen tombol dan pembagian untuk konten yang diperluas. Sementara elemen pembungkus dan tombol awalnya terlihat, pembagian untuk konten yang diperluas hanya akan muncul begitu kita mengklik tombolnya. Divisi itu memiliki posi...
Read more