A! Apakah Anda menggunakan generator? CSS3 atau HTML5? Jika tidak, mungkin patut dicoba :) Bayangkan saja, Anda bisa berhenti mendeskripsikan gaya tombol secara manual, sudut dalam blok, bayangan, gradien jika ada yang menggunakannya, dan seterusnya, juga HTML5. Mengapa menulis kode yang sama setiap kali Anda membuat proyek baru, ketika Anda dapat "mengetik" parameter ke dalam kotak, tekan tombol dan dapatkan kode sumber yang sudah jadi, dan jika perlu, perbaiki!
Pada artikel ini saya akan menunjukkan kepada Anda pilihan generator tersebut. Sebagian besar ini adalah generator CSS3 dan pasangan untuk HTML5. Untuk pergi ke situs web layanan - Klik pada nama layanan!

Generator CSS3:

CSS3.me

Salah satu generator terbaik. Penulisnya adalah Eric Hoffman. Dimungkinkan untuk mengubah dan mengatur pembulatan, bayangan, gradien, dan transparansi - efek yang paling umum digunakan.

Pembuat CSS3

Hampir semuanya ada dan lebih banyak lagi. Anda dapat menyesuaikan wajah @font, animasi, bayangan kotak, bayangan teks, rotasi teks, transformasi, gradien, pembulatan, dan banyak lagi.

Pembuat CSS3

Ini memiliki fungsi yang kurang lebih sama dengan generator sebelumnya. Anda harus memilih item yang diinginkan dari daftar drop-down dan memasukkan data utama.

Pembuat Bayangan Webestools

Pembuat bayangan. Hanya bayangan yang dapat disesuaikan: warna, offset, buram, bayangan dalam atau luar, dll.

Generator tombol

Pembuat Tombol CSS3

Generator yang menyenangkan. Di sebelah kanan ada satu tombol besar - hasil manipulasi, dan di sebelah kiri ada pengaturan. Anda dapat memanipulasi bayangan, batas, warna, dan sebagainya. Penggeser seret dan lepas sangat bagus untuk orang yang baru mengenal pembuatan situs web. Ada baiknya Anda bisa langsung melihat reaksi atas tindakan Anda, dari sini Anda bisa memahami setting mana yang bertanggung jawab atas apa.

Pembuat Tombol Trik CSS3

Generator tombol ini sedikit lebih sederhana. Seluruh proses pembuatan tombol didasarkan pada menyeret penggeser. Di sini taruhannya ada pada latar belakang, yaitu bermain-main dengan warna tombol.

Tombol CSS3.net

Ini bukan pembuat tombol yang buruk. Anda dapat menyesuaikan latar belakang tombol, batas, bayangan luar, bayangan dalam, ukuran, warna teks, dan bayangan teks. Saat Anda melakukan perubahan pada blok sebelah kanan, kodenya langsung berubah.

Gambar Perbatasan dan Generator Radius

Radius Perbatasan

Fungsionalitasnya cukup sederhana: Anda hanya dapat mengonfigurasi pembulatan sudut, tetapi setiap sudut secara terpisah.

Gambar perbatasan

Agak sulit untuk dipelajari, tetapi jika Anda perlu membuat batas pada gambar, maka alat ini tepat! Anda memilih gambar Anda, menggunakan penggeser untuk memilih ukuran batas, Anda bahkan dapat menambah latar belakang untuk setiap batas... juga cara untuk mengulang gambar. Dan kodenya dihasilkan dari bawah.

generator gradien CSS3

Editor Gradien Colorzilla

Inilah generator gradien yang sangat keren. Ada banyak set warna siap pakai, tetapi Anda juga dapat memilih sendiri. Jenis gradien diatur: horizontal, vertikal, dll. Bahkan ada dukungan untuk IE.

generator HTML5

HTML5 ★ BOILERPLATE

Dengan generator ini Anda mendapatkan template template yang sepenuhnya dioptimalkan untuk berbagai browser. Saya sangat menyukai generator ini, saya akan menggunakannya sekarang. Untuk mengetahui semua “triknya”, kunjungi proyek ini, terutama karena semuanya dalam bahasa Rusia.

Generator Shikiryu HTML5 sedikit lebih kompleks dari yang sebelumnya. Memungkinkan kita memasukkan judul dan deskripsi halaman, menghubungkan kerangka css, gaya tombol css, perpustakaan, analitik, dll.

