¿Existe un sitio que tenga un montón de HTML típico para ver cómo se ve el CSS una vez aplicado?
Es decir, algo lleno de table, a, div, span, p, lo que sea. Vas allí, pegas tu CSS y ves los resultados.
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! ;)
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
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:
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.
Vas allí, pegas tu CSS y ves los resultados.
Aquí tienes: http://www.oswt.co.uk/developments/style_sheet_viewer/
¡Exactamente lo que se requiere en la pregunta!
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.