Generator CSS

Minggu lalu, kita melihat alat CSS Auditing , dan minggu ini kita akan melihat generator yang berguna untuk semua CSS: dari gradien ke drop-shadow dan kurva bezier ke segitiga dan skala jenis. Hanya beberapa alat yang berguna untuk sabuk alat Anda, agar tetap dekat.

Generator Bayangan CSS

Mencari alat yang secara otomatis akan menghasilkan kode CSS untuk bayangan kotak berlapis yang benar-benar mulus? Nah, Anda akan menyukai SmoothShadow . Terinspirasi oleh artikel yang ditulis oleh Tobias Ahlin Bjerrome , alat canggih ini dibuat untuk membantu siapa pun membuat kode yang mereka butuhkan saat itu juga.

Setelah Anda mencobanya, akan sulit untuk tidak menggunakannya. Alat kecil ini memungkinkan Anda mendesain bayangan kotak halus berlapis secara visual, tetapi juga mengubah alfa, mengimbangi, dan mengaburkan dengan kurva easing individual. Dan itu menjadi lebih baik: Pencipta alat, Philipp Brumm , juga telah merilis SmoothShadow sebagai plugin Figma , sehingga Anda dapat mengoptimalkan alur kerja Anda seperti yang selalu Anda inginkan.

Generator Border-Radius CSS

Ketika kita memikirkan tentang border-radius , kita biasanya memikirkan beberapa nilai langsung – mungkin 8px atau 11px, atau mungkin 16px. Namun, border-radius bisa sangat mewah , dan generator radius perbatasan mewah memungkinkan Anda membuatnya dengan mudah. Alat ini memberikan visualisasi tidak hanya bentuk bulat polos, tetapi juga bentuk organik, dengan menggunakan delapan nilai yang digabungkan. Pada dasarnya, apa yang kita buat adalah elips yang tumpang tindih yang membangun bentuk akhir. Alat tersebut juga tersedia sebagai alat CLI , sehingga Anda juga dapat menjalankannya secara lokal.

Generator Kurva Kubik-Bezier

Terkadang animasi terasa tidak benar, bukan? Mungkin durasinya tidak aktif, atau pelonggarannya unik, dan untuk mengetahuinya mungkin membutuhkan waktu yang cukup lama. Dengan kubik-bezier Lea Verou, Anda dapat melihat dan membandingkan animasi , memperlambatnya, dan bahkan menyesuaikannya secara visual. Dan kemudian salin-tempel potongan CSS untuk dicolokkan ke proyek Anda segera.

Dan jika Anda memerlukan animasi CSS @keyframe dasar atau kompleks, Keyframes.app menyediakan editor garis waktu visual yang mirip dengan perangkat lunak pengeditan video. Anda dapat menambahkan langkah-langkah, mengubah ukuran dan posisi, menerapkan transformasi dan perubahan warna, serta mendapatkan CSS untuk disalin-tempel juga. Ah dan jangan lupa panel Animasi di Chrome danFirefox untuk debugging juga.

Mempermudah Gradien

Dengan gradien, kami sering mengandalkan gradien linier, bertransisi dari satu warna ke warna lain. Namun, gradien linier memiliki tepi yang keras di tempat awal atau akhir. Ada cara untuk membuat gradien sedikit lebih baik, dengan fungsi easing. Jadi Andreas Larsen telah membuat editor kecil, Easing Gradients Editor , yang memungkinkan kita membuat dan melihat pratinjau gradien pelonggaran di CSS. Alat ini juga tersedia sebagai plugin Sketch dan plugin PostCSS . Anda dapat menggunakan pemilih warna, tetapi sayangnya belum dapat menambahkan nilai warna HEX yang sebenarnya.

Palet Warna Visualisasi Data

Terkadang Anda membutuhkan jenis warna yang sangat spesifik untuk tugas yang sangat spesifik. Misalnya, jika Anda mengerjakan proyek visualisasi data – misalnya diagram lingkaran, diagram batang yang dikelompokkan, peta – Anda mungkin memerlukan serangkaian warna dengan jarak visual yang sama . Saat itulah LearnUI Data Color Picker menjadi sangat berguna. Dalam kasus seperti itu, lebih baik menggunakan berbagai corak, sehingga pengguna dapat mengidentifikasi perbedaan dengan lebih cepat. Memang lebih mudah membedakan kuning dari oranye daripada biru dari biru-tapi-15% -lebih terang .

