CSS Style Viewer / Tester

Gibt es eine Website, die eine Menge typisches HTML enthält, um zu sehen, wie das CSS aussieht, wenn es einmal angewendet wurde?

Ich meine, etwas voller table, a, div, span, p, was auch immer. Sie gehen dorthin, fügen Ihr CSS ein und sehen die Ergebnisse.

Wow, jemand hat das gerade auf SO gepostet.

Es ist genau das, was der Arzt bestellt hat: http://jsfiddle.net/

Sie können HTML, CSS und Javascript schreiben und es direkt dort laufen lassen !! Außerdem haben sie bereits Verweise auf Jquery und andere Sachen!

Ich denke, Internet-Regel 33 ist, wenn Sie es wollen / sich vorstellen, es ist da draußen! ;)

Ich bin gerade auf http://colorschemedesigner.com/ gestoßen .

Es ist ideal für die Auswahl von Farben und zeigt Ihnen Beispielseiten, um zu sehen, wie das Farbschema für eine typische Seite aussehen würde.

Update: Die Website ist jetzt http://paletton.com

Ich kenne keine, aber das ist einfach selbst einzurichten. Erstellen Sie einfach ein einfaches HTML-Dokument mit allen von Ihnen beschriebenen Elementen. (Sie können bei Bedarf Text von Lipsum.com generieren .) Verknüpfen Sie anschließend eine CSS-Datei im Dokumentenkopf, um Ihre Formatvorlagen als Anhang anzuzeigen . Wenn Sie das nächste Mal testen möchten, ändern Sie es so, dass es auf eine andere CSS-Datei verweist.

Nicht genau das, was Sie gefragt, aber ich liebe den Live - Watch - Modus von less.js .

Im Allgemeinen verspotte ich nur Elemente / Kombinationen in der von Hand gewünschten HTML- oder XHTML-Variante, aber Sie können Ihr eigenes Masterdokument mit Elementen erstellen. Wenn Sie einen zweiten Monitor (oder zwei, drei usw.) anschließen, um alle Browser zu öffnen (oder einen zweiten Computer verwenden), werden alle Änderungen, die Sie speichern, sofort auf alle angewendet.

LessCSS-Syntax kann neben normalem CSS verwendet werden, ist jedoch schneller zu handhaben und einfach zu erlernen (die Ergebnisse können anschließend in normales CSS konvertiert werden).

Mit Tools wie Aviary können Sie auf einfache Weise Screenshots erstellen (einschließlich automatisiertem Scrollen und Zusammenfügen), die schnell mit Anmerkungen versehen (online mit gemeinsam nutzbaren Links) oder in einem anderen Tool (z. B. Photoshop , GIMP , Paint ) gespeichert und verglichen werden können .NET , etc) durch Überlagern als Ebenen und Ändern der Transparenz der obersten Ebene.

Bearbeiten:

Wenn Sie den Screenshot-Vorgang (beim Speichern von Dateien) automatisieren möchten, gehen Sie wie folgt vor:

• Wenn ein Problem auftritt, haben Sie bereits alles zur Hand
• Ein Bild kann zur Versionskontrolle hinzugefügt werden (was auch beim Speichern von Dateien automatisiert werden kann)
• Sie können sich stattdessen auf die CSS-Aktivitäten konzentrieren

Dann können Sie so etwas wie einen Datei-Beobachter (bitte entschuldigen Sie die Python-Orientierung, es gibt viele andere Lösungen) mit einem Bildschirm-Grabber verwenden . Die Nachbearbeitung kann auch automatisiert werden. Wenn Sie konsistente Fensterpositionen verwenden (eine Programm- / Desktopumgebung kann dies unterstützen), kann das "Chrom" um Browser als Teil des Skripts abgeschnitten werden.

Mit w3schools können Sie mit HTML- und CSS-Regeln herumspielen. Suchen Sie einfach das CSS / HTML, mit dem Sie spielen möchten, und suchen Sie dort, wo "Try it for yourself" steht. Hier ist ihre border CSSSeite und hier ist ihr Spielplatz .

Ich erstelle alle meine Seiten in HTML / CSS und benutze dann Firebug- oder Chrome-Webmaster-Tools, um Stile hinzuzufügen / zu ändern / zu experimentieren. Es ist schnell, einfach und vorübergehend, was sich hervorragend zum Experimentieren eignet. Außerdem können Sie mit Ihrem eigenen Code auf Ihren eigenen Servern arbeiten, was ein weiterer Bonus ist.

Buzzkill: Der UI-Entwicklerteil von mir warnt Sie, dass es besser ist, ein echtes Designtool zu entwickeln und dann aufgrund von Unterschieden in den Browsern Code zu imitieren.

Randnotiz - Ich bin ein großer Fan von Jquery's UI Themeroller. Ein solches Werkzeug gibt es für Themeroller, um Stile auf der Seite zu ändern. Es ist möglich, eine Site vollständig über Themerollers CSS zu gestalten und dann einfach zwischen verschiedenen Themen zu wechseln. Wenn Sie es noch nie ausprobiert haben, kann es die Bereitstellung erheblich beschleunigen, insbesondere, wenn Sie nach dem "Hochglanz" -Look suchen, der derzeit so beliebt ist.

Du gehst dorthin, fügst dein CSS ein und siehst die Ergebnisse.

Hier gehts: http://www.oswt.co.uk/developments/style_sheet_viewer/

Genau das, was in der Frage benötigt wird!

Ich bin mir nicht sicher, ob Sie danach gefragt haben, aber der CSS Zen Garden hat eine solche HTML-Seite mit vielen CSS-Designs. Sie könnten Ihr eigenes CSS für diese Site schreiben, die Beispiele sind sehr inspirierend.