Penampil / penguji gaya CSS

Apakah ada situs di luar sana yang memiliki banyak HTML untuk melihat seperti apa tampilan CSS setelah diterapkan?

Maksudku, sesuatu yang penuh table, a, div, span, p, apa pun. Anda pergi ke sana, tempel di CSS Anda dan lihat hasilnya.

Wow, seseorang baru saja memposting ini di SO.

Ini persis seperti yang diperintahkan dokter: http://jsfiddle.net/

Anda dapat menulis html, css dan javascript dan jalankan langsung di sana !! Plus mereka sudah memiliki referensi ke Jquery dan hal-hal lain!

Saya pikir Internet Rule 33 adalah jika Anda ingin / membayangkannya, ini ada di luar sana! ;)

Saya baru saja menemukan http://colorschemedesigner.com/ .

Ini bagus untuk memilih warna dan akan menunjukkan kepada Anda halaman contoh untuk melihat seperti apa skema warna yang akan diterapkan pada halaman biasa.

Perbarui: situs web sekarang http://paletton.com

Saya tidak tahu apa-apa, tetapi ini sederhana untuk mengatur sendiri. Cukup buat dokumen HTML dasar dengan semua elemen yang Anda jelaskan. (Anda dapat menghasilkan teks jika perlu dari Lipsum.com .) Kemudian tautkan ke file CSS di kepala dokumen untuk melihat gaya Anda terlampir. Lain kali Anda ingin menguji, ubah untuk menunjuk ke file CSS lain.

Tidak persis apa yang Anda minta, tapi aku suka modus menonton live less.js .

Secara umum saya hanya mengejek elemen / kombinasi dalam rasa HTML atau XHTML apa pun yang diperlukan secara manual, tetapi Anda dapat membuat dokumen master elemen Anda sendiri. Jika Anda mencolokkan monitor kedua (atau dua, tiga, dll) untuk membuka semua browser (atau menggunakan komputer kedua), setiap perubahan yang Anda simpan diterapkan langsung ke semuanya sekaligus.

Sintaks LessCSS dapat digunakan bersamaan dengan CSS biasa tetapi lebih cepat untuk digunakan dan mudah diambil (hasilnya dapat dikonversi menjadi CSS normal setelahnya).

Alat-alat seperti Aviary memungkinkan Anda untuk dengan mudah mengambil tangkapan layar (termasuk otomatisasi scrolling down dan stitching), yang dapat dengan cepat dianotasi (on-line dengan tautan yang dapat dibagikan) atau disimpan dan dibandingkan di alat lain (seperti Photoshop , GIMP , Paint .NET , dll) dengan melapisinya sebagai lapisan dan mengubah transparansi yang ada di atas.

Edit:

Jika Anda ingin mengotomatiskan proses screenshot (pada penyimpanan file) sehingga:

• ketika masalah terjadi, Anda sudah memiliki segalanya
• sebuah gambar dapat ditambahkan ke kontrol versi (yang juga dapat diotomatiskan pada penyimpanan file)
• Anda dapat berkonsentrasi pada CSS, bukan kegiatan pinggiran

maka Anda dapat menggunakan sesuatu seperti pengamat file (mohon alasan orientasi Python, ada banyak solusi lain) dengan grabber layar . Pemrosesan pasca juga dapat otomatis dan jika Anda menggunakan posisi jendela yang konsisten (lingkungan program / desktop dapat membantu ini) "chrome" di sekitar browser dapat dipotong sebagai bagian dari skrip.

w3schools memungkinkan Anda bermain-main dengan aturan HTML dan CSS. Cukup temukan CSS / HTML yang ingin Anda mainkan dan cari di mana dikatakan, "Cobalah sendiri". Ini border CSShalaman mereka dan ini taman bermain mereka .

Saya membangun semua halaman saya dalam html / css kemudian menggunakan alat webmaster firebug atau chrome untuk menambah / mengubah / bereksperimen dengan gaya. Ini cepat, sederhana, dan sementara, yang bagus untuk eksperimen. Plus, Anda dapat bekerja dengan kode Anda sendiri di server Anda sendiri, yang merupakan bonus lain.

Buzzkill: bagian Pengembang UI dari saya memperingatkan Anda bahwa lebih baik untuk konsep dalam alat desain yang benar dan kemudian kode untuk meniru karena perbedaan dalam browser .... katakan saja ...

Catatan tambahan - Saya penggemar berat UI Themeroller Jquery. Alat seperti itu memang ada untuk Themeroller untuk mengubah gaya di samping. Sangat mungkin untuk tema keseluruhan situs melalui Themeroller's CSS, kemudian cukup beralih antara tema yang berbeda. Jika Anda belum pernah mencobanya, ini benar-benar dapat mempercepat penyebaran, terutama jika Anda mencari tampilan "glossy" yang begitu populer saat ini.

Anda pergi ke sana, tempelkan di css Anda dan lihat hasilnya.

Ini dia: http://www.oswt.co.uk/developments/style_sheet_viewer/

Apa yang dibutuhkan dalam pertanyaan itu!

Tidak yakin apakah itu yang Anda minta, tetapi CSS Zen Garden memiliki halaman HTML dengan banyak desain CSS. Anda dapat menulis CSS Anda sendiri untuk situs ini, contohnya sangat menginspirasi.