20+ Aplikasi & Tools CSS Online Gratis Terbaik

Kami telah mengumpulkan aplikasi dan tools berbasis web sebagai solusi cepat untuk banyak pekerjaan yang biasanya membuat frustrasi dan menghabiskan banyak waktu anda ketika bekerja dengan CSS. Mulai dari aplikasi yang akan menghitung ukuran EM dari PXS, alat untuk meminimalkan dan membersihkan CSS anda, sumber daya untuk menghasilkan animasi CSS, konverter untuk mengubah gambar ke dalam base64 encoded string, generator untuk membuat layout flexbox, dan banyak lagi. Anda mungkin tidak membutuhkan mereka hari ini, tetapi mereka semua layak untuk di bookmark, karena anda tidak pernah tahu kapan anda akan membutuhkannya.

Aplikasi Online CSS

Visual Guide to CSS3 Flexbox Properties

Aplikasi & Tools CSS Online Gratis Terbaik - Visual Guide to CSS3 Flexbox Properties

Visual Guide to CSS3 Flexbox Properties tidak akan menjelaskan bagaimana flex properties bekerja, panduan visual ini berfokus pada bagaimana flex properties mempengaruhi layout web.

Link Website

extractCSS

Aplikasi & Tools CSS Online Gratis Terbaik - extractCSS

extractCSS adalah alat untuk mengekstraksi id, class dan inline styles dari dokumen HTML dan kemudian membuat semuanya menjadi sebuah CSS stylesheet.

Link Website

CSS Compressor

Aplikasi & Tools CSS Online Gratis Terbaik - CSS Compressor

CSS Compressor adalah aplikasi kecil yang berguna yang akan meminimalkan dan kompres CSS anda.

Link Website

CSS Trashman

Aplikasi & Tools CSS Online Gratis Terbaik - CSS Trashman

CSS Trashman akan menganalisa Live DOM pada situs anda dan akan menghasilkan css baru dengan teknik reverse engineers, dimana css yang dihasilkan memiliki definisi yang lebih elegan. CSS yang dihasilkan (atau Sass) akan disesuaikan untuk situs anda dan siap untuk di-download.

Link Website

Live CSS Editor

Live CSS Editor

Live CSS Editor adalah ekstensi Chrome dan Safari yang memungkinkan anda untuk bebas mengedit CSS di situs manapun dan langsung melihat hasilnya.

Link Website

Purify CSS

Purify CSS

Purify CSS adalah alat yang berguna yang dapat mendeteksi CSS selectors yang digunakan dan membuat file CSS tanpa CSS yang tidak diperlukan.

Link Website

CSS Gradient Animator

CSS Gradient Animator

Seperti namanya, CSS Gradient Animator adalah sebuah alat kecil yang berguna untuk cepat menghasilkan gradien CSS.

Link Website

px-em

px-em

px-em adalah alat yang sangat kecil yang akan mengonversi satuan ukuran PXs (pixel) ke EM. Cukup tambahkan ukuran PX dalam kotak, ukuran EM yang dibutuhkan akan muncul dibagian bawah.

Link Website

RQRWDC

RQRWDC

RQRWDC (Really Quick Responsive Web Design Calculator) adalah alat desain web responsif yang memungkinkan melakukan perhitungan persentase dari penggunaan area yang menggunakan satuan PX.

Link Website

Fibonacci

Fibonacci

Fibonacci adalah generator yang berguna untuk membuat layout Flexbox.

Link Download

Flat UI Color Picker

Flat UI Color Picker adalah koleksi inspiratif warna UI yang dengan mudah dapat anda copy dan paste ke stylesheet anda sendiri.

Link Website

PatternBolt

PatternBolt adalah kumpulan dari latar belakang SVG bermotif yang dikemas ke dalam sebuah file CSS/ SASS.

Link Website

CSS Shorthand Generator

Shrthnd adalah alat yang berguna yang mengubah CSS properties menjadi singkatan, membuat stylesheet lebih pendek dan lebih mudah dibaca.

Link Website

iconizr

iconizr adalah alat untuk mengonversi gambar SVG menjadi satu set ikon CSS.

Link Website

Create CSS3

Create CSS3 adalah sebuah aplikasi yang memungkinkan anda untuk menghasilkan semua kode CSS3 yang anda butuhkan dengan cepat dan mudah, dengan fallbacks yang diperlukan.

Link Website

Flexplorer

Flexplorer adalah alat sederhana untuk menghasilkan kode flexbox untuk list.

Link Website

CSS Shapes Editor

CSS Shapes Editor adalah ekstensi Chrome yang menawarkan kontrol untuk membuat dan mengedit nilai CSS Shapes seperti polygon(), circle() dan ellipse() pada setiap elemen yang dipilih.

Link Website

CSS Diner

CSS Diner adalah permainan kecil sederhana yang akan membantu anda belajar tentang CSS. Yang harus anda lakukan adalah mengetikkan selector yang benar untuk menyelesaikan setiap level.

Link Website

Duri.me – DataURI Converter [tidak tersedia]

Duri.me adalah konverter data URI yang akan mengubah gambar ke dalam base64 encoded string yang kemudian dapat dimasukkan langsung dalam file HTML dan CSS anda.

Gridpak Responsive Grid Generator [tidak tersedia]

Gridpak adalah alat yang berguna untuk menghasilkan suatu sistem grid responsif. Gridpak Responsive Grid Generator memberi anda kontrol atas setiap aspek dari padding kolom grid yang mana terjadi ‘break point’.

CSS Beautifier [tidak tersedia]

CSS Beautifier secara otomatis akan memformat style CSS anda sehingga mereka konsisten dan lebih mudah dibaca.

CSS Animation Generator [tidak tersedia]

CSS Animation Generator adalah alat untuk cepat menghasilkan animasi CSS. Cukup copy dan paste CSS yang dihasilkan ke HTML proyek anda.

StyleStats [tidak tersedia]

StyleStats adalah alat kecil untuk mengumpulkan statistik CSS berguna dari stylesheet apapun. Yang diperlukan hanya input URL dan klik ‘parse’ dan secara otomatis semua statistik css akan ditampilkan.

CSScomb [tidak tersedia]

CSScomb adalah formatter gaya pengkodean yang akan mengurutkan sifat CSS berdasarkan konfigurasi tertentu.

CSSynth [tidak tersedia]

CSSynth adalah aplikasi kecil yang berguna yang akan membantu untuk menjalankan animasi CSS.

Aplikasi lain yang juga layak dipertimbangkan

CSS Vocabulary – Sebuah library referensi CSS.
Layoutit – Sebuah Bootstrap untuk membangun tampilan (interface) hanya dengan drag & drop.
NTH-TEST – tester untuk nth-child dan nth-of-type.
Picssel-Art – Sebuah aplikasi untuk menciptakan seni pixel menggunakan CSS.