cari
Rumahhujung hadapan webtutorial cssAlat Reka Bentuk &#non-AI' untuk Mencipta Halaman Pendaratan Penyayang Manusia

Sekitar seminggu yang lalu saya terpaksa membina halaman pendaratan untuk kursus kriptografi percuma saya untuk pembangun web. Semasa saya mula membinanya, saya mengumpul beberapa alatan di sepanjang jalan.

Alat ini sangat membantu saya menjadikan halaman pendaratan jauh lebih cantik daripada yang boleh saya bina.

Alat ini membuatkan saya terfikir -- kenapa saya tidak tahu mengenainya lebih awal!

Sekadar menjelaskan: Saya sama sekali tidak berkaitan secara komersial dengan mana-mana alatan ini. Saya hanya mencintai mereka dan saya tahu anda juga akan. Itulah sebabnya saya berkongsi dengan anda semua.

Semua alatan yang disebut dalam senarai ini adalah percuma sepenuhnya tanpa iklan dan tiada tembok berbayar. Mereka sebenarnya adalah emas percuma, saya akan katakan.


1. Repo SVG

Tapak web ini mempunyai banyak koleksi grafik dan ikon vektor SVG. Saya menyukai reka bentuk bebas iklan dan ringkas mereka. Tiada tembok berbayar. Semua grafik SVG adalah percuma. Anda boleh menggunakan SVG ini sebagai ikon atau dalam beberapa grafik lain.

ree

Tapak web ini mempunyai editor SVG juga. Saya mendapati ia sangat membantu dalam menukar warna SVG agar sepadan dengan palet warna halaman pendaratan saya.

➡️ Lihat: Repo SVG


2. Excalidraw

Ia adalah alat lukisan yang sangat popular. Detik kilat bagi saya ialah apabila saya menemui perpustakaan Excalidraw. Perpustakaan excalidraw mengandungi grafik pra-dibuat oleh komuniti. Ini membantu dalam mencipta grafik dan gambar rajah yang kelihatan menarik dengan cepat.

Sebagai contoh, saya menggunakan beberapa grafik pra-dibuat daripada perpustakaan excalidraw untuk mencipta grafik di bawah untuk halaman pendaratan kursus saya. Dan saya hanya mengambil masa sekitar 10 minit untuk melakukan semuanya. Tanpa perpustakaan excalidraw, ia akan mengambil banyak masa untuk melaksanakannya.

ree

➡️ Semaknya: Excalidraw


3. Haikei

Ini adalah alat yang direka dengan baik. Ia membolehkan anda membuat reka bentuk SVG. Anda boleh menggunakan reka bentuk ini sebagai latar belakang di bahagian halaman pendaratan anda atau di dalam produk anda juga.

ree

Saya menggunakan alat ini untuk mencipta latar belakang bagi bahagian kerja lalu halaman pendaratan saya:

ree

➡️ Semak: Haikei


4. unDraw Kraftangan

ree

Alat ini mempunyai banyak grafik SVG yang dilukis tangan yang boleh digunakan untuk menyerlahkan bahagian tajuk dalam halaman pendaratan anda. Grafik lukisan tangan ini sangat menggembirakan sehingga anda akan mendapati penggunaannya dalam pelbagai situasi.

Saya memuat turun roket lukisan tangan dari tapak ini dan meletakkannya pada bahagian tentang halaman pendaratan saya:

ree

➡️ Lihat: unDraw Handcrafts


5. Corak Wira

Saya selalu tertanya-tanya dari mana datangnya latar belakang corak SVG tersebut. Apabila saya menemui Corak Hero, kawan, saya terpegun.

Corak wira mempunyai banyak corak latar belakang SVG. Tapak web membolehkan anda memilih warna yang betul dan kemudian anda hanya perlu menyalin dan menampal coretan CSS.

Saya menggunakan alat ini untuk mencipta latar belakang jenis kertas graf untuk bahagian kurikulum halaman pendaratan kursus saya:

