Змішайте власні градієнти CSS з цим безкоштовним Web App

Кожен веб-дизайнер повинен знати Градієнти CSS3. Вони існують багато років, і вони широко підтримуються всіма основними браузерами.

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

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

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

Плюс, поки ви в режимі накладання Ви все одно можете повернутися змінити кольори на дні. Це схоже на ідеальний безконтактний генератор градієнтів CSS3, який потребує кожен дизайнер.

Після двох кольорів, які вам подобаються, можна натиснути кнопку значок кодової дужки у верхньому правому куті. Це викликає a з кодом CSS що ви можете скопіювати / вставити у таблиці стилів.

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

На жаль, поточна версія не підтримує більше двох кольорів. Але я перетинаю свої пальці для багатобарвних варіантів у майбутньому.

Оскільки ви не можете завантажити локальну копію, рекомендую зробити закладку Blend для майбутнього використання. Це ідеальний спосіб градієнти випробувань без повторного редагування таблиці стилів.

І, якщо ви хочете поділитися своїми ідеями або просто сказати спасибі за цей інструмент градієнта, ви можете твітти Коліна @colinkeany.