Połącz własne gradienty CSS z tą darmową aplikacją internetową

Każdy projektant stron internetowych powinien wiedzieć Gradienty CSS3. Są już od lat i są powszechnie obsługiwane przez wszystkie główne przeglądarki.

A teraz darmowe aplikacje internetowe, takie jak Mieszanka pozwól na tworzenie gradientów CSS3 w locie edytory wizualne w przeglądarce. Możesz wybrać pomiędzy gradienty liniowe i radialne podczas majsterkowania z kolorami do mieszania.

Pierwsza strona jest ładowana dwa stałe kolory po obu stronach. Możesz użyć paleta kolorów przerzucać między odcieniami lub wpisywać a ręczny kod HEX jeśli znasz pożądany kolor. Po uzyskaniu dwóch kolorów kliknij przycisk “Połączmy się” przycisk w centrum.

Oba kolory łączą się ze sobą w gradient CSS3 edytowalne opcje w górnej części strony. Możesz wybrać pomiędzy gradienty liniowe & gradienty promieniowe, a jeśli używasz liniowego stylu, jaki możesz przeciągnij lokalizację centrum na całej stronie.

Plus, póki jesteś w trybie mieszania nadal możesz wrócić do zmień kolory na dnie. Jest to idealny generator kodu CSS3 bez kodu, którego potrzebuje każdy projektant.

Gdy masz dwa kolory, które chcesz, możesz kliknąć ikona wspornika kodu w prawym górnym rogu. To wywołuje okno z kodem CSS które możesz skopiować / wkleić do swoich arkuszy stylów.

Blend to darmowe narzędzie stworzone przez nowojorskiego projektanta Colina Keany'ego. To także hostowane na jego stronie, chociaż nie widzę linku do GitHub ani żadnego wolnego kodu źródłowego w dowolnym miejscu. Ale on napisał studium przypadku szczegółowo opisując proces tworzenia Blend ze wszystkimi jego przydatnymi funkcjami.

Niestety obecna wersja nie obsługuje więcej niż dwóch kolorów. Ale w przyszłości przechodzę do różnych opcji kolorów.

Ponieważ nie możesz pobrać lokalnej kopii, polecam zakładkę Blend do wykorzystania w przyszłości. To doskonały sposób na gradienty testowe bez wielokrotnej edycji arkusza stylów.

Jeśli chcesz podzielić się swoimi pomysłami lub po prostu podziękować za to narzędzie gradientu, możesz tweetować Colinem @colinkeany.