Tantangan GUI
Tidak ada satu cara untuk menyelesaikan tantangan antarmuka. Dalam seri ini, kami akan menantang diri kami sendiri dan satu sama lain untuk menemukan berbagai cara menyelesaikan tantangan antarmuka dan memperluas keberagaman keterampilan kita.
Mempertimbangkan cara untuk memecahkan palet warna
Dalam GUI Challenge hari ini, @AdamArgyleInk membuat palet warna gamut lebar dengan okLCH, memeriksa pasangan warna yang dapat diakses di sepanjang jalan, ins...
Memikirkan cara memecahkan teks fiksi ilmiah 3D
Dalam GUI Challenge hari ini, @AdamArgyleInk memberikan sentuhan #CSS pada efek teks 3D film sci-fi klasik dengan membuatnya interaktif untuk di-scroll. D...
Memikirkan cara untuk memecahkan GRUP SWITCH
Dalam GUI Challenge hari ini, @AdamArgyleInk mengubah grup radio menjadi grup tombol yang mengubah perataan teks. Pelajari cara menguji aksesibi...
Mempertimbangkan cara untuk memecahkan efek GLITCH
Dalam GUI Challenge hari ini, @AdamArgyleInk menciptakan efek cyber glitch dengan clip-path dan transformasi CSS.
Memikirkan cara untuk menyelesaikan FISIK DASAR
Dalam Tantangan GUI hari ini, @AdamArgyleInk senang membuat efek UI fisika dengan properti kustom CSS, meminta frame animasi, dan ...
Pikirkan cara untuk memecahkan STACK KARTU
Dalam GUI Challenge hari ini, @AdamArgyleInk membuat animasi stack kartu menggunakan transform origin, grid, dan :has().
Mempertimbangkan cara untuk menyelesaikan TRANSISI
Dalam Tantangan GUI yang berhantu hari ini, @AdamArgyleInk membuat kode langsung transisi jalur klip CSS, demo beberapa efek rad, dan mencakup kesalahan. M
Mempertimbangkan cara memecahkan TOOLTIPS
Dalam Tantangan GUI hari ini, @AdamArgyleInk membuat tooltip dengan elemen kustom (tanpa komponen web!), :has(), transformasi, dan proposisi logis...
Pikirkan cara untuk memecahkan CAFE WALL ILLUSION
Dalam Tantangan GUI hari ini, @AdamArgyleInk menciptakan kembali ilusi klasik dengan CSS.
Memikirkan cara untuk mengatasi CAROUSELS
Dalam GUI Challenge hari ini, @AdamArgyleInk membagikan fitur dan aspek komponen carousel: tema adaptif, adaptif untuk berbagai aplikasi...
Memikirkan cara untuk menyelesaikan FAB
Dalam GUI Challenge hari ini, @AdamArgyleInk membuat beberapa tombol tindakan mengambang (FAB) dan membahas pertimbangan UX dan CSS ...
Pikirkan cara untuk menyelesaikan TOMBOL
Dalam Tantangan GUI hari ini, @AdamArgyleInk menata gaya semua jenis tombol web yang berbeda dengan properti khusus dan :where(), untuk terang/gelap...
Memikirkan cara untuk memecahkan DIALOG
Dalam GUI Challenge hari ini, @AdamArgyleInk menunjukkan cara memperindah elemen dialog secara visual sambil mempertahankan kemudahan akses dan interaksi...
Pikirkan cara untuk mengatasi BARANG YANG MUAT
Dalam GUI Challenge hari ini, @AdamArgyleInk menunjukkan cara menata gaya elemen progres bawaan dan cara mengimplementasikan UX pembaca layar yang...
Mempertimbangkan cara memecahkan SVG FAVICON
Dalam GUI Challenge hari ini, @AdamArgyleInk berbagi pemikiran tentang cara membuat favicon adaptif dengan SVG. SVG tidak hanya memberikan sesuatu yang tak terbatas...
Mempertimbangkan cara untuk menyelesaikan PERALIHAN TEMA
Dalam GUI Challenge hari ini, @AdamArgyleInk berbagi pemikiran tentang cara membuat komponen tombol tema. Sering kali situs akan memungkinkan peralihan...
Memikirkan cara untuk menyelesaikan TOASTS
Dalam GUI Challenge hari ini, @AdamArgyleInk berbagi pemikiran tentang cara membuat toast, komponen non-interaktif dan pasif bagi UI untuk menyediakan...
Mempertimbangkan cara memecahkan MENU 3D
Dalam tantangan GUI hari ini, @AdamArgyleInk membagikan pemikirannya tentang cara membuat menu video game 3D yang beradaptasi dengan preferensi warna OS, ...
Memikirkan cara untuk menyelesaikan MULTI-SELECT
Dalam tantangan GUI hari ini, saya berbagi pemikiran saya tentang cara yang memungkinkan pengguna untuk melakukan multi-pilihan. Untuk mendemonstrasikan multi-pilihan, saya telah menyiapkan filter...
Pikirkan cara untuk mengatasi TOMBOL SPLIT
Dalam tantangan GUI hari ini, saya berbagi pemikiran saya tentang cara memecahkan tombol terpisah. Komponen pokok untuk antarmuka yang ringkas, memungkinkan si...
Mempertimbangkan cara untuk menyelesaikan SWITCH
Dalam tantangan GUI hari ini, saya berbagi pemikiran saya tentang cara menyelesaikan sebuah {i>switch
Memikirkan cara untuk menyelesaikan BREADCRUMBS
Dalam tantangan GUI hari ini, kami membangun komponen breadcrumb.. dengan sentuhan khusus! Sebagai pengganti daftar link linear, breadcrumb ini...
Mempertimbangkan cara memecahkan SCHEMES WARNA
Dalam tantangan GUI saat ini, kita membuat skema warna gelap, terang, dan redup dengan HSL. CSS berfungsi di seluruh browser modern, menetapkan untuk...
Mempertimbangkan cara untuk mengatasi PENCUPLIKAN MEDIA
Dalam tantangan GUI hari ini, @Adam Argyle berbagi pemikiran tentang cara menciptakan pengalaman scroll inline untuk web yang minimal, respons...
Memikirkan cara untuk memecahkan SPLIT TEXT
Dalam tantangan GUI hari ini, @AdamArgyleInk akan menanggapi komentar Anda selama 30 menit pertama setelah episode dirilis. Sambungkan...
Mempertimbangkan cara untuk menyelesaikan SETELAN
Dalam tantangan GUI hari ini, kita membuat dan mendemonstrasikan halaman setelan dinamis dengan penggeser dan kotak centang. Halaman setelan kami responsif, mendukung...
Memikirkan cara untuk menyelesaikan TABS
Dalam tantangan GUI hari ini, kami sedang membuat komponen tab dengan beberapa fitur yang sangat keren yang mungkin tidak terlintas di pikiran Anda. Tab kami mencakup...
Sapaan kiriman untuk SIDENAV
Kami meminta komunitas untuk membuat komponen sidenav dengan cara Anda dan Anda semua berhasil melakukannya! Lihat kiriman:
Memikirkan cara untuk memecahkan SIDENAV
Dalam tantangan GUI hari ini, kami membuat pengalaman pengguna navigasi samping yang responsif dan mudah diakses menggunakan CSS dan JS. Sidenav berfungsi...
Sapaan kiriman untuk CENTERING
Kami telah menguji 5 teknik pemusatan CSS yang berbeda dan menantang Anda untuk mengirimkan teknik Anda sendiri. Selamat kepada Chris Coyier dari CSS-Tricks ...
Sambutan untuk CERITA | Tantangan GUI
Anda melihat saya membuat cerita dengan cara saya dan saya menantang Anda semua untuk membuatnya sesuai keinginan. Selamat kepada @Geoffrich_ atas kirimannya di Twitter. Silakan...
Memikirkan cara untuk menyelesaikan CENTERING
Dalam tantangan hari ini, kita sedang menguji 5 teknik pemusatan CSS yang berbeda. Lihat teknik apa yang seharusnya mendapatkan tempat di alat Anda bel...
Mempertimbangkan cara memecahkan CERITA | Tantangan GUI
Selamat datang di Tantangan GUI, di mana saya membuat antarmuka dengan cara saya dan menantang Anda untuk melakukannya sesuai keinginan Anda. Dengan gabungan pikiran kreatif, kita akan...