Dengan alat ini, Anda memilih berapa banyak warna yang Anda butuhkan dan apakah Anda memerlukan warna latar belakang terang atau gelap, dan memilih apakah Anda menginginkan palet default, palet corak tunggal, atau skala warna divergen. Setelah Anda memilikinya, Anda dapat menyalin nilai hex dan mengekspornya sebagai SVG untuk digunakan di Sketch, Figma atau Adobe XD.

LearnUI juga menyediakan generator warna yang dapat diakses dan generator gradien yang cukup mewah, dengan berbagai jenis gradien, interpolasi, sudut, easing, dan seberapa halus gradien yang Anda inginkan.

Dari Nuansa Warna CSS Ke Segitiga dan Data Palsu

Bayangkan Anda hanya perlu menemukan gaya segitiga CSS untuk elemen dan elemen semu. Atau mungkin sedikit memperhalus palet warna dengan menjelajahi tints dan shade dari warna tertentu. Atau mungkin menghasilkan gradien CSS linier dan radial untuk bagian halaman. Tidak perlu melakukan semuanya secara manual atau mencoba menemukan cuplikan CSS tersebut di seluruh web. Anda selalu dapat menemukannya di Omatsuri .

Omatsuri berarti festival dalam bahasa Jepang, dan situs tersebut adalah festival kecil yang menyenangkan dari alat browser sumber terbuka untuk penggunaan sehari-hari. Di situs ini, Anda akan menemukan generator segitiga, generator corak warna, generator gradien, pembagi halaman, kompresor SVG, konverter SVG → JSX , generator data palsu, kursor CSS, dan kode peristiwa keyboard. Dirancang dan dibangun oleh Vitaly Rtishchev dan Vlad Shilov. Kode sumber situs juga tersedia.

Overlay CSS Dengan Generator Kontras Tinggi

Jika Anda ingin membuat teks lebih menonjol dibandingkan gambar latar belakang, ada sedikit trik: Anda dapat menggunakan linear-gradient CSS dengan opasitas tertentu di atas gambar untuk meningkatkan kontras warna. Spotify , misalnya, menggunakan teknik tersebut.

Meskipun semua ini hanya memerlukan satu baris kode, masih ada satu pertanyaan tersisa yang harus dijawab: Bagaimana cara menentukan opasitas yang akan digunakan untuk hamparan? Optimal Overlay Finder membantu Anda mengetahuinya. Anda mengupload gambar, memasukkan teks Anda dan memilih warna overlay dan teks, dan alat tersebut menunjukkan pratinjau tampilan overlay saat diterapkan ke gambar Anda, serta opasitas overlay yang optimal. Detail kecil yang sangat bermanfaat.

Generator Palet Warna CSS

Ada banyak alat fantastis untuk menghasilkan palet warna Anda, tetapi Coolors.co adalah alat kecil bagus yang cukup untuk menghasilkan palet dan menjelajahi berbagai corak warna. Anda dapat membuat palet dari foto atau kolase foto, menguji kebutaan warna, dan menyesuaikan corak, saturasi, kecerahan, dan suhu dengan cepat. Jelas, ini juga menampilkan palet warna yang sedang tren .

Anda juga dapat menghasilkan palet gradien antara dua warna dan membuat serta mengekspor gradien Anda sendiri sebagai CSS. Alat ini tersedia sebagai aplikasi iOS, add-on Adobe, dan ekstensi Chrome.

Dan jika Anda membutuhkan sesuatu yang sedikit lebih canggih untuk gradien di kotak peralatan Anda, CSSGradient.io adalah alat lain untuk semua kebutuhan gradien Anda – baik itu gradien garis atau radial, corak warna atau latar belakang gradien.

Selain itu, Gradient Generator menghasilkan 1 hingga 40 stepped gradient dari dua warna pilihan Anda. Setiap gradien secara otomatis disajikan dalam format HEX, HSL, dan RGB – yang perlu Anda lakukan hanyalah mengklik nilainya, dan itu akan segera disalin ke clipboard Anda.

Generator Gradien Warna CSS

Warna yang dipilih sendiri untuk membuat gradien warna membutuhkan pengalaman desain dan pemahaman yang baik tentang harmoni warna. Jika Anda memerlukan gradien untuk latar belakang atau untuk elemen UI tetapi tidak merasa cukup percaya diri untuk menangani tugas itu sendiri (atau jika Anda sedang terburu-buru), generator gradien warna yang dibuat oleh orang-orang di My Brand New Logo telah mendukungmu.

