[Ringkasan Muntah Darah] 20 alat praktikal bahagian hadapan, tambahkannya pada kegemaran anda!

Artikel ini akan berkongsi dengan anda lebih daripada 20 alat praktikal bahagian hadapan untuk membantu anda meningkatkan kecekapan pembangunan semasa membangunkan projek. Saya harap ia akan membantu semua orang.

1. Penjana reka letak CSS

Reka letak: https://layout.bradwoods.io/customize

Ia ialah penjana CSS dan JSX berciri penuh, digunakan untuk menjana pelbagai jenis reka letak menggunakan sintaks reka letak Grid CSS, mengubah suai sifat Grid secara sewenang-wenangnya, memaparkan skrin dalam masa nyata dan menjana yang sepadan kod. Sudah tentu terdapat susun atur Flex (tetapi ia masih belum sempurna). [Pembelajaran yang disyorkan: tutorial video css]

2. Riju

Riju: https ://riju.codes/

Riju ialah platform menjalankan kod dalam talian yang mewarisi 224 bahasa Ia sangat mudah dan bebas iklan

3. Whirl

Whirl: https://whirl.netlify.app/

Whirl ialah animasi CSS perpustakaan, dan Perpustakaan animasi lain adalah berbeza. Ia mempunyai koleksi 108 animasi yang dimuatkan. Semua kod sumber juga tersedia.

4 Pikaday

Pikaday: https://pikaday.com/

Pikaday ialah pemilih tarikh tanpa kebergantungan, ringan (5k), modulariti CSS, dan gaya yang sangat mudah, saya sangat menyukainya, ia telah memperoleh 7k Bintang di Github

.

5. Komponen Tailwind

Komponen Tailwind: https://tailwindcomponents.com/

Komponen Tailwind ialah kit UI Tailwind. Tail- Kit: https://www.tailwind-kit.com/

Tail-Kit ialah perpustakaan komponen UI Tailwind pertama yang hebat, ia mempunyai lebih daripada 250 komponen sumber Terbuka, serasi dengan React, Vue dan Bersudut

7. tidy.js

tidy.js: https ://pbeshai.github.io/ tidy/

tidy.js ialah perpustakaan JavaScript untuk memproses data Ia termasuk lebih daripada 70 fungsi kategori yang berbeza (isih, kumpulan, matematik, Isih, dll.)

<.>

8 party.js

party.js: https://party.js .org/

party.js agak menarik Anda sepatutnya melihat banyak laman web blog Terdapat banyak animasi yang menarik apabila anda mengklik atau menyeret tetikus Anda boleh mencapai kesan tersebut dengan mudah

9. Pengalihan keluar latar belakang AI

garis dasar: https://baseline is/tools/background-remover/

baseline ialah tapak web alat percuma yang menggunakan AI untuk mengalih keluar latar belakang imej. Ia menyokong JPEG dan PNG, dan akhirnya akan mengembalikan imej PNG dengan latar belakang telus kepada anda

10. Corak reka letak

Corak reka letak: https://web.dev/patterns/layout/

Corak reka letak ialah bahagian baharu dalam sumber pembangun Google Developers. Ia menyenaraikan penggunaan CSS untuk membina UI reka letak kini menyenaraikan 11 jenis reka letak~ Susulan harus terus meningkat dan meneroka lebih banyak kemungkinan >

11 Lowdefy

Lowdefy: https://lowdefy.com/

Lowdefy ialah sebuah rangka kerja kod rendah sumber terbuka yang menggunakan YAML untuk membina aplikasi web, panel pengurusan, papan pemuka BI, aliran kerja dan aplikasi CRUD dengan mudah

12 tidak dipotong

tidak dipotong: https://uncut.wtf/

tidak dipotong ialah laman web katalog fon moden yang memfokuskan kepada sumber terbuka dan percuma untuk kegunaan peribadi dan komersial Ia mempunyai sejumlah 90 fon untuk anda pilih~

Tiga belas, fetoolkit

fetoolkit: https://www.fetoolkit.io/