Initializr adalah generator template HTML5 yang akan membantu Anda memulai proyek baru. Initializr membuat templat yang bersih dan dapat disesuaikan untuk Anda. Parameter yang dipilih adalah: kerangka utama, opsi server (.htaccess, nginx.conf, web.config), koneksi jquery, google analitik, pilihan antara, dll.

Ini adalah generator sederhana. Kita diminta untuk memilih elemen mana yang akan ditampilkan pada halaman, dan juga menentukan beberapa opsi.

Itu saja, jika Anda mengetahui generator HTML5 atau CSS3 yang bagus, silakan tulis di komentar :)

Untuk tetap mendapatkan informasi terbaru tentang artikel dan pelajaran terbaru, berlanggananlah

Generator kode CSS adalah alat yang sangat berguna yang dapat menghemat banyak waktu pengembang web dan juga melindungi dari kesalahan yang tidak perlu. Selain itu, kode Anda akan menjadi lebih mudah dibaca. Pada artikel ini, kami telah memilih sejumlah generator kode CSS yang menurut kami berguna.

Bagan Klik CSS

Lembar Cheat CSS

kotak sprite

Generator Peta Piksel

Bersihkan CSS

CSS Menghidupkan

Nah teman-teman, animasi? Terapkan dan mainkan transisi di CSS.

Gradien UI

TUNGGU! Menghidupkan

Membuat jeda berulang khusus di antara animasi CSS bukanlah tugas yang mudah. Namun dengan bantuan aplikasi ini, kompleksitas prosedur dikurangi menjadi nol.

Pembuat CSS3

Kumpulan Jenis CSS

Ingin melihat seperti apa tampilan font yang berbeda? Pergi ke Kumpulan Tipe CSS. Yang perlu Anda lakukan hanyalah memasukkan teks dan memilih opsi font.

Nikmati CSS

Kotak Fleksibel

Jika Anda kesulitan memahami flexbox, Anda harus mencoba Flexy Boxes. Dalam aplikasi ini Anda dapat membandingkan berbagai versi flexbox dan interpretasi sintaksis.

Menulis HTML murni seringkali merepotkan, terutama jika Anda perlu melakukan penyisipan dinamis.

Mesin templat memecahkan sebagian masalah ini, tetapi Anda perlu mempelajari sintaksisnya yang bagus, menerima batasannya, memasukkan beberapa templat ke templat lain untuk digunakan kembali, secara umum upayanya bagus, tetapi ada yang salah.

Beberapa kerangka kerja memiliki pembantu; khususnya, Aura.Html memaksa saya untuk menulis artikel ini. Pembantu adalah cerita yang berbeda - mereka awalnya dirancang untuk penyederhanaan nyata, karena satu perintah dapat menghasilkan sepotong kode HTML yang bagus, tetapi sebagian besar dirancang untuk penggunaan tertentu, dan apa pun di luar itu terlihat terlalu bengkok.

Sebagai solusi yang lebih universal, alangkah baiknya jika tidak membuat sintaksis yang mewah, tetapi menggunakan PHP yang paling umum dan pemilih CSS primitif yang sudah dikenal.

Bagaimana cara kerjanya?

H::div("Isi")
apa yang akan menjadi outputnya

H::div("Isi", [ "kelas" => "beberapa konten" ])

H::("div.beberapa-konten")("Konten")
Outputnya akan sama. Sekilas mungkin tampak sedikit aneh, namun dalam praktiknya sangat nyaman.

Dibandingkan dengan Aura.Html

$helper->input(array("type" => "search", "name" => "foo", "value" => "bar", "attribs" => array()));
Pilihan kami:

H::("masukan")()
Parameter apa pun dapat dimasukkan ke dalam array.
Keluaran:

Dan pilihan lain yang lebih serius.

Aura.Html (contoh dari dokumentasi):