Didukung oleh algoritma gradien warna, generator membuat gradien yang seimbang berdasarkan warna yang Anda pilih. Ada empat gaya gradien berbeda yang berubah dari efek halus ke mutiara dan gradien warna dalam yang intens. Anda dapat menyesuaikan gradien dengan slider dan, setelah Anda puas dengan hasilnya, salin-tempel kode CSS yang dihasilkan untuk digunakan dalam proyek Anda.

Generator Skala Jenis CSS

Jadi bagaimana jika Anda ingin membuat sistem tipografi andal yang berfungsi dengan baik di seluler dan desktop? Biasanya Anda akan mengandalkan skala tipografi yang mapan, yang menyediakan hierarki tipografi untuk segala hal mulai dari paragraf hingga keterangan dan tajuk. Type-Scale oleh Jeremy Church adalah alat kecil yang fantastis yang membantu Anda membangun skala tipografi dan mengekspornya dalam CSS. Skala kecil biasanya cocok untuk tampilan seluler, skala sedang dapat berfungsi dengan baik untuk tampilan desktop, dan skala besar dapat berfungsi dengan baik untuk situs pemasaran.

Alat ini menyediakan 8 skala tipe harmonis yang telah ditentukan sebelumnya (tetapi Anda juga dapat menentukan skala khusus), dari Major Third hingga Perfect Fifth dan menghasilkan urutan ukuran font dengan rasio penambahan geometris tertentu. Anda dapat menyesuaikan pengaturan seperti line-height dan berat badan, memperbaiki teks pratinjau dan mendapatkan CSS yang dihasilkan – atau mengeditnya dengan jenis spesimen di CodePen. Atau, Anda juga dapat memeriksa ModularScale.com yang bagus dari Tim Brown.

Alat bagus lainnya adalah Kalkulator Skala Tipografi oleh Jean-Lou Desire yang, tidak seperti alat Tim dan Jeremy, menghasilkan skala modular menggunakan tiga properti penentu (istilah awal, rasio kenaikan, dan jumlah ukuran dalam skala) mirip dengan tangga nada. Hasilnya adalah ukuran yang lebih mulus untuk desainer, dengan beberapa opsi lagi untuk membuat lebih banyak nilai dari – misalnya untuk catatan samping yang lebih kecil atau blockquote besar.

Generator Terbalik CSS

Untuk meminimalkan disorientasi dan perubahan tata letak yang mahal selama pemuatan, kita perlu mencocokkan font fallback dengan font web. Pencocokan font-style-style dari Monica Dinculescu memungkinkan kita meminimalkan pergeseran yang menggelegar dengan mencocokkan font fallback dan x-heights serta lebar font web yang dimaksud dan kita dapat menggunakan f-mod untuk melakukan hal yang sama dengan properti CSS baru.

Secara default, banyak font dilengkapi dengan margin dan lead yang telah ditentukan sebelumnya, jadi jika font fallback dan font web berbeda, seluruh tata letak akan berubah secara signifikan. Capsize menyesuaikan ukuran font, sehingga tinggi huruf kapital adalah kelipatan dari grid Anda. Ini dilakukan dengan memotong spasi di atas huruf kapital dan di bawah garis dasar. Jadi dengan menjaga tinggi baris yang sama dalam font fallback dan font web, alat tersebut menghasilkan "angka ajaib" untuk memastikan bahwa peralihannya mulus.

Generator Pemilih Kompleks CSS

Bayangkan Anda perlu membuat tabel item. Anda mungkin ingin menyimpannya di baris yang sama jika ada 3 item atau kurang, tetapi kemudian mencakup dua baris penuh untuk 6 dan 8 item, sementara hanya daftar kartu dengan 10 item atau lebih. Bagaimana Anda membangunnya? Meskipun banyak dari situasi ini dapat diperbaiki dengan CSS Grid dan Flexbox, terkadang Anda mungkin berakhir dengan situasi yang cukup kompleks yang membutuhkan pemilih CSS yang cukup kompleks.

Untuk tujuan ini, Drew Minns telah membuat generator untuk Quantity Selectors – pemilih CSS kompleks yang memungkinkan gaya diterapkan ke elemen berdasarkan jumlah saudara kandung. Misalnya, saat Anda ingin menerapkan gaya ke semua elemen saat ada setidaknya 5 item dan saudara, atau paling banyak 10, atau mungkin antara 3 hingga 5 item.

Pemilih terakhir mungkin tidak mudah dipahami, jadi perlu dipastikan bahwa Anda memberikan penjelasan yang tepat dalam kode tentang apa yang seharusnya ditargetkan.

