Czy istnieje witryna z typowym kodem HTML do sprawdzania wyglądu CSS po zastosowaniu?
Znaczy, coś pełne table, a, div, span, p, cokolwiek. Idź tam, wklej swój CSS i zobacz wyniki.
Odpowiedzi:
Wow, ktoś właśnie opublikował to na SO.
To jest właśnie to, co zamówił lekarz: http://jsfiddle.net/
Możesz pisać html, css i javascript i uruchamiać go tam !! Dodatkowo mają już odniesienia do Jquery i innych rzeczy!
Myślę, że Zasada 33 Internetu jest taka, że jeśli chcesz / możesz to sobie wyobrazić! ;)
Właśnie natknąłem się na http://colorschemedesigner.com/ .
Świetnie nadaje się do wybierania kolorów i pokazuje przykładowe strony, aby zobaczyć, jak schemat kolorów wyglądałby na typowej stronie.
Aktualizacja: strona jest teraz http://paletton.com
Nie znam żadnego z nich, ale sam możesz to łatwo skonfigurować. Po prostu utwórz podstawowy dokument HTML ze wszystkimi opisanymi elementami. (W razie potrzeby możesz wygenerować tekst z Lipsum.com .) Następnie połącz z plikiem CSS w nagłówku dokumentu, aby zobaczyć dołączone style. Następnym razem, gdy chcesz przetestować, zmień go, aby wskazywał na inny plik CSS.
Nie jest to dokładnie to, co prosiłeś, ale kocham tryb oglądania na żywo z less.js .
Ogólnie po prostu wykonuję makiety dowolnych elementów / kombinacji w dowolnym formacie HTML lub XHTML, który jest wymagany ręcznie, ale możesz stworzyć własny główny dokument elementów. Jeśli podłączysz drugi monitor (lub dwa, trzy itp.), Aby otworzyć wszystkie przeglądarki (lub użyj drugiego komputera), wszystkie zapisane zmiany zostaną zastosowane na żywo na wszystkich z nich jednocześnie.
Składni LessCSS można używać razem ze zwykłym CSS, ale jest szybszy w pracy i łatwy do odczytania (wyniki można później przekonwertować na normalny CSS).
Narzędzia takie jak Aviary umożliwiają łatwe robienie zrzutów ekranu (w tym automatyzację przewijania w dół i zszywania), które można szybko opisać (on-line z udostępnianymi linkami) lub zapisać i porównać w innym narzędziu (takim jak Photoshop , GIMP , Paint .NET itp.), Nakładając je jako warstwy i zmieniając przezroczystość tego na wierzchu.
Edytować:
Jeśli chcesz zautomatyzować proces zrzutu ekranu (podczas zapisywania pliku), aby:
wtedy możesz użyć czegoś takiego jak obserwator plików (przepraszam za orientację w Pythonie, istnieje wiele innych rozwiązań) z chwytaczem ekranu . Przetwarzanie końcowe można również zautomatyzować, a jeśli używasz spójnych pozycji okna (może to pomóc środowisko programu / pulpitu), „chrome” wokół przeglądarek można odciąć jako część skryptu.
w3schools pozwala bawić się regułami HTML i CSS. Po prostu znajdź CSS / HTML, z którym chcesz grać, i poszukaj tam, gdzie jest napisane: „Wypróbuj sam”. Oto ich border CSSstrona, a tu ich plac zabaw .
Wszystkie strony buduję w html / css, a następnie używam firebug lub chrome webmaster tools do dodawania / zmiany / eksperymentowania ze stylami. Jest szybki, prosty i tymczasowy, co świetnie nadaje się do eksperymentowania. Ponadto możesz pracować z własnym kodem na własnych serwerach, co jest kolejną zaletą.
Buzzkill: część mnie, twórcy interfejsu użytkownika, ostrzega cię, że lepiej jest tworzyć koncepcje w prawdziwym narzędziu do projektowania, a następnie kodować naśladować z powodu różnic w przeglądarkach ... po prostu mówiąc ...
Uwaga dodatkowa - Jestem wielkim fanem UI Themeroller firmy Jquery. Takie narzędzie istnieje, aby Themeroller mógł zmieniać style z boku. Możliwe jest pełne motywowanie strony za pomocą CSS Themerollera, a następnie przełączanie między różnymi motywami. Jeśli jeszcze go nie wypróbowałeś, może naprawdę przyspieszyć wdrożenie, szczególnie jeśli szukasz tak „błyszczącego” wyglądu, który jest teraz tak popularny.
Idź tam, wklej css i zobacz wyniki.
Proszę bardzo: http://www.oswt.co.uk/developments/style_sheet_viewer/
Dokładnie to, co jest wymagane w pytaniu!
Nie jestem pewien, czy o to prosiłeś, ale Zen Garden CSS ma taką stronę HTML z mnóstwem projektów CSS. Możesz napisać własny CSS dla tej strony, przykłady są bardzo inspirujące.