He visto jsFiddle, pero no es lo que estoy buscando aquí. Estoy buscando algo que tenga un sitio simulado, lleno de código html típico, que pueda usar para ver cómo se vería mi CSS. En colorschemedesigner.com puede hacer clic en "Ejemplo de página de luz" y le mostrará una página de Lipsum.
Homero
Veo. jajaja Supongo que era lo que estaba buscando cuando me topé con tu pregunta, así que cuando la encontré ... me apresuré a buscar tu pregunta en mi historial y la publiqué aquí. Espero que ayude a alguien ...
No sé de ninguno, pero es fácil de configurar. Simplemente cree un documento HTML básico con todos los elementos que describa. (Puede generar texto si es necesario desde Lipsum.com ). Luego, enlace a un archivo CSS en el encabezado del documento para ver sus estilos adjuntos. La próxima vez que desee probar, cámbielo para que apunte a otro archivo CSS.
No es exactamente lo que pidieron, pero me gusta el modo de reloj en vivo de less.js .
En general, simplemente me burlo de cualquier elemento / combinación en cualquier sabor de HTML o XHTML que se requiera manualmente, pero puede crear su propio documento maestro de elementos. Si conecta un segundo monitor (o dos, tres, etc.) para abrir todos los navegadores (o usa una segunda computadora), cualquier cambio que guarde se aplicará en vivo a todos a la vez.
La sintaxis LessCSS se puede usar junto con CSS ordinario, pero es más rápido para trabajar y fácil de aprender (los resultados se pueden convertir en CSS normal después).
Las herramientas como Aviary le permiten tomar fácilmente capturas de pantalla (incluida la automatización del desplazamiento hacia abajo y la costura), que se pueden anotar rápidamente (en línea con enlaces compartibles) o guardar y comparar en otra herramienta (como Photoshop , GIMP , Paint .NET , etc.) superponiéndolos como capas y alterando la transparencia de la de arriba.
Editar:
Si desea automatizar el proceso de captura de pantalla (al guardar el archivo) para que:
cuando ocurre un problema ya tienes todo a mano
Se puede agregar una imagen al control de versiones (que también se puede automatizar al guardar el archivo)
puedes concentrarte en las actividades de CSS en lugar de periferia
entonces puede usar algo como un observador de archivos (disculpe la orientación de Python, hay muchas otras soluciones) con un capturador de pantalla . El procesamiento posterior también se puede automatizar y si usa posiciones de ventana consistentes (un entorno de programa / escritorio puede ayudarlo), el "cromo" alrededor de los navegadores se puede cortar como parte del script.
w3schools te permite jugar con las reglas HTML y CSS. Simplemente busque el CSS / HTML con el que desea jugar y busque donde dice "Pruébelo usted mismo". Aquí está su border CSSpágina y aquí está su patio de recreo .
Construyo todas mis páginas en html / css y luego utilizo herramientas webmaster de Firebug o Chrome para agregar / cambiar / experimentar con estilos. Es rápido, simple y temporal, lo cual es excelente para la experimentación. Además, puede trabajar con su propio código en sus propios servidores, lo cual es otra ventaja.
Buzzkill: la parte de UI Developer me advierte que es mejor diseñar una verdadera herramienta de diseño y luego codificar para imitar debido a las diferencias en los navegadores ... solo digo ...
Nota al margen: soy un gran admirador de la interfaz de usuario de Jquery Themeroller. Tal herramienta existe para Themeroller para cambiar los estilos en el lateral. Es posible crear un tema completo para un sitio a través del CSS de Themeroller, luego simplemente alternar entre diferentes temas. Si nunca lo ha probado, realmente puede acelerar la implementación, especialmente si está buscando ese aspecto "brillante" que es tan popular en este momento.
Bastante genial, pero no exactamente lo que tenía en mente. Este sitio genera html para que coincida con el CSS. Eso es bueno porque le mostrará todos sus estilos en acción, pero no muestra cómo se vería en un sitio 'simulado'. Algo como lo que ves en colorschemedesigner.com cuando haces clic en el enlace "Ejemplo de página de luz"
Homer
0
No estoy seguro de si eso es lo que solicitó, pero el CSS Zen Garden tiene una página HTML con muchos diseños de CSS. Podría escribir su propio CSS para este sitio, los ejemplos son muy inspiradores.
Respuestas:
Wow, alguien acaba de publicar esto en SO.
ES justo lo que ordenó el médico: http://jsfiddle.net/
¡Puedes escribir html, css y javascript y ejecutarlo directamente allí! Además, ¡ya tienen referencias a Jquery y otras cosas!
Creo que Internet Rule 33 es si lo quieres / imaginas, ¡está ahí fuera! ;)
fuente
Me topé con http://colorschemedesigner.com/ .
Es excelente para elegir colores y le mostrará páginas de ejemplo para ver cómo se vería el esquema de color aplicado a una página típica.
Actualización: el sitio web ahora es http://paletton.com
fuente
No sé de ninguno, pero es fácil de configurar. Simplemente cree un documento HTML básico con todos los elementos que describa. (Puede generar texto si es necesario desde Lipsum.com ). Luego, enlace a un archivo CSS en el encabezado del documento para ver sus estilos adjuntos. La próxima vez que desee probar, cámbielo para que apunte a otro archivo CSS.
fuente
No es exactamente lo que pidieron, pero me gusta el modo de reloj en vivo de less.js .
En general, simplemente me burlo de cualquier elemento / combinación en cualquier sabor de HTML o XHTML que se requiera manualmente, pero puede crear su propio documento maestro de elementos. Si conecta un segundo monitor (o dos, tres, etc.) para abrir todos los navegadores (o usa una segunda computadora), cualquier cambio que guarde se aplicará en vivo a todos a la vez.
La sintaxis LessCSS se puede usar junto con CSS ordinario, pero es más rápido para trabajar y fácil de aprender (los resultados se pueden convertir en CSS normal después).
Las herramientas como Aviary le permiten tomar fácilmente capturas de pantalla (incluida la automatización del desplazamiento hacia abajo y la costura), que se pueden anotar rápidamente (en línea con enlaces compartibles) o guardar y comparar en otra herramienta (como Photoshop , GIMP , Paint .NET , etc.) superponiéndolos como capas y alterando la transparencia de la de arriba.
Editar:
Si desea automatizar el proceso de captura de pantalla (al guardar el archivo) para que:
entonces puede usar algo como un observador de archivos (disculpe la orientación de Python, hay muchas otras soluciones) con un capturador de pantalla . El procesamiento posterior también se puede automatizar y si usa posiciones de ventana consistentes (un entorno de programa / escritorio puede ayudarlo), el "cromo" alrededor de los navegadores se puede cortar como parte del script.
fuente
w3schools te permite jugar con las reglas HTML y CSS. Simplemente busque el CSS / HTML con el que desea jugar y busque donde dice "Pruébelo usted mismo". Aquí está su
border CSSpágina y aquí está su patio de recreo .fuente
Construyo todas mis páginas en html / css y luego utilizo herramientas webmaster de Firebug o Chrome para agregar / cambiar / experimentar con estilos. Es rápido, simple y temporal, lo cual es excelente para la experimentación. Además, puede trabajar con su propio código en sus propios servidores, lo cual es otra ventaja.
Buzzkill: la parte de UI Developer me advierte que es mejor diseñar una verdadera herramienta de diseño y luego codificar para imitar debido a las diferencias en los navegadores ... solo digo ...
Nota al margen: soy un gran admirador de la interfaz de usuario de Jquery Themeroller. Tal herramienta existe para Themeroller para cambiar los estilos en el lateral. Es posible crear un tema completo para un sitio a través del CSS de Themeroller, luego simplemente alternar entre diferentes temas. Si nunca lo ha probado, realmente puede acelerar la implementación, especialmente si está buscando ese aspecto "brillante" que es tan popular en este momento.
fuente
Aquí tienes: http://www.oswt.co.uk/developments/style_sheet_viewer/
¡Exactamente lo que se requiere en la pregunta!
fuente
No estoy seguro de si eso es lo que solicitó, pero el CSS Zen Garden tiene una página HTML con muchos diseños de CSS. Podría escribir su propio CSS para este sitio, los ejemplos son muy inspiradores.
fuente