Смешайте свои собственные градиенты CSS с этим бесплатным веб-приложением

Каждый веб-дизайнер должен знать о CSS3 градиенты. Они существуют уже много лет и широко поддерживаются всеми основными браузерами..

А теперь бесплатные веб-приложения, такие как смесь позволяет создавать CSS3 градиенты на лету с визуальные редакторы в браузере. Вы можете выбрать между линейные и радиальные градиенты в то время как возиться с цветами, чтобы смешаться.

Начальная страница загружается с два сплошных цвета по обе стороны. Вы можете использовать цветовая палитра переключаться между оттенками или введите ручной код HEX если вы знаете цвет, который вы хотите. Когда у вас есть два понравившихся цвета, нажмите “Давай смешать” кнопка в центре.

Оба цвета смешиваются в градиент CSS3 с редактируемые параметры в верхней части страницы. Вы можете выбрать между линейные градиенты & радиальные градиенты, и если вы используете линейный стиль, вы можете перетащите местоположение центра по всей странице.

Плюс, пока ты в режиме наложения вы все еще можете вернуться к изменить цвета внизу. Это как идеальный генератор градиентов CSS3 без кода, который нужен каждому дизайнеру.

Если у вас есть два понравившихся цвета, вы можете нажать значок кода скобки в правом верхнем углу. Это воспитывает окно с кодом CSS что вы можете скопировать / вставить в ваши таблицы стилей.

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

К сожалению, текущая версия не поддерживает более двух цветов. Но я скрещиваю пальцы для многоцветных вариантов в будущем.

Поскольку вы не можете загрузить локальную копию, я рекомендую добавить в закладки Blend для дальнейшего использования. Это идеальный способ тестовые градиенты без повторного редактирования таблицы стилей.

И, если вы хотите поделиться своими идеями или просто поблагодарить за этот инструмент градиента, вы можете написать в Твиттере Colin @colinkeany.