15 Świetnych generatorów HTML5 i CSS3
HTML5 i CSS3 to świetne języki do rozpoczęcia nauki i zawsze uważałem, że jednym z najlepszych sposobów rozpoczęcia nauki jest po prostu zanurkowanie i manipulowanie kodem. Jak zapewne wiesz, w tym miejscu wkraczają generatory. Są świetnym sposobem na wygenerowanie kodu, zabawę i naukę.
Co więcej, są one niezwykle przydatne, ponieważ często jako programista lub projektant zauważamy, że robimy różne rzeczy w kółko. Generatory mogą zdjąć tę krawędź i robić za każdym razem te małe rzeczy.
Jako przykład mam fragment kodu ekspandera tekstu, który tworzy szablon HTML5, o którym pisałem tutaj . Teraz ekspander tekstu jest świetny, ale nie rozwiązuje wszystkich potrzeb, aw tym przypadku istnieje duże zapotrzebowanie na generatory, więc poświęciłem czas, aby znaleźć 20 moich ulubionych i opisać, dlaczego je lubię.
Powiem, że większość tej listy skupi się na generatorach CSS3, ponieważ są one bardziej pożądane niż generatory HTML5, a dowiemy się, dlaczego. Uwaga: kliknij obrazy, aby otworzyć strony.
Generatory CSS3
Jest trochę negatywna konotacja, jeśli chodzi o generatory, i muszę powiedzieć, że jako projektant i programista nie ma nic negatywnego w użyciu. To ogromna oszczędność czasu i szczerze mówiąc znam trzech programistów, którzy napisali swoje własne generatory tylko dlatego, że chcieli pomóc społeczności. Pamiętaj więc, że nie jest tak, że używasz tabu stworzonego przez AOL; są to bardzo naturalne i organiczne generatory, które powstały tak, jak ich potrzebowaliśmy. Dlaczego więc nie podzielić się częścią bogactwa? Przejdźmy przez kilka moich ulubionych i dlaczego możesz się nimi cieszyć.
Generatory ogólne
Ta sekcja skupi się na generatorach, które zajmują się szerokim spektrum potrzeb i zastosowań. Obejmują one prawie wszystko, czego można potrzebować lub chcą w generatorze, ale ze względu na swoją naturę mogą być gorsze pod względem szczegółów. Właśnie dlatego będę dawać tak wiele opcji w dalszej części tego artykułu dla konkretnych typów.
CSS3.me
To jeden z dokładnych generatorów, o których mówiłem. Ten został stworzony przez jednego z moich ulubionych projektantów, Eric Hoffman i to jest niesamowite. Bardzo prosty, minimalistyczny i stylowy, ale jednocześnie bardzo funkcjonalny. Daje ci możliwość zmiany i ustawienia promienia obramowania, cienia, gradientu i krycia - jest całkiem funkcjonalny.
Uwaga: Spójrz na stronę Erica; to doskonały przykład mobilnego pierwszego projektu. Jest także projektantem w Zendesk , więc wyślij mu trochę miłości, jeśli kiedykolwiek cieszyłeś się tym produktem.
CSS3 Maker
Często ludzie znajdą generatory, które kochają i trzymają się ich. I dokładnie tak się stało z klientem, z którym pracowałem wcześniej w odniesieniu do tego generatora. Był absolutnie zakochany w tym i widzę, dlaczego - z pewnością jest funkcjonalny. Może nie jest to najpiękniejsza rzecz, jaką kiedykolwiek stworzono, ale wydaje się, że ma wszystkie dzwonki i gwizdy.
Możesz wykonać pracę @ font-face, animację, cienie na ciele, cienie tekstu, rotację tekstu, przejścia, gradienty, promień obramowania i wiele więcej. To jest ta, którą zazwyczaj zakładam, ale rzadko używam po prostu ze względu na to, jak dobrze robią to małe generatory w każdej z ich kategorii. Ale jest to z pewnością dobry generator, który można wypróbować, jeśli go potrzebujesz i nie lubisz przeskakiwać do kilku różnych.
Generator CSS3
To kolejny dobry ogólny, który zapewnia dużą funkcjonalność. Podoba mi się ten, ponieważ ma ładne i łatwe rozwijanie i łatwą w użyciu funkcjonalność. Projekt jest również całkiem niezły. Oferuje również niezłą funkcjonalność rozmiaru pudełka. Ten oferuje wielką zdolność do wykonywania następujących czynności: promień obramowania, cień pola, cień tekstu, RGBA, wiele kolumn, rozmiar boksu, kontur, przejścia, transformacje, gradienty selektorów. Myślę, że to jeden z moich ulubionych, ponieważ projekt i interfejs są tak czyste. Zwykle używam tego, gdy zapomnę o cssmakerze.
Generatory przycisków
CSS3-Tricks Button Maker
Jeden z pierwszych twórców guzików, które zobaczyłem w ciągu dnia, naprawdę mnie zmartwił. Był bardzo liniowy, nie miał do tego interfejsu (jak na ironię) i ogólnie był potwornie zaprojektowanym produktem. Na marginesie, będę mówił o czymś podobnym, ale na razie pokażę jednego, na którym znalazłem css3tricks , i jest naprawdę ładny.
Jednym z kluczowych punktów odniesienia jest fakt, że prawie całkowicie można go kontrolować za pomocą suwaka "przeciągnij i upuść", co jest naprawdę miłe. Poczekaj, aż będziesz musiał wprowadzić wszystko ręcznie za pomocą klawiatury, a będziesz żałować, że nie masz dobrego suwaka przeciągania. Na koniec, CSS3 Tricks to wspaniała strona z mnóstwem dobrze zorganizowanych i przemyślanych treści, które wszyscy chcielibyście sprawdzić.
CSS3 Button.net
A teraz dochodzimy do generatora, o którym mówiłem. Być może brakuje projektu, ale oferuje on o wiele większy wybór niż poprzedni, co jest ironicznie często takie, jak działa. Czasami wolisz łatwość użycia, a czasami potrzebujesz poważnego wyboru, jeśli chodzi o generatory, a te dwie ostatnie naprawdę trafiły w oba te punkty.
Ten oferuje możliwość dodawania wielu cieni tekstu, cieni wewnętrznych, obramowania i kolorów czcionek, podczas gdy ostatni naprawdę nie wchodził w tak wiele szczegółów. Na początku może się to wydawać trudne, ale dostaniesz je, jeśli będziesz grał z nim przez kilka minut. Uważam, że jest to najbardziej przydatne, jeśli jesteś przyzwyczajony do interfejsu użytkownika systemu Windows, i dlatego mam klientów powiedzieć mi, że był ich ulubionym, ponieważ utknęli na XP od lat i nie wiem nic lepszego. A teraz jestem pewien, że niektórzy z was zastanawiają się, ale szczerze mówiąc, jak to idzie - niektórzy klienci chcą linków do generatorów, aby uczyć się dla siebie po wykonaniu na nich wrażenia. Zazwyczaj łączę je z Lynda , TeamTreehouse i kilka z tych generatorów na dobrą miarę.
Generator przycisków CSS3
To jest naprawdę zabawne. Daje ci jeden wielki przycisk do manipulowania, który jest również w radowym retro kolorze. Następnie można manipulować cieniem, obramowaniem, kolorem, a co za tym idzie, można edytować kursor myszy. Podoba mi się ten, ponieważ znalazłem go jakiś czas temu, kiedy po raz pierwszy dostałem się do CSS i naprawdę dało mi to pojęcie o tym, co potrafi. Suwaki "przeciągnij i upuść" są świetne dla osób, które są nowicjuszami w danym języku, ponieważ możesz natychmiast zobaczyć, co możesz zrobić. Teraz powiem, że już nie używam tego szczególnie - w świetle innych, które się pojawiły, ale jest to wspaniałe wspomnienie.
Generatory obramowania i promienia
Border-Image
Nic nie pobije border-image.com, jeśli chodzi o zrobienie określonego obrazu, a następnie jego skopiowanie w celu znalezienia odpowiedniego stylu granicznego. Upewnij się, że nie naruszasz praw autorskich i używaj cudzego obrazu bez podania źródła.
Ale powiedzmy, że narysowałeś strzałkę lub trójkąt i chcesz znaleźć generator, który będzie go powtarzał na całej stronie, a nawet na granicy elementu. Cóż, nic nie jest lepsze niż ta strona, jeśli chodzi o tę potrzebę. Możesz manipulować przesunięciem, rozmiarem i powtarzaniem obrazu.
Zaraz po pojawieniu się na stronie zobaczysz przykładowy obraz, który załadował, ale jest on o wiele bardziej przydatny niż ten obraz. Często używam go do projektów w tle, które chcę powtórzyć i / lub zobaczę, jak będzie wyglądać naprawdę szybko, zanim faktycznie skopiuję całe tło w Photoshopie. Możesz go użyć do wszystkiego, co dotyczy powtarzających się obrazów.
Promień graniczny
Jest to świetne i minimalne narzędzie, które często uważam za bardzo praktyczne. Dzięki temu wystarczy ustawić ilość zaokrąglonej krawędzi, jaką chcesz umieścić na każdym rogu. Bardzo praktyczny, bardzo prosty. A następnie po prostu sprawdź, jaki rodzaj prefiksu przeglądarki chcesz uwzględnić, i rozkwitaj. To jest piękny interfejs użytkownika w całej szczerości. Powinny być testy na kursach informatycznych, gdzie wszystko, co robisz, to próbować wymyślić coś tak prostego i funkcjonalnego, jak to jest.
Generatory gradientów CSS3
Color Zilla Gradient Editor
To jest zapowiadane jako ostateczny edytor gradientów CSS3, i na dobre prawo. W rzeczywistości jest tak wspaniale, że jest to jedyny edytor gradientów, który będę tutaj. Ma mnóstwo funkcji i jest bardzo łatwy w użyciu. Po prostu przeciągnij wokół czarnych i niebieskich ołówków i szybko zobaczysz, co robią. Tworzą także edytor przeglądarki Chrom lub Firefox jest to bardzo przydatne dla projektantów pracujących w Internecie. Pamiętaj też, aby bawić się z gotowymi ustawieniami, ponieważ często są one wystarczająco dobre - każdy, kto je wybrał, wykonał świetną robotę.
Typograficzne generatory / edytory
@fontface Generator
To naprawdę interesujący produkt. To, co robi, umożliwia przesyłanie czcionek wybranych z Internetu lub dostępnych na komputerze, a następnie udostępnia gotowy plik gotowy do pracy w Internecie. Masz więcej niż jedną rzecz, dostajesz kilka rzeczy. Otrzymasz właściwości CSS dla @ font-face, biorąc pod uwagę wybraną czcionkę, oraz plik HTML, który wyświetla czcionkę i jej wiele zastosowań. Jest to naprawdę świetne narzędzie do sprawdzenia pełnego potencjału czcionki, jeśli nie jesteś do końca pewny, zwłaszcza jeśli nie masz czasu na wygenerowanie całej witryny z tą czcionką przed podjęciem decyzji.
Odwróć generator CSS3
CSS3 Proszę
To naprawdę fascynujący produkt. Zasadniczo to, co robi, to to, że daje zestaw pudełek i cały CSS, a następnie daje możliwość włączania i wyłączania sekcji, aby zobaczyć, co robią. Więc możesz zasadniczo odwrócić inżynierię CSS3, aby dowiedzieć się, co robi, a następnie możesz zobaczyć, co robisz. To świetny sposób na nauczenie się CSS3, jeśli jesteś zainteresowany, ale myślę, że generatory są nieco zbyt skomplikowane.
Generatory cienia CSS3
Webestools Shadow Generator
Bardzo lubię ten generator cieni, ponieważ wnika on w szczegóły i głębię cieni, których inne generatory po prostu nie robią. Może nie wygląda jak najlepiej zaprojektowany produkt w historii, ale z pewnością jest niesamowity. Ma wbudowane cienie, początkowe cienie i możliwość manipulowania przesunięciami, ustawiania kolorów i robić prawie wszystko, co można zrobić z kodem - ale zamiast tego z ładnym paskiem przeciągania. Och, jak ja uwielbiam pasek do przeciągania. Sprawdź to, jeśli chcesz zobaczyć ogólnie, jak może wyglądać twój pomysł cienia, zanim go skasujesz.
Generatory HTML5
Generatory HTML5 są trudne do zdobycia, a powodem tego jest prawdopodobnie to, że są świetne Kaseta do płyty HTML5 jest. Nie będziemy o tym rozmawiać, ponieważ nie jest to konkretnie generator, więc podsumuję to tutaj: Jest to w zasadzie szablon HTML5 już wypełniony i gotowy do pracy, więc sprawdź go, jeśli nie widziałeś tego. To naprawdę niesamowite. Wiele osób używa go jako szablonu startowego dla swoich witryn i nie bez powodu. Teraz wróć do generatorów. Znalezienie dobrej jakości jest w rzeczywistości dość trudne, ale udało mi się znaleźć tu kilka, które pokażę - a następnie mam kilka bardziej ogólnych, które dotykają wszystkich tematów w tym artykule.
Shikiryu HTML5 Generator
Generator HTML5 Shikiryu jest dużo bardziej złożony. Możesz dodać funkcje, które pozwalają ci robić rzeczy wewnątrz Blueprint (mixins, etc) i fantazyjne - więc jest to całkiem przydatne. Podoba mi się, ponieważ jest nieco bardziej semantyczny niż inne opcje, a jednocześnie pozwala na dodanie naprawdę popularnych aplikacji firm trzecich, które ludzie lubią używać.
Przejdź na generator HTML5
To interesujący generator. To, co robi, pozwala wygenerować szybkie i łatwe ramy dla witryn budowlanych, ale w odróżnieniu od HTML5 Boilerplate, pozwala nam wybrać dokładnie selektory, które chcielibyśmy zobaczyć w naszej strukturze. Właściwie to używałem tego do generowania kodu zamiast HTML5 Boilerplate, gdy potrzebuję jeszcze kilku selektorów lub elementów, które oferuje. Teraz nie spełnia dokładnie wszystkich pięknie zaprojektowanych zasad semantycznych znaczników - takich jak HTML5 Boilerplate - ale wykonuje wystarczająco dobrą robotę, a ty możesz wejść i zrobić resztę, jeśli naprawdę potrzebujesz jej użyć.
Quackit Generator HTML5
Ten cofa się o krok i zamiast po prostu podać grupę kodu, która jest dość ogólna i podstawowa, pozwala wprowadzić wszystkie własne informacje. Jest to naprawdę przydatne i odkryłem, że inni, którzy są nowszymi użytkownikami stron internetowych, naprawdę to uwielbiają. Szczególnie je uwielbiam, odkryłem, że generuje standardowy podstawowy kod HTML, dzięki któremu możesz wyglądać tak, jak chcesz z CSS. Jeśli więc uczysz się CSS i nadal masz mgliste nastawienie do HTML-a (choć nie wiesz, dlaczego tak jest), możesz to zrobić w ten sposób.
I to będzie o tym. Te generatory są po prostu niesamowite do pracy w szybki i zwinny sposób, ale zamiast do przedsiębiorców są dla projektantów. I to jest naprawdę wspaniałe w mojej opinii. Masz szybki pomysł na promień obramowania (może tab??) Lub cień, gradient koloru lub szablon html5 z załączonym projektem - cóż, są one dla ciebie stworzone. Zauważ jednak, że nie była to wyczerpująca lista, ale było to kilka moich ulubionych i jedynych, których użyli moi koledzy z przeszłości. Naprawdę lubię używać wielu z nich i mam nadzieję, że też.