Generator clip-path CSS

Berkat clip-path , kita dapat membuat bentuk kompleks di CSS dengan memotong elemen ke bentuk dasar, baik itu lingkaran sederhana, poligon mewah, atau bahkan sumber SVG. Pembuat clip-path CSS Clippy adalah alat visual yang membantu Anda membuat dan menyesuaikan jalur klip langsung di browser Anda.

Untuk memulai, Anda memilih bentuk dan latar belakang demo dari menu Clippy. Anda kemudian dapat menyeret titik bentuk untuk membuat bentuk apa pun yang Anda suka – kode warna CSS tidak hanya akan mencerminkan perubahan Anda secara instan tetapi juga menyorotnya untuk membantu Anda memahami bagaimana pilihan Anda memengaruhi kode.

Jika keseluruhan clip-path masih terasa agak abstrak bagi Anda atau jika Anda mencari contoh keren tentang cara menggunakannya dalam proyek aktual, pastikan untuk memeriksa efek munculan yang dibuat Mikael Ainalem dengan clip-path .

Pembuat Tata Letak Kisi CSS

CSS Grid Layout bisa sangat mudah , tetapi terkadang Anda mungkin ingin bermain-main dengan properti Grid untuk mencari tahu perilaku yang tepat untuk layout Anda. Untuk memulai, kita dapat menggunakan CSS Grid Generator Sarah Drasner, Drew Minns ' Griddy , CSS Grid Cheat Sheet Generator milik Ali Alaa dan LayoutIt LenioLabs – semuanya memungkinkan Anda untuk menentukan grid dan container di grid, serta gap, dan itu menghasilkan CSS segera. Jika Anda membutuhkan lebih banyak panduan tentang Flexbox, Pola Flexbox berisi banyak contoh untuk dimainkan.

Atau Anda bisa menggunakan satu baris solusi CSS. Una Kravets telah membangun Tata Letak 1-Baris , kumpulan sepuluh tata letak CSS modern dan teknik ukuran. Dimulai dengan misteri terbesar dari semua (keterpusatan) dan mencakup semuanya mulai dari Tata Letak Holy Grail klasik dan "Deconstructed Pancake" hingga menerapkan clamp() dan menghormati rasio aspek, koleksi Una penuh dengan informasi kecil yang terikat untuk membuat hidup Anda sebagai pengembang lebih mudah.

Setiap teknik dilengkapi dengan demo, CodePen untuk dimainkan, dan informasi tentang dukungan browser. Una juga merekam video yang menjelaskan setiap baris keajaiban dengan lebih detail. Tidak masalah jika Anda seorang pemula atau profesional, sumber ini pasti akan berguna.

Generator Grid Gabungan CSS

Kisi majemuk menawarkan fleksibilitas luar biasa dan banyak ruang untuk kreativitas. Terdiri dari dua atau lebih kisi jenis apa pun (kolom, modular, simetris, dan asimetris) pada satu halaman, mereka dapat menempati area terpisah atau tumpang tindih.

Sebuah alat kecil untuk membantu Anda menghasilkan grid gabungan dan menghemat waktu untuk menggambar variasi tanpa akhir sekarang datang dari Michelle Barker: generator grid gabungan . Yang perlu Anda lakukan adalah memasukkan jumlah kolom untuk setiap grid Anda, dan kolom tersebut akan digabungkan menjadi grid gabungan. Tambahan yang bagus untuk kotak peralatan digital Anda. Dan jika Anda perlu membuat kisi modular, kisi multikolom, atau kisi manuskrip untuk proyek cetak Anda, Kalkulator Kisi Modular memberikan penjelasan menyeluruh tentang pencapaiannya di InDesign.

Filter CSS dan Pembuat Mode Campuran

drop-shadow CSS memiliki dukungan yang sangat baik tetapi agak diremehkan – sangat disayangkan mengingat fakta bahwa itu dapat menghemat banyak waktu untuk meretas dengan box-shadow .

Seperti yang dijelaskan oleh Michelle Barker dalam sebuah posting blog , drop-shadow memungkinkan Anda menggunakan nilai untuk x-offset, y-offset, radius blur, dan warna – seperti halnya saudara kandung box-shadow yang lebih menonjol. Namun, ada satu keuntungan besar: bayangan tidak sesuai dengan kotak pembatas suatu elemen (yang sering kali merupakan tempat peretasan dimulai saat menggunakan box-shadow ), tetapi ke bagian gambar yang tidak transparan. Sempurna jika Anda ingin menerapkan drop shadow ke logo PNG atau SVG transparan, misalnya, atau bahkan bentuk yang terpotong.