ree

➡️ Semak: Corak Wira


Tiga alatan terakhir yang saya temui daripada Dokumentasi ShipFast Marc Lou. Dia seorang pembina produk yang memberi inspirasi!

Anda harus mengikuti saya di Twitter. Saya cuba meletakkan barang berguna di sana. Dan saya akan menghormati masa anda.

Terima kasih kerana membaca!

-vkweb

Atas ialah kandungan terperinci Alat Reka Bentuk &#non-AI' untuk Mencipta Halaman Pendaratan Penyayang Manusia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Mekanik Orbital (atau bagaimana saya mengoptimumkan animasi kerangka utama CSS)Mekanik Orbital (atau bagaimana saya mengoptimumkan animasi kerangka utama CSS)May 09, 2025 am 09:57 AM

Apa yang kelihatan seperti refactor kod anda sendiri? John Rhea memisahkan animasi CSS lama yang dia tulis dan berjalan melalui proses pemikiran mengoptimumkannya.

Animasi CSS: Adakah sukar untuk mencipta mereka?Animasi CSS: Adakah sukar untuk mencipta mereka?May 09, 2025 am 12:03 AM

Csanimationsarenotinherenthardbutrequirepracticeandundunderpanderofcsspropertiesandtimingfunctions.1) startwithsimpleanimationslikescalingabuttonhoverusingkeyframes.2)

@KeyFrames CSS: Trik yang paling banyak digunakan@KeyFrames CSS: Trik yang paling banyak digunakanMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityAndPowerIncreatingSmoothcsSanimations.KeyTrickSinclude: 1) definisiMoothTransitionSbetweenStates, 2) AnimatingMultiplePropertiSti

Kaunter CSS: Panduan Komprehensif untuk Penomboran AutomatikKaunter CSS: Panduan Komprehensif untuk Penomboran AutomatikMay 07, 2025 pm 03:45 PM

Csscountersareusedtomanageautomaticnumberinginwebdesigns.1) mereka yang boleh dimanfaatkan, listitems, andcustomnumbering.2) AdvancedusesIndenestedNumberingsystems.3) cabaran yang terkandung di dalam cabaran

Bayang-bayang tatal moden menggunakan animasi yang didorong oleh tatalBayang-bayang tatal moden menggunakan animasi yang didorong oleh tatalMay 07, 2025 am 10:34 AM

Menggunakan bayang -bayang skrol, terutamanya untuk peranti mudah alih, adalah sedikit UX yang telah diliputi oleh Chris sebelum ini. Geoff merangkumi pendekatan yang lebih baru yang menggunakan harta animasi-masa. Berikut adalah satu lagi cara.

Mengkaji semula peta imejMengkaji semula peta imejMay 07, 2025 am 09:40 AM

Mari kita lari melalui penyegaran cepat. Peta imej tarikh kembali ke HTML 3.2, di mana, pertama, peta sisi pelayan dan kemudian peta sisi klien yang ditakrifkan di atas imej menggunakan elemen peta dan kawasan.

Negeri Devs: Tinjauan untuk Setiap PemajuNegeri Devs: Tinjauan untuk Setiap PemajuMay 07, 2025 am 09:30 AM

Kajian Negeri Devs kini dibuka untuk penyertaan, dan tidak seperti tinjauan sebelumnya ia meliputi segala -galanya kecuali kod: kerjaya, tempat kerja, tetapi juga kesihatan, hobi, dan banyak lagi. 

Apakah grid CSS?Apakah grid CSS?Apr 30, 2025 pm 03:21 PM

CSS Grid adalah alat yang berkuasa untuk mewujudkan susun atur web yang rumit dan responsif. Ia memudahkan reka bentuk, meningkatkan kebolehcapaian, dan menawarkan lebih banyak kawalan daripada kaedah yang lebih lama.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.