Просмотрщик стилей CSS / тестер

Есть ли сайт, на котором есть типичный HTML-код для просмотра того, как выглядит CSS после применения?

Я имею в виду, что - то полное table, a, div, span, p, что угодно. Вы идете туда, вставляете свой CSS и видите результаты.

Вау, кто-то только что опубликовал это на SO.

Это то, что доктор прописал: http://jsfiddle.net/

Вы можете написать html, css и javascript и запустить его прямо там !! Плюс у них уже есть ссылки на Jquery и другие вещи!

Я думаю, что интернет-правило 33, если вы хотите / представляете, его там! ;)

Я просто наткнулся на http://colorschemedesigner.com/ .

Он отлично подходит для выбора цветов и покажет вам примеры страниц, чтобы увидеть, как будет выглядеть цветовая схема применительно к обычной странице.

Обновление: сайт теперь http://paletton.com

Я не знаю ни одного, но это просто настроить себя. Просто создайте базовый HTML-документ со всеми элементами, которые вы описываете. (При необходимости вы можете сгенерировать текст на Lipsum.com .) Затем добавьте ссылку на файл CSS в заголовке документа, чтобы увидеть прикрепленные стили. В следующий раз, когда вы захотите протестировать, измените его так, чтобы он указывал на другой файл CSS.

Не совсем то , что вы просили, но я люблю режим просмотра в реальном из less.js .

Обычно я просто макетирую любые элементы / комбинации в любой разновидности HTML или XHTML, требуемой вручную, но вы можете создать свой собственный главный документ элементов. Если вы подключите второй монитор (или два, три и т. Д.), Чтобы открыть все браузеры (или использовать второй компьютер), все сохраненные изменения будут применены ко всем сразу.

Синтаксис LessCSS может использоваться вместе с обычным CSS, но с ним быстрее работать и его легко подобрать (впоследствии результаты можно преобразовать в обычный CSS).

Такие инструменты, как Aviary, позволяют легко делать снимки экрана (включая автоматизацию прокрутки вниз и сшивания), которые можно быстро комментировать (в режиме онлайн с помощью общих ссылок) или сохранять и сравнивать в другом инструменте (таком как Photoshop , GIMP , Paint .NET и т. Д.), Наложив их на слои и изменив прозрачность сверху.

Редактировать:

Если вы хотите автоматизировать процесс создания снимка экрана (при сохранении файла), чтобы:

• когда возникает проблема, у вас уже есть все под рукой
• изображение может быть добавлено в систему контроля версий (которая также может быть автоматизирована при сохранении файла)
• вы можете сосредоточиться на CSS вместо периферии

тогда вы можете использовать что-то вроде средства просмотра файлов (прошу прощения за ориентацию на Python, есть много других решений) с захватом экрана . Постобработка также может быть автоматизирована, и если вы используете согласованные положения окон (среда программы / рабочего стола может помочь в этом), «хром» вокруг браузеров может быть отключен как часть сценария.

w3schools позволяет вам играть с правилами HTML и CSS. Просто найдите CSS / HTML, с которым вы хотите поиграть, и найдите, где написано «Попробуйте сами». Вот их border CSSстраница и вот их игровая площадка .

Я создаю все свои страницы в html / css, а затем использую инструменты Firebug или Chrome для веб-мастеров, чтобы добавлять / изменять / экспериментировать со стилями. Это быстро, просто и временно, что отлично подходит для экспериментов. Кроме того, вы можете работать со своим собственным кодом на своих серверах, что является еще одним бонусом.

Buzzkill: часть меня, разработчик пользовательского интерфейса, предупреждает вас, что лучше создать концепцию в настоящем инструменте дизайна, а затем кодировать, чтобы имитировать из-за различий в браузерах .... просто скажу ...

Примечание: я большой поклонник пользовательского интерфейса Jquery Themeroller. Такой инструмент существует для Themeroller для изменения стилей на стороне. Можно полностью создать тему сайта с помощью CSS от Themeroller, а затем просто переключаться между различными темами. Если вы никогда не пробовали его, он может действительно ускорить развертывание, особенно если вы ищете тот «глянцевый» вид, который сейчас так популярен.

Вы идете туда, вставьте свой CSS и посмотрите результаты.

Вот, пожалуйста: http://www.oswt.co.uk/developments/style_sheet_viewer/

Именно то, что требуется в вопросе!

Не уверен, что это то, о чем вы просили, но в CSS Zen Garden есть такая HTML-страница с множеством CSS-дизайнов. Вы можете написать свой собственный CSS для этого сайта, примеры очень вдохновляющие.