Ada banyak filter CSS di luar sana, jadi jika Anda perlu menemukan kumpulan filter yang tepat untuk proyek Anda, Editor Filter CSS Mads Stoumann untuk menguji semua filter yang didukung , bersama dengan beberapa hadiah yang disediakan Mads juga. Jelas, CSS juga dibuat dengan cepat.

Selain filter, ada juga banyak opsi untuk mode campuran CSS . Jika Anda ingin melihat pratinjau bagaimana beberapa efek visual dapat bekerja sama, Anda dapat menggunakan Generator Duotone CSS Rick Metzger. Alat ini mencakup opsi untuk zoom, jarak, blur dan opasitas gambar, tetapi juga semua mode campuran untuk gambar latar depan dan latar belakang. Tentu saja, alat tersebut juga menghasilkan HTML dan CSS.

Generator Placeholder Gambar Buram

Placeholder gambar adalah cara yang efisien untuk meningkatkan kinerja situs yang dirasakan saat gambar dimuat. Dalam upayanya menemukan placholder gambar tercepat dan paling cantik untuk web, Joe Bell memutuskan untuk menemukan solusinya sendiri. Hasilnya: Pemegang Plaice .

Didukung oleh koleksi pembantu Node.js, Plaiceholder mengubah gambar Anda menjadi gambar placeholder yang ringan dan buram. Ada beberapa pendekatan yang dapat dipilih: CSS (yang disarankan), SVG, Base 64, Blurhash , dan Blurhash eksperimental ke CSS .

Generator Animasi CSS

Sangat mudah untuk membedakan antara animasi yang tampak agak aneh, dan animasi yang dilakukan dengan baik. Tetapi menyesuaikan animasi atau transisi keyframe secara manual bisa sangat memakan waktu. Animista menyediakan perpustakaan animasi dan transisi yang dapat Anda gunakan di luar kotak. Ada banyak preset untuk masuk dan keluar, sorotan teks, aksi tombol, dan efek latar belakang. Setelah Anda menentukan animasi, Anda dapat menyalin-tempel cuplikan CSS dari animasi tersebut, bersama dengan kode yang dibuat oleh Autoprefixer.

CSS Wand menyediakan animasi hover dan loading , tetapi Anda juga dapat menggunakan animasi Ladda (tombol dengan indikator pemuatan bawaan) dan Eric Spinners (dengan integrasi Vue.js). Dan mungkin Anda ingin menambahkan sentuhan aneh pada transisi hover dengan Boop! – ingatlah untuk menskalakan dengan elemen semu dan hormati preferensi gerakan untuk pengguna yang ikut serta untuk gerakan yang dikurangi.

Pembuat Doodle CSS

Kami dapat menghidupkan tata letak paling canggih dengan CSS, tetapi kami juga dapat menghasilkan karya seni dan coretan yang menyenangkan. Yuan Chuan telah membangun , komponen web untuk menggambar pola dengan CSS . Komponen ini mencakup banyak fungsi utilitas dan properti singkatan untuk dimainkan. Hasilnya, komponen menghasilkan kisi div bersama dengan CSS biasa. Kode sumber juga tersedia di GitHub .

Pembantu Pengembang Web Kecil yang Berguna

Jika Anda membutuhkan beberapa alat lagi dalam hidup Anda, untungnya, ada banyak pengembang web yang bagus yang mengumpulkan alat bantu favorit mereka di satu tempat bernama Tiny Helpers . Dikelola oleh Stefan Judis, Anda pasti akan menemukan semua jenis alat: dari API, aksesibilitas dan warna, hingga font, performa, ekspresi reguler, SVG, dan Unicode.

Tentu saja, masih banyak lagi yang dibagikan di platform lain, seperti utas Twitter yang sangat berguna oleh Josh W. Comeau, tetapi juga oleh Stefan Judis sendiri. Apa pun yang ingin Anda temukan yang akan membantu Anda menyelesaikan pekerjaan dengan lebih baik dan lebih cepat, Anda pasti menemukannya di sana!

Membungkus

Ada secara harfiah ratusan sumber daya di luar sana, dan kami berharap bahwa beberapa dari orang-orang yang tercantum di sini akan terbukti berguna dalam pekerjaan Anda sehari-hari – dan yang paling penting membantu Anda menghindari beberapa, tugas-tugas rutin memakan waktu. Selamat menghasilkan!

March 15, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *