it-swarm-eu.dev

Prohlížeč / tester stylu CSS

Existuje nějaký web, který má spoustu typického HTML pro zobrazení toho, jak CSS vypadá, jakmile se jednou použije?

Myslím, něco plného table, a, div, span, p, cokoli. Jdete tam, vložte do CSS a podívejte se na výsledky.

12
Homer

Jen jsem narazil http://colorschemedesigner.com/ .

Je to skvělé pro výběr barev a ukáže vám vzorové stránky, abyste viděli, jak by vypadalo barevné schéma aplikované na typickou stránku.

Aktualizace: web je nyní http://paletton.com

3
Homer

Páni, někdo to právě zveřejnil na SO.

IS přesně to, co doktor nařídil: http://jsfiddle.net/

Můžete psát html, css a javascript a běžet tam přímo !! Navíc již mají odkazy na Jquery a další věci!

Myslím, že pravidlo Internet 33 je, pokud to chcete/představte si, je to tam venku! ;)

4
gideon

Nevím o žádném, ale je snadné se postavit. Jednoduše vytvořte základní dokument HTML se všemi popsanými prvky. (V případě potřeby můžete vygenerovat text z Lipsum.com .) Poté odkazem na soubor CSS v hlavě dokumentu zobrazíte připojené styly. Až budete chtít testovat, změňte jej tak, aby ukazoval na jiný soubor CSS.

2
DisgruntledGoat

Ne přesně to, co jste požadovali, ale mám rád režim živého sledování less.js .

Obecně jen zesměšňuji všechny prvky/kombinace v jakékoli chuti HTML nebo XHTML, která je vyžadována ručně, ale můžete si vytvořit svůj vlastní hlavní dokument prvků. Pokud připojíte druhý monitor (nebo dva, tři atd.) A otevřete všechny prohlížeče (nebo použijete druhý počítač), všechny změny, které uložíte, se na všechny aplikují okamžitě.

Syntaxe LessCSS lze použít spolu s běžnými CSS, ale rychlejší práce s nimi a snadné vyzvednutí (výsledky lze poté převést na normální CSS).

Nástroje jako Aviary vám umožňují snadno pořizovat snímky obrazovky (včetně automatizace posouvání dolů a prošívání), které lze rychle anotovat (on-line s odkazy, které lze sdílet) nebo je uložit a porovnat v jiném nástroji ( jako je Photoshop , GIMP , Paint.NET atd.) jejich překrýváním jako vrstev a změnou průhlednosti té nahoře.

Upravit:

Pokud chcete automatizovat proces snímání obrazovky (při uložení souboru), aby:

  • když nastane problém, už máte všechno po ruce
  • obrázek lze přidat k řízení verzí (který lze také automatizovat při ukládání souborů)
  • můžete se soustředit na CSS místo periferních aktivit

pak můžete použít něco jako prohlížeč souborů (prosím omluvte orientaci Python, existuje spousta dalších řešení) s grabber obrazovky . Zpracování příspěvků lze také automatizovat a pokud používáte konzistentní pozice oken (prostředí programu/plochy to může pomoci), může být jako součást skriptu „chrom“ kolem prohlížečů odříznut.

2
Metalshark

program w3schools vám umožňuje hrát si s pravidly HTML a CSS. Najděte CSS/HTML, se kterým chcete hrát, a vyhledejte, kde se říká: „Vyzkoušejte to sami“. Zde je jejich border CSS stránka a tady je jejich hřiště .

1
John Conde

Všechny své stránky buduji ve formátu html/css a poté pomocí nástrojů firebug nebo chrome webmaster přidám/změní/experimentuji se styly. Je to rychlé, jednoduché a dočasné, což je skvělé pro experimentování. Navíc můžete pracovat s vlastním kódem na svých vlastních serverech, což je další bonus.

Buzzkill: část UI pro vývojáře mě varuje, že je lepší koncept ve skutečném konstrukčním nástroji a pak kód napodobovat kvůli rozdílům v prohlížečích ... stačí říci ...

Vedlejší poznámka - Jsem velkým fanouškem UI Themerollera Jqueryho. Takový nástroj pro Themerollera existuje pro změnu stylů na straně. Prostřednictvím Themerollerova CSS je možné zcela motivovat web a poté jednoduše přepínat mezi různými tématy. Pokud jste to ještě nikdy nezkusili, může to skutečně urychlit nasazení, zejména pokud hledáte ten „lesklý“ vzhled, který je právě teď tak populární.

1
bpeterson76

Jdete tam, vložte do CSS a podívejte se na výsledky.

Zde je to: http://www.oswt.co.uk/developments/style_sheet_viewer/

Přesně to, co je v otázce vyžadováno!

0
jeremy

Nejste si jisti, zda jste o to požádali, ale CSS Zen Garden má takovou stránku HTML se spoustou návrhů CSS. Pro tento web byste mohli napsat vlastní CSS, příklady jsou velmi inspirativní.

0
martinstoeckli