Esiste un sito là fuori che ha un sacco di HTML tipico per vedere come appare il CSS una volta applicato?
Voglio dire, qualcosa pieno di table, a, div, span, p, qualsiasi cosa. Ci vai, incolla il tuo CSS e vedi i risultati.
Risposte:
Caspita, qualcuno l'ha appena pubblicato su SO.
È esattamente ciò che il medico ha ordinato: http://jsfiddle.net/
Puoi scrivere html, css e javascript ed eseguirlo direttamente lì !! Inoltre hanno già riferimenti a Jquery e altre cose!
Penso che la Regola 33 di Internet sia se la vuoi / immagini, è là fuori! ;)
Mi sono appena imbattuto in http://colorschemedesigner.com/ .
È ottimo per scegliere i colori e ti mostrerà pagine di esempio per vedere come sarebbe la combinazione di colori applicata a una pagina tipica.
Aggiornamento: il sito Web è ora http://paletton.com
Non ne conosco nessuno, ma questo è semplice da configurare. Crea semplicemente un documento HTML di base con tutti gli elementi che descrivi. (Se necessario, puoi generare testo da Lipsum.com ). Quindi collega a un file CSS nell'intestazione del documento per vedere i tuoi stili allegati. La prossima volta che si desidera eseguire il test, modificarlo in modo che punti a un altro file CSS.
Non è esattamente quello che hai chiesto, ma mi piace il modo di guardare dal vivo di less.js .
Generalmente ho semplicemente simulato elementi / combinazioni in qualsiasi tipo di HTML o XHTML sia richiesto manualmente, ma è possibile creare il proprio documento master di elementi. Se si collega un secondo monitor (o due, tre, ecc.) Per aprire tutti i browser (o utilizzare un secondo computer), tutte le modifiche salvate vengono applicate in diretta a tutti contemporaneamente.
La sintassi LessCSS può essere utilizzata insieme al normale CSS ma è più veloce da lavorare e facile da raccogliere (i risultati possono essere convertiti in CSS normale in seguito).
Strumenti come Aviary ti consentono di scattare facilmente schermate (compresa l'automazione di scorrimento verso il basso e cuciture), che possono essere rapidamente annotate (on-line con collegamenti condivisibili) o salvate e confrontate in un altro strumento (come Photoshop , GIMP , Paint .NET , ecc.) Sovrapponendoli come livelli e modificando la trasparenza di quello in alto.
Modificare:
Se si desidera automatizzare il processo della schermata (al salvataggio del file) in modo che:
quindi puoi usare qualcosa come un file watcher (scusa l'orientamento di Python, ci sono molte altre soluzioni) con uno screen grabber . L'elaborazione post può anche essere automatizzata e se usi posizioni della finestra coerenti (un programma / ambiente desktop può essere d'aiuto), il "chrome" attorno ai browser può essere eliminato come parte dello script.
w3schools ti permette di giocare con le regole HTML e CSS. Trova il CSS / HTML con cui vuoi giocare e cerca dove dice "Provalo tu stesso". Ecco la loro border CSSpagina ed ecco il loro parco giochi .
Costruisco tutte le mie pagine in html / css, quindi uso gli strumenti webmaster di firebug o chrome per aggiungere / cambiare / sperimentare gli stili. È rapido, semplice e temporaneo, il che è ottimo per la sperimentazione. Inoltre, puoi lavorare con il tuo codice sui tuoi server, che è un altro vantaggio.
Buzzkill: lo sviluppatore dell'interfaccia utente parte di me ti avverte che è meglio concepire in un vero strumento di progettazione e quindi codificare per imitare a causa delle differenze nei browser .... solo dicendo ...
Nota a margine: sono un grande fan di Themeroller dell'interfaccia utente di Jquery. Un simile strumento esiste per Themeroller per cambiare stile sul lato. È possibile creare un tema completo di un sito tramite CSS di Themeroller, quindi alternare tra diversi temi. Se non l'hai mai provato, può davvero accelerare la distribuzione, soprattutto se stai cercando quel look "lucido" che è così popolare in questo momento.
Ci vai, incolla il tuo css e vedi i risultati.
Ecco qua: http://www.oswt.co.uk/developments/style_sheet_viewer/
Esattamente quello che è richiesto nella domanda!
Non sono sicuro che sia quello che hai chiesto, ma il CSS Zen Garden ha una pagina HTML con un sacco di disegni CSS. Potresti scrivere il tuo CSS per questo sito, gli esempi sono molto stimolanti.