fetoolkit ialah kotak alat pembangunan bahagian hadapan yang mengandungi 20 Pelbagai pengekodan dan alatan berkaitan imej, termasuk CSS, JSON, ikon, SVG, pemampatan imej, npm, regex dan alatan lain

14 >

Unicode Arrows: https://unicodearrows.com/

Unicode Arrows ialah koleksi kod heksadesimal yang berkaitan dengan pelbagai anak panah

15 komponen AI

komponen AI: https://components.ai/

komponen AI ialah sebuah. pembina tema, termasuk penjana penonjolan sintaks, kecerunan, alat bayang, penjana corak SVG, latar belakang animasi, dsb., semuanya boleh dinyahpepijat dalam talian dan sangat mudah digunakan

16. Glitter

Glitter: https://wh0.github.io/glitter/

Glitter ialah penjana fon pendarfluor projek tidak rumit, tetapi ia kelihatan bagus. Kami boleh mengubah suai teks sesuka hati dan akhirnya mengeksport SVG

Seventeen, Iconduck

Iconduck: https://iconduck.com/

Iconduck ialah tapak web ikon sumber terbuka dengan lebih daripada 100,000 ikon yang boleh dicari dengan kata kunci, dan semuanya Boleh digunakan dalam projek komersial

18. penjana corak

penjana corak: https:// doodad.dev/pattern-generator /

penjana corak ialah tapak web yang membantu anda menjana imej latar belakang Terdapat berpuluh-puluh corak untuk dipilih, dan elemen dalam setiap corak boleh berinteraksi melalui butang interaktif sesuka hati. dan akhirnya anda boleh mengeksport kod latar belakang JPEG, PNG, SVG, CSS dan juga menyokong memulihkan kandungan operasi terakhir selepas keluar

19. penjana butang

buttons-generator: https://markodenic.com/tools/buttons-generator/

buttons-generator ialah alat yang mengandungi banyak bentuk interaktif Terdapat kira-kira **120** jenis tapak web dengan gaya butang Bagi rakan yang memerlukan butang tersuai, anda boleh merujuknya

Twenty, Coding Fonts<.>

Fon Pengekodan: https://coding-fonts.css-tricks.com/fonts/hack/?language=html&theme=dark

Fon Pengekodan ialah laman web yang mengumpul 45 fon kod, kebanyakannya adalah percuma, anda boleh memilih yang anda suka dan meletakkannya dalam editor anda sendiri (bisik, saya masih suka

. . Dan cantik)

JetBrains Mono

21 svgrepo

svgrepo: https://www.svgrepo.com/ <.>

svgrepo ialah perpustakaan ikon SVG dengan 300,000 ikon SVG percuma, kebanyakannya juga tersedia secara komersial. Laman web menyokong carian dan boleh dikumpulkan tanpa log masuk (boleh disimpan dalam storan setempat)~

Dua puluh dua, maplibre

maplibre: https://maplibre.org/

maplibre ialah perpustakaan peta dunia JavaScript yang berfungsi di luar kotak dan turut menyokong SDK IOS dan Android

Dua puluh tiga, Dopefolio

Dopefolio: https://github.com/rammcodes/Dopefolio

Dopefolio ialah penjana halaman tapak web rasmi yang luar biasa yang tidak bergantung pada sekumpulan perpustakaan sumber terbuka pihak ketiga Ini semua adalah HTML dan CSS tulen, jadi SEO sangat bagus, markah Lighthouse juga sangat tinggi, dan ia menyokong Mod responsif halaman. Rakan-rakan yang memerlukan halaman laman web rasmi boleh cuba menggunakan

Twenty-four, animista

animista: https: //animista.net/

Set animasi CSS, anda boleh melaraskan parameter animasi secara bebas, menjana coretan kod, mudah digunakan

25. Inspirasi CSS

Inspirasi CSS -- Inspirasi CSS

https://csscoco.com/inspiration/

Setiap kali bos nak susun macam-macam gaya mewah untuk anda, di sini anda boleh jadikan ia sebagai rujukan

end

(Perkongsian video pembelajaran: bahagian hadapan web )

Atas ialah kandungan terperinci [Ringkasan Muntah Darah] 20 alat praktikal bahagian hadapan, tambahkannya pada kegemaran anda!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!