Смесете собствените си CSS градиенти с този безплатен уеб приложение

Всеки уеб дизайнер трябва да знае за това CSS3 градиенти. Те съществуват от години и са широко подкрепени от всички основни браузъри.

И сега, безплатни уеб приложения като Blend ви позволява да създавате CSS3 градиенти в движение визуални редактори в браузъра. Можете да избирате между линейни и радиални градиенти докато бърникате с цветовете, които се смесват.

Началната страница се зарежда с две плътни цветове от двете страни. Можете да използвате цветова палитра за прелистване между нюанси или въвеждане на a ръчен HEX код ако знаете желания цвят. Щом имате два цвята, които искате, кликнете върху “Нека смесим” бутон В центъра.

И двата цвята се смесват в CSS3 градиент с редактируеми опции в горната част на страницата. Можете да избирате между линейни градиенти & радиални градиенти, и ако използвате линейния стил, можете плъзнете централното местоположение на цялата страница.

Плюс това, докато сте в режим на смесване пак можете да се върнете обратно променете цветовете на дъното. Това е идеалният безкодировъчен CSS3 генератор на градиенти, от който всеки дизайнер се нуждае.

След като имате два цвята, които искате, можете да кликнете върху икона на скоба за код в горния десен ъгъл. Това води до: a прозорец с CSS код че можете да копирате / поставите във вашите стилове.

Blend е безплатен инструмент, създаден от дизайнера на Ню Йорк Колин Кини. То е също домакин на неговия сайт, въпреки че не виждам връзка към GitHub или който и да е свободен изходен код навсякъде. Но той пише казус подробно описание на неговия процес създаване на Blend с всичките си удобни функции.

За съжаление, текущата версия не поддържа повече от два цвята. Но в бъдеще прекосявам пръстите си за многоцветни опции.

Тъй като не можете да изтеглите локално копие, препоръчвам да направите отметка за Blend за бъдеща употреба. Това е идеалният начин тестови градиенти без многократно редактиране на стиловете.

И ако искате да споделите идеите си или просто да благодарите за този градиент, можете да чуруликаете Colin @colinkeany.