Dunia Desain

Hari ini kami ingin menunjukkan kepada Anda cara membuat efek transisi yang menarik namun sederhana dengan menggunakan Masker CSS. Bersama dengan kliping, masking adalah cara lain untuk menentukan visibilitas dan komposit dengan elemen. Dalam tutorial berikut, kami akan menunjukkan cara menerapkan properti baru untuk efek transisi modern pada tayangan slide sederhana. Kami akan menerapkan animasi dengan memanfaatkan langkah-langkah () fungsi timing dan memindahkan mask mask ke atas gambar untuk mencapai efek transisi yang menarik. Markup Untuk demo kami, kami akan membuat slideshow sederhana untuk menampilkan efek topeng. Tayangan kami akan mengisi keseluruhan layar dan kami akan menambahkan beberapa panah yang akan memicu transisi slide. Idenya adalah untuk memperbesar slide dan kemudian mengubah indeks-z dari slide yang masuk saat animasi selesai. Struktur untuk tayangan slide kami terlihat seperti berikut: < div class = "page-view" > < div class = ...

Hari ini kami ingin berbagi inspirasi dengan Anda. Topik dari koleksi inspirasional ini adalah indikator navigasi. Halaman, tayangan slide dan komponen lainnya sering membutuhkan semacam navigasi yang memberitahukan pengguna di mana dia berada saat ini. Dalam koleksi ini kita ingin menjajaki beberapa desain halus yang membuat navigasi menjadi menyenangkan dan menarik. Contoh yang kami gunakan adalah slideshow vertikal namun gaya dapat dibayangkan dan disesuaikan untuk komponen lainnya. Perhatikan bahwa ini hanya untuk tujuan inspirasi; slideshow hanya dummy dan kami menggunakan beberapa teknik modern yang hanya bekerja pada versi browser terbaru. Ini adalah contoh markup kami: < nav class = "nav nav--timiro" > < button class = "nav__item" aria-label = "Item 1" > </ button > < button class = "nav__item nav__item--current" aria-label = "Item 2" > </ button > < button class = "nav...

Ada beberapa teknik untuk "menyesuaikan" elemen <input type = "file" />. Aku mencoba sebagian besar dari mereka, tapi tidak ada yang cukup baik untuk memiliki di Readerrr (untuk mengimpor feed dengan mengunggah file). Mungkin teknik yang paling buruk adalah di mana elemen input dimasukkan ke dalam wadah (yang meniru tombol), dan masukan mengikuti kursor sehingga saat Anda mengklik di mana saja pada wadah, Anda benar-benar mengeklik masukan. Kedengarannya menarik dan aneh pada saat bersamaan, bukan? Bagaimanapun, itu memiliki beberapa kekurangan yang tidak dapat diterima (kegunaan, sentuhan). Sebagai hasilnya, saya mencoba googling untuk mendapatkan solusi yang tak terlihat. Setelah itu sepertinya tidak ada yang baru, mata saya tertangkap oleh sebuah komentar di StackOverflow. Itu hanya beberapa suara dan hilang di suatu tempat di tengah halaman, tapi yang terpenting berisi kata ajaib - <label>! Seperti yang mungkin Anda ketahui, menekan label pada...