$helper->input(array("type" => "select", "name" => "foo", "value" => "bar", "attribs" => array("placeholder" => "Silahkan pilih one", "options" => array("baz" => "Baz Label", "dib" => "Dib Label", "bar" => "Bar Label", "zim" => "Zim Label ", ),))
Pilihan kami:

H::("pilih")([ "dalam" => [ "Silahkan pilih salah satu", "Label Baz", "Label Dib", "Label Batang", "Label Zim" ], "nilai" => [ " ", "baz", "dib", "bar", "zim" ], "dipilih" => "bar", "dinonaktifkan" => "" ])
Di Sini di dalam digunakan secara eksplisit, dapat digunakan untuk menyampaikan bagian dalam sebuah tag, seperti Isi dalam contoh dengan div lebih tinggi. Baik aturan umum maupun aturan khusus digunakan, sedikit lebih banyak tentangnya di bawah ini.
Outputnya sama:

Silakan pilih satu Label Baz Label Dib Label Batang Label Zim

Pemrosesan khusus

H::("masukan")()

Bekerja serupa dengan memilih, V nilai nilai, dan diperiksa akan disisipkan ketika elemen dengan nama yang sama dalam array yang dikirimkan cocok.

Contoh penggunaan lainnya di dalam dan pemrosesan khusus masukan:

H::("input")([ "dicentang" => 1, "nilai" => , "masuk" => ["Mati", "Aktif"] ])
Mati Pada
Tidak ada pembungkus label tidak ditambahkan secara spesifik untuk membuat kode menjadi umum dan dapat diprediksi.

Jika Anda perlu memproses array

H::("tr td")([ "Sel pertama", "Sel kedua", "Sel ketiga" ])
Atau bahkan menghilangkan tanda kurung tambahan dalam kasus yang paling sederhana

H::("tr td")("Sel pertama", "Sel kedua", "Sel ketiga")
Keluaran:

Setiap elemen array akan diproses secara terpisah, yaitu meneruskan tidak hanya string, tetapi juga beberapa atribut cukup sah, namun terkadang terlihat terlalu mengerikan:

H::("tr.row td.cs-left")("Sel pertama", [ "Sel kedua", [ "kelas" => "sel tengah", "gaya" => "warna:merah;" , "colspan" => 1 ] ], [ "Sel ketiga", [ "colspan" => false ] ])
Jika atribut juga ditentukan dalam panggilan - kelas Dan gaya akan diperluas, sisanya akan ditimpa, atribut dengan nilai boolean PALSU akan dihapus.

Dengan menggunakan tongkat ajaib, yang bukan merupakan bagian normal dari pemilih CSS (ini adalah satu-satunya pengecualian yang dapat Anda lakukan tanpanya), Anda dapat mengontrol cara penanganan level bersarang:

H::("tr| td")([ [ "Baris pertama, kolom pertama", "Baris pertama, kolom kedua" ], [ "Baris kedua, kolom pertama", "Baris kedua, kolom kedua" ] ])
Jika array diperoleh dari database atau penyimpanan lain, akan lebih mudah untuk menggunakan array tersebut secara langsung, dan ini dapat dilakukan dengan meneruskannya ke atribut khusus menyisipkan:

$array = [ [ "teks" => "Teks1", "id" => 10 ], [ "teks" => "Teks2", "id" => 20 ] ]; h::a("$i", [ "href" => "Halaman/$i", "masukkan" => $array ])
Teks1 Teks2
Anda dapat menulis semua atribut dalam satu baris:

$array = [ [ "id" => "kotak_centang_pertama", "nilai" => 1 ], [ "id" => "kotak_centang kedua", "nilai" => 0 ], [ "id" => "kotak_centang_ketiga", "nilai" => 1 ] ]; h::("masukan]]")([ "masukkan" => $array ])

Dan semua ini bisa diperluas

H::radio([ "dicentang" => 1, "nilai" => , "masuk" => ["Mati", "Aktif"] ])
Pada Mati
Anda juga dapat mengganti metode ini pra_pemrosesan, dan menerapkan pemrosesan atribut arbitrer segera sebelum tag dirender, misalnya, jika atribut tersebut ada judul data Saya menggantung kelas dan dengan cara ini saya mendapatkan tooltip atas elemen saat mengarahkan kursor.

Keuntungan menggunakan

generator CSS dan layanan CSS online menyederhanakan proses pengembangan web. Dengan bantuan mereka, Anda bisa mendapatkan kode lintas-browser siap pakai untuk berbagai elemen antarmuka, menguji tampilan situs di layar perangkat seluler, memilih palet warna untuk situs, dan banyak lagi.

Generator, layanan CSS online

diperbarui 04/05/2017

— layanan untuk menghasilkan awalan browser dan banyak lagi.

— banyak koleksi palet warna, termasuk untuk membuat material dan desain datar.

— generator skema warna.

Awalan otomatis online— menambahkan awalan vendor yang diperlukan dan menghapus awalan yang tidak diperlukan di CSS Anda.

— layanan untuk memilih skema warna untuk situs web, bayangan alternatif, menentukan warna dari sebuah gambar.

cssFilter— filter khusus dan filter mirip Instagram untuk gambar.

Tipe Skala— kalkulator visual untuk menghitung ukuran judul.

TEKSTUR TRANSPARAN— kumpulan tekstur transparan mulus untuk situs web Anda.

Pembuat Penggeser Gambar— layanan online untuk membuat penggeser adaptif dengan gambar.

— Editor 3D untuk membuat model tiga dimensi menggunakan CSS murni.

Alat Kode Web— generator kode untuk membuat efek CSS, kode HTML untuk berbagai elemen, kartu Twitter, dan hal berguna lainnya.

CARA MEMUSATKAN DI CSS— generator gaya untuk memusatkan (menyelaraskan) blok atau teks menggunakan berbagai teknik. Ada juga dukungan untuk berbagai versi Internet Explorer.

img2css adalah alat yang mengubah gambar menjadi kode CSS, ini memberi Anda satu div dengan kode yang dapat Anda gunakan dalam proyek Anda.

Pembuat Perangkat CSS Apple— generator markup dan gaya untuk perangkat Apple. Di bidang Jenis Perangkat Anda dapat memilih jenis perangkat, menggunakan Lebar Perangkat Anda dapat mengatur lebarnya, dan juga memilih warna layar di bidang warna Bagian Dalam Perangkat.

Data Warna Web adalah layanan online yang memungkinkan Anda mendapatkan palet warna halaman web mana pun.

Simpsons dalam CSS— kumpulan karakter favorit Anda dalam CSS murni.

Emulator ponsel akan menguji tampilan situs di layar perangkat seluler. Terminal ponsel— bidang untuk memilih jenis perangkat, ukuran dan orientasi jendela, Situs web ke terminal— bidang untuk memasukkan alamat URL.

Beban CSS— pilihan indikator pemuatan yang sangat baik. Pengeditan disediakan - Anda dapat mengubah warna, ukuran, kecepatan rotasi, dan kemudian mengunduh kode yang dihasilkan. Untuk beralih ke bahasa Rusia, klik ikon bendera di sudut kiri atas jendela.

penjelajah fleksibel— sebuah platform untuk mendemonstrasikan kemampuan model Flexbox. Anda dapat mengatur parameter Anda sendiri untuk blok dan melihat contoh tindakannya.

lalat layar— layanan ini akan membantu Anda menguji tampilan situs web Anda di layar perangkat dengan resolusi berbeda. Untuk menggunakan layanan ini, Anda perlu memasukkan URL di bilah pencarian; gunakan menu atas untuk memilih jenis perangkat.

Bayangan panjang— layanan yang memungkinkan Anda membuat apa yang disebut “bayangan panjang” untuk blok dan teks.

adalah aplikasi web yang memeriksa kesalahan kode CSS. Hasil pengujian ditampilkan dalam bentuk tabel yang menunjukkan garis kesalahan dan penjelasannya. Saat memeriksa, Anda dapat menggunakan parameter berbeda untuk menentukan kedalamannya.

Sistem Grid Responsif— Kerangka kerja CSS untuk membuat tata letak berbasis grid yang fleksibel. Bab Ayo berangkat kerja memungkinkan Anda memilih dan memuat tata letak halaman yang diinginkan, menggunakan 2 hingga 12 kolom, dan kalkulator di bagian tersebut Atau Buat Sendiri akan membantu Anda mengatur markup Anda sendiri.

TEKS CSS KE GENERATOR PATH akan menghasilkan kode html untuk teks yang terletak di sepanjang kurva.

Pembuat Pita 3D akan membantu Anda membuat pita 3D yang indah. Anda perlu memilih opsi desain, serta mengatur warna dan ukuran elemen.

paletton— layanan online untuk memilih skema warna untuk situs web Anda. Tab COLOR TABLES akan membuka palet, serta berbagai kombinasi warna, dan tombol bulat di bawah nama layanan akan memungkinkan Anda memilih jumlah warna yang akan digabungkan.

pembuat CSS3 adalah layanan online yang memungkinkan Anda dengan mudah menghasilkan kode CSS3 untuk properti tertentu, seperti:
radius batas, bayangan kotak, bayangan teks, RGBA, @font-wajah, beberapa kolom, pengubahan ukuran kotak, ukuran kotak, garis besar, transisi, transformasi, gradien. Yang perlu Anda lakukan hanyalah memilih properti yang ingin Anda gunakan dalam gaya browser Anda, mengatur opsi yang diperlukan untuk properti tersebut, lalu menyalin kode yang dihasilkan ke dalam proyek Anda.

Pembuat CSS 3.0- layanan yang mirip dengan generator CSS3, ada fitur menarik lainnya - Rotasi Teks.

adalah layanan yang sangat diperlukan untuk membuat bilah navigasi berbasis daftar, baik dalam CSS murni maupun menggunakan jQuery. Selain markup utama, ia menawarkan opsi gaya siap pakai untuk bilah navigasi vertikal dan horizontal.

Berisi banyak koleksi properti CSS; di situs ini Anda dapat menemukan semua jenis sumber daya dan alat yang memungkinkan Anda menyempurnakan kode CSS Anda.

Gambar Perbatasan- generator properti gambar perbatasan CSS3 online yang memungkinkan Anda menganimasikan batas blok menggunakan gambar.

— Pembuat templat HTML+CSS. Berkat sumber daya ini, Anda dapat dengan mudah membuat tata letak halaman berdasarkan tata letak blok. Nilai tambah yang besar dari sumber daya ini adalah Anda dapat membuat tata letak dengan lebar tetap dan lebar "dapat disesuaikan", tanpa memikirkan cara menekan "footer" ke bagian bawah jendela browser. Kami merekomendasikannya kepada semua desainer tata letak pemula!

Tolong CSS3! adalah layanan yang sangat nyaman untuk membuat kode lintas-browser untuk gaya CSS seperti border-radius, box-shadow, linear-gradient, transisi dan banyak lainnya. Dengan mengatur nilai gaya di editor, Anda dapat langsung melihat hasil yang dihasilkan menggunakan blok contoh yang terletak di jendela sebelah kanan.

- Koleksi unik aplikasi online gratis untuk kreativitas Anda, yang dengannya Anda dapat dengan mudah membuat elemen antarmuka pengguna Anda sendiri, seperti pita prasasti, formulir pendaftaran situs web, ikon, dan tombol.

Pembuat sprite CSS akan menghemat banyak pekerjaan ekstra saat membuat sprite untuk halaman web Anda.

Memberikan kepada Anda contoh penggunaan kemampuan CSS3 yang hebat. Anda akan memiliki kesempatan untuk membuat latar belakang mulus yang kompleks untuk situs web Anda. 37 sampel dibuat dalam berbagai gaya, dan kami yakin Anda akan menemukan sampel sesuai dengan keinginan Anda!

Dirancang untuk semua penggemar kemampuan CSS3. Tes ini mengembalikan atribut yang didukung pada browser Anda dan dengan mengklik setiap properti Anda dapat melihat apakah ada nilai yang tidak didukungnya.

Generator kode CSS adalah alat yang sangat berguna yang dapat menghemat banyak waktu pengembang web dan juga melindungi dari kesalahan yang tidak perlu. Selain itu, kode Anda akan menjadi lebih mudah dibaca. Pada artikel ini, kami telah memilih sejumlah generator kode CSS yang menurut kami berguna.

Bagan Klik CSS

Lembar Cheat CSS

kotak sprite

Generator Peta Piksel

Bersihkan CSS

CSS Menghidupkan

Nah teman-teman, animasi? Terapkan dan mainkan transisi di CSS.

Gradien UI

TUNGGU! Menghidupkan

Membuat jeda berulang khusus di antara animasi CSS bukanlah tugas yang mudah. Namun dengan bantuan aplikasi ini, kompleksitas prosedur dikurangi menjadi nol.

Pembuat CSS3

Kumpulan Jenis CSS

Ingin melihat seperti apa tampilan font yang berbeda? Pergi ke Kumpulan Tipe CSS. Yang perlu Anda lakukan hanyalah memasukkan teks dan memilih opsi font.

Nikmati CSS

Kotak Fleksibel

Jika Anda kesulitan memahami flexbox, Anda harus mencoba Flexy Boxes. Dalam aplikasi ini Anda dapat membandingkan berbagai versi flexbox dan interpretasi sintaksis.