Visionneuse / testeur de style CSS

12

Y a-t-il un site qui a un tas de HTML typique pour voir à quoi ressemble le CSS une fois appliqué?

Je veux dire, quelque chose de plein table, a, div, span, p, peu importe. Vous allez là-bas, collez votre CSS et voyez les résultats.

Homère
la source
Grattez n'importe quelle page de votre choix et modifiez le CSS avec Chrome Developer Tools, FireBug ou votre autre outil de développement préféré.
msanford

Réponses:

4

Wow, quelqu'un vient de publier ceci sur SO.

C'EST exactement ce que le médecin a ordonné: http://jsfiddle.net/

Vous pouvez écrire html, css et javascript et l'exécuter directement là !! De plus, ils ont déjà des références à Jquery et à d'autres trucs!

Je pense que la règle Internet 33 est si vous voulez / imaginez, c'est là-bas! ;)

gideon
la source
1
J'ai vu jsFiddle, mais ce n'est pas ce que je cherche ici. Je cherche quelque chose qui a un site factice, plein de code html typique, que je peux utiliser pour voir à quoi ressemblerait mon CSS. Sur colorschemedesigner.com, vous pouvez simplement cliquer sur "Exemple de page claire" et il vous montre une page Lipsum.
Homer
Je vois. lol je suppose que c'était ce que je cherchais quand je suis tombé sur votre question, donc quand je l'ai trouvée .. j'ai brouillé pour chercher votre question dans mon histoire et l'ai postée ici. J'espère que ça aide quelqu'un ....
gideon
3

Je suis juste tombé sur http://colorschemedesigner.com/ .

Il est idéal pour choisir des couleurs et vous montrera des exemples de pages pour voir à quoi ressemblerait le schéma de couleurs appliqué à une page typique.

Mise à jour: le site est désormais http://paletton.com

Homère
la source
2
Cela ne semble pas être la réponse à votre question.
jeremy
2

Je n'en connais aucun, mais c'est simple à mettre en place. Créez simplement un document HTML de base avec tous les éléments que vous décrivez. (Vous pouvez générer du texte si nécessaire à partir de Lipsum.com .) Ensuite, créez un lien vers un fichier CSS dans la tête du document pour voir vos styles attachés. La prochaine fois que vous souhaitez tester, modifiez-le pour pointer vers un autre fichier CSS.

Chèvre mécontente
la source
2

Pas exactement ce que vous avez demandé, mais j'aime le mode montre en direct de less.js .

En général, je mock juste tous les éléments / combinaisons dans n'importe quelle saveur HTML ou XHTML requise manuellement, mais vous pouvez créer votre propre document maître d'éléments. Si vous branchez un deuxième moniteur (ou deux, trois, etc.) pour ouvrir tous les navigateurs (ou utilisez un deuxième ordinateur), toutes les modifications que vous enregistrez sont appliquées en direct à chacun d'eux en même temps.

La syntaxe LessCSS peut être utilisée avec le CSS ordinaire, mais elle est plus rapide à utiliser et facile à comprendre (les résultats peuvent être convertis en CSS normal par la suite).

Des outils tels que Aviary vous permettent de prendre facilement des captures d'écran (y compris l'automatisation du défilement vers le bas et de l'assemblage), qui peuvent être rapidement annotées (en ligne avec des liens partageables) ou enregistrées et comparées dans un autre outil (comme Photoshop , GIMP , Paint .NET , etc.) en les superposant en tant que couches et en modifiant la transparence de celle du dessus.

Éditer:

Si vous souhaitez automatiser le processus de capture d'écran (lors de l'enregistrement du fichier) afin que:

  • lorsqu'un problème survient, vous avez déjà tout sous la main
  • une image peut être ajoutée au contrôle de version (qui peut également être automatisé lors de l'enregistrement du fichier)
  • vous pouvez vous concentrer sur les activités CSS à la place

alors vous pouvez utiliser quelque chose comme un observateur de fichiers (veuillez excuser l'orientation Python, il existe de nombreuses autres solutions) avec un écran de capture . Le post-traitement peut également être automatisé et si vous utilisez des positions de fenêtre cohérentes (un environnement de programme / bureau peut aider cela) le "chrome" autour des navigateurs peut être coupé dans le cadre du script.

Metalshark
la source
1

w3schools vous permet de jouer avec les règles HTML et CSS. Il suffit de trouver le CSS / HTML avec lequel vous voulez jouer et de chercher où il est dit "Essayez-le par vous-même". Voici leur border CSSpage et leur terrain de jeu .

John Conde
la source
1

Je crée toutes mes pages en html / css, puis j'utilise des outils pour webmasters firebug ou chrome pour ajouter / changer / expérimenter avec des styles. C'est rapide, simple et temporaire, ce qui est idéal pour l'expérimentation. De plus, vous pouvez travailler avec votre propre code sur vos propres serveurs, ce qui est un autre bonus.

Buzzkill: la partie développeur de l'interface utilisateur en moi vous prévient qu'il vaut mieux concevoir dans un véritable outil de conception, puis coder pour imiter en raison des différences dans les navigateurs .... juste dire ...

Note latérale - Je suis un grand fan de l'interface utilisateur de Jquery Themeroller. Un tel outil existe pour Themeroller pour changer de style sur le côté. Il est possible de entièrement thématiser un site via le CSS de Themeroller, puis de basculer simplement entre différents thèmes. Si vous ne l'avez jamais essayé, cela peut vraiment accélérer le déploiement, surtout si vous recherchez ce look "brillant" qui est si populaire en ce moment.

bpeterson76
la source
0

Vous y allez, collez votre css et voyez les résultats.

C'est parti: http://www.oswt.co.uk/developments/style_sheet_viewer/

Exactement ce qui est requis dans la question!

Jeremy
la source
Plutôt cool, mais pas tout à fait ce que j'avais en tête. Ce site génère du HTML pour correspondre au CSS. C'est bien parce qu'il vous montrera tous vos styles en action, mais il ne montre pas à quoi il ressemblerait dans un site `` simulé ''. Quelque chose comme vous voyez sur colorschemedesigner.com lorsque vous cliquez sur le lien "Exemple de page lumineuse"
Homer
0

Je ne sais pas si c'est ce que vous avez demandé, mais le CSS Zen Garden a une telle page HTML avec de nombreuses conceptions CSS. Vous pouvez écrire votre propre CSS pour ce site, les exemples sont très inspirants.

martinstoeckli
la source