Raspe qualquer página desejada e edite o CSS com as Ferramentas do desenvolvedor do Chrome, o FireBug ou sua outra ferramenta de desenvolvimento favorita.
Eu vi o jsFiddle, mas não é o que estou procurando aqui. Estou procurando por algo que tenha um site falso, cheio de código html típico, que eu possa usar para ver como seria meu CSS. No colorschemedesigner.com, você pode simplesmente clicar em "Exemplo de página leve" e ele exibe uma página Lipsum.
Homer
Entendo. lol Eu acho que era o que eu estava procurando quando me deparei com sua pergunta, então, quando a encontrei ... me esforcei para procurar sua pergunta na minha história e a postei aqui. Espero que ajude alguém ....
Não conheço nenhum, mas é simples de se configurar. Basta criar um documento HTML básico com todos os elementos que você descreve. (Você pode gerar texto, se necessário, em Lipsum.com .) Em seguida, vincule a um arquivo CSS no cabeçalho do documento para ver seus estilos anexados. Da próxima vez que você quiser testar, altere-o para apontar para outro arquivo CSS.
Não é exatamente o que você pediu, mas eu adoro o modo de relógio ao vivo de less.js .
Geralmente eu apenas mocko quaisquer elementos / combinações em qualquer tipo de HTML ou XHTML necessário manualmente, mas você pode criar seu próprio documento mestre de elementos. Se você conectar um segundo monitor (ou dois, três etc.) para abrir todos os navegadores (ou usar um segundo computador), todas as alterações salvas serão aplicadas ao vivo a todos eles de uma só vez.
A sintaxe LessCSS pode ser usada juntamente com o CSS comum, mas é mais rápido de trabalhar e fácil de pegar (os resultados podem ser convertidos em CSS normal posteriormente).
Ferramentas como o Aviary permitem tirar facilmente capturas de tela (incluindo a automação de rolagem para baixo e costura), que podem ser rapidamente anotadas (on-line com links compartilháveis) ou salvas e comparadas em outra ferramenta (como Photoshop , GIMP , Paint .NET , etc), sobrepondo-os como camadas e alterando a transparência da parte superior.
Editar:
Se você deseja automatizar o processo de captura de tela (no salvamento de arquivo) para que:
quando ocorre um problema, você já tem tudo à mão
uma imagem pode ser adicionada ao controle de versão (que também pode ser automatizada ao salvar o arquivo)
você pode se concentrar nas atividades de periferia do CSS
então você pode usar algo como um observador de arquivos (desculpe a orientação do Python, existem muitas outras soluções) com um captador de tela . O pós-processamento também pode ser automatizado e, se você usar posições consistentes da janela (um ambiente de programa / desktop pode ajudar nisso), o "chrome" nos navegadores poderá ser cortado como parte do script.
O w3schools permite que você brinque com as regras HTML e CSS. Apenas encontre o CSS / HTML com o qual deseja jogar e procure onde está escrito: "Experimente você mesmo". Aqui está a border CSSpágina deles e o playground deles .
Eu construo todas as minhas páginas em html / css e depois uso as ferramentas de webmaster do firebug ou chrome para adicionar / alterar / experimentar estilos. É rápido, simples e temporário, o que é ótimo para experimentação. Além disso, você pode trabalhar com seu próprio código em seus próprios servidores, o que é outro bônus.
Buzzkill: a parte de mim de desenvolvedor de interface do usuário adverte que é melhor conceber em uma verdadeira ferramenta de design e depois codificar para imitar devido a diferenças nos navegadores .... apenas dizendo ...
Nota lateral - Sou um grande fã do UI Themeroller do Jquery. Essa ferramenta existe para o Themeroller alterar estilos ao lado. É possível criar um tema inteiramente em um site via CSS do Themeroller, e simplesmente alternar entre diferentes temas. Se você nunca experimentou, pode realmente acelerar a implantação, especialmente se você estiver procurando pela aparência "brilhante" que é tão popular no momento.
Muito legal, mas não exatamente o que eu tinha em mente. Este site gera html para corresponder ao css. Isso é legal porque mostra todos os seus estilos em ação, mas não mostra como seria em um site 'falso'. Algo como você vê em colorschemedesigner.com quando clica no link "Exemplo de página leve"
Homer
0
Não tenho certeza se foi o que você pediu, mas o CSS Zen Garden possui uma página HTML com muitos designs CSS. Você pode escrever seu próprio CSS para este site, os exemplos são muito inspiradores.
Respostas:
Uau, alguém acabou de postar isso no SO.
É exatamente o que o médico ordenou: http://jsfiddle.net/
Você pode escrever html, css e javascript e executá-lo diretamente lá !! Além disso, eles já têm referências ao Jquery e outras coisas!
Acho que a Regra 33 da Internet é se você quiser / imaginar, está lá fora! ;)
fonte
Eu apenas tropecei em http://colorschemedesigner.com/ .
É ótimo para escolher cores e mostrará páginas de exemplo para ver como seria o esquema de cores aplicado a uma página típica.
Atualização: o site agora está http://paletton.com
fonte
Não conheço nenhum, mas é simples de se configurar. Basta criar um documento HTML básico com todos os elementos que você descreve. (Você pode gerar texto, se necessário, em Lipsum.com .) Em seguida, vincule a um arquivo CSS no cabeçalho do documento para ver seus estilos anexados. Da próxima vez que você quiser testar, altere-o para apontar para outro arquivo CSS.
fonte
Não é exatamente o que você pediu, mas eu adoro o modo de relógio ao vivo de less.js .
Geralmente eu apenas mocko quaisquer elementos / combinações em qualquer tipo de HTML ou XHTML necessário manualmente, mas você pode criar seu próprio documento mestre de elementos. Se você conectar um segundo monitor (ou dois, três etc.) para abrir todos os navegadores (ou usar um segundo computador), todas as alterações salvas serão aplicadas ao vivo a todos eles de uma só vez.
A sintaxe LessCSS pode ser usada juntamente com o CSS comum, mas é mais rápido de trabalhar e fácil de pegar (os resultados podem ser convertidos em CSS normal posteriormente).
Ferramentas como o Aviary permitem tirar facilmente capturas de tela (incluindo a automação de rolagem para baixo e costura), que podem ser rapidamente anotadas (on-line com links compartilháveis) ou salvas e comparadas em outra ferramenta (como Photoshop , GIMP , Paint .NET , etc), sobrepondo-os como camadas e alterando a transparência da parte superior.
Editar:
Se você deseja automatizar o processo de captura de tela (no salvamento de arquivo) para que:
então você pode usar algo como um observador de arquivos (desculpe a orientação do Python, existem muitas outras soluções) com um captador de tela . O pós-processamento também pode ser automatizado e, se você usar posições consistentes da janela (um ambiente de programa / desktop pode ajudar nisso), o "chrome" nos navegadores poderá ser cortado como parte do script.
fonte
O w3schools permite que você brinque com as regras HTML e CSS. Apenas encontre o CSS / HTML com o qual deseja jogar e procure onde está escrito: "Experimente você mesmo". Aqui está a
border CSSpágina deles e o playground deles .fonte
Eu construo todas as minhas páginas em html / css e depois uso as ferramentas de webmaster do firebug ou chrome para adicionar / alterar / experimentar estilos. É rápido, simples e temporário, o que é ótimo para experimentação. Além disso, você pode trabalhar com seu próprio código em seus próprios servidores, o que é outro bônus.
Buzzkill: a parte de mim de desenvolvedor de interface do usuário adverte que é melhor conceber em uma verdadeira ferramenta de design e depois codificar para imitar devido a diferenças nos navegadores .... apenas dizendo ...
Nota lateral - Sou um grande fã do UI Themeroller do Jquery. Essa ferramenta existe para o Themeroller alterar estilos ao lado. É possível criar um tema inteiramente em um site via CSS do Themeroller, e simplesmente alternar entre diferentes temas. Se você nunca experimentou, pode realmente acelerar a implantação, especialmente se você estiver procurando pela aparência "brilhante" que é tão popular no momento.
fonte
Aqui está: http://www.oswt.co.uk/developments/style_sheet_viewer/
Exatamente o que é necessário na pergunta!
fonte
Não tenho certeza se foi o que você pediu, mas o CSS Zen Garden possui uma página HTML com muitos designs CSS. Você pode escrever seu próprio CSS para este site, os exemplos são muito inspiradores.
fonte