Daftar alat online gratis untuk pengembangan web front-end (2020)
Daftar alat dan sumber daya online gratis dalam bentuk aplikasi web atau layanan web untuk pengembangan front-end. Setiap alat berisi deskripsi singkat dan pratinjau sebagai tangkapan layar halaman web.
- Tipografi
- Warna, palet & pola
- Generator warna
- Editor Pola
- Generator gradien
- Palet warna
- Gelana warna
- Gambar, ilustrasi, video
- Konverter gambar dan editor
- CSS
- Generator Gradien CSS
- Editor Animasi CSS
- Generator Segitiga CSS
- SVG
- Regex
- Yang lain
Tipografi
- loremipsum.io - cara sederhana dan lebih baik untuk mengambil konten teks lorem ipsum
- gridlover.net/try - Tetapkan sistem tipografi dengan skala modular dan ritme vertikal
- Pearsonified.com/Typography - Kalkulator Tipografi Rasio Emas
- pxtoem.com - PX ke Konversi EM
- canva.com/font-combinations - Menemukan kombinasi font
- fontpair.co - Koleksi pasangan google fonts
- Transfonter.org - Konverter Font Online
Koleksi Font
- fontStruct.com/gallery - kumpulan font (membutuhkan pendaftaran)
- fonts.google.com - Google Fonts
- fonts2u.com - Koleksi font gratis
- github.com/lvwzhen/iconpark - Koleksi font ikon
Warna, palet & pola
- color-hex.com - memberikan informasi tentang warna
- colorhunt.co - Koleksi palet warna
- colourlovers.com - Koleksi palet, pola, bentuk dan warna
- colrd.com - Koleksi palet, pola, gradien dan warna
- heropatterns.com - Koleksi pola latar belakang SVG yang dapat diulang
- toptal.com/designers/subtatterns - kumpulan pola
- PatternCooler.com - Koleksi Latar Belakang Pola
Generator warna
- color.hailpixel.com - generator warna datar
- colourco.de - generator warna
- Paletton.com - Desainer Skema Warna
- galactic.ink/sphere - generator spektrum warna
- colorsupplyyy.com/app - menghasilkan berbagai campuran warna
Editor Pola
- Patterninja.com - Editor Pola
- Halftonepro.com/app - Editor Pola
- qrohlf.com/trianglify-generator - generator pola segitiga
- Kennethcachia.com/plain-pattern - SVG Pattern Editor
Generator gradien
- Uigradients.com - Koleksi Gradien
- colinkeany.com/blend - Generator Gradien Latar Belakang
Palet warna
- flatuicolors.com - Koleksi palet warna
- colordrop.io - Koleksi palet warna
- color.adobe.com/explore - Koleksi palet warna
- flatuicolorpicker.com/category/all - koleksi warna datar
Gelana warna
- lokeshdhakar.com/projects/color-thief - ambil palet warna dari gambar
- www.colorhunter.com - ambil warna dari gambar
- Image -color.com - Grabber warna lain dari gambar
- WebColourData.com - ambil warna dari situs web
Gambar, ilustrasi, video
- pixabay.com - Koleksi gambar gratis
- pexels.com - kumpulan gambar gratis
- unsplash.com - Koleksi gambar gratis
- Free-images.com - Koleksi gambar gratis
- Gratisography.com - Koleksi gambar gratis
- Freephotos.cc - Koleksi gambar gratis
- Kisspng.com - Koleksi gambar PNG transparan
- vecteezy.com - Koleksi seni vektor gratis
- undraw.co/illustrations - Koleksi ilustrasi secara gratis
- iconfinder.com - Ikon Finder
- coverr.co - video sampul gratis
- Mazwai.com - Video sinematik gratis di bawah CC dengan lisensi 3.0
Konverter gambar dan editor
- jpeg.io - Mengubah format gambar utama menjadi jpeg yang sangat dioptimalkan
- tinypng.com - alat kompresi lain yang memungkinkan compressing .png dan .jpg gambar (memungkinkan gambar hingga ukuran 5MB)
- websiteplanet.com/webtools/imagecompressor - .png atau .jpg kompresi menjadi .png yang dioptimalkan (memungkinkan gambar hingga ukuran 50MB)
- BSE64.com - Encode gambar Anda ke Base64
- lorempixel.com - generator gambar placeholder
- xiconeditor.com - Editor Ikon Online
- favicon-generator.org - generator favicon
- Toptal.com/developers/css/sprite-generator - CSS Sprite Generator
- webresizer.com/Resizer - editor gambar
- picsvg.com - Konversi jpeg, jpg, gif, gambar png ke svg
CSS
- westciv.com/tools/3dtransforms - editor gradien/transformasi
- CSS3Maker.com - Editor dan Generator CSS - Radius Perbatasan, Gradien, Transformasi, Animasi, Transisi, Bayangan Teks, Bayangan Kotak, Rotasi Teks
- cssmatic.com - generator CSS - gradien, pola latar belakang, bayangan kotak, jari -jari perbatasan
- cssmatic.com/box-shadow - CSS Drop Shadows Generator
- pengembang.mozilla.org/en-us/docs/web/css/css_background_and_borders/border-image_generator-generator gambar perbatasan css
- CSSFILTERS.CO - Editor Filter CSS
Generator Gradien CSS
- colorzilla.com/gradient-editor - generator gradien CSS
- CSS -Gradient - Generator Gradien CSS
- gradientgenerator.com - CSS Gradient Generator dengan pola
- Angrytools.com/Gradient - Generator Gradien CSS
Editor Animasi CSS
- TheAppGuruz.com/tag-tools/web/cssanimations - Koleksi Animasi CSS
- Anicollection.github.io - Koleksi Animasi CSS
- cssanimate.com - CSS Animation Generator
- Angrytools.com/css/animation - CSS Animation Generator
- Animista.net - CSS Animation Generator
- jeremyckahn.github.io/stylie - generator animasi CSS
- waitanimate.wstone.io - Hitung persentase frame kunci sehingga Anda dapat memasukkan penundaan antara setiap iterasi animasi
Generator Segitiga CSS
- cssarrowplease.com - menghasilkan kotak khusus dengan panah yang memanjang keluar dari samping
- apps.eky.hk/css-triangle-generator-CSS Triangle Generator
SVG
- useragentman.com/tests/textpath/bezier-curve-construction-set-generator kurva bézier
- cssplant.com/clip-path-generator-generator jalur klip
- bennettfeely.com/clippy - generator jalur klip
- jxnblk.com/paths - Path Generator
- kazzkiq.github.io/svg-color-filter-editor filter warna svg
- yoksel.github.io/svg-filters - editor efek filter svg
- gigacore.github.io/demos/svg-stroke-dasharray-generator-generator garis dash
- editor.method.ac - editor SVG
Regex
- Regexr.com - Membangun dan Menguji Ekspresi Reguler
- Regex101.com - Membangun dan Menguji Ekspresi Reguler
Yang lain
- developers.google.com/speed/pagespeed/insights - memberikan informasi tentang seberapa baik suatu halaman mematuhi serangkaian praktik terbaik
- Easing.net - Koleksi fungsi pelonggaran
