CSSMatic – инструмент автоматизации, который делает CSS легким для веб-дизайнеров

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

Сегодня я хочу представить вам CSSMatic, полный сервис, который может автоматизировать создание некоторых функций CSS3.

Разработано Алехандро Санчесом Бланесом (основатель Freepik) и Хоакин Куэнка (Panoramio) CSSMatic позволяет генерировать сложный и сложный код, который обычно пишется вручную. Мы рассмотрим четыре вещи, которые CSSMatic могут помочь автоматизировать для нас: градиенты, радиус границы, текстура шума и тень блока.

1. Градиентный генератор
   Gradient Generator является наиболее сложным, наиболее полным и, вероятно, наиболее используемым инструментом в CSSMatic. Он используется для генерации нескольких цветовых градиентов из нескольких доступных пресетов или полностью с нуля, говоря о том, что вас могут заинтересовать следующие уроки о том, как:
   Настройка вашего градиента
   Для опции ввода есть 26 готовых пресетов для вас. Когда вы щелкаете по любой из этих предустановок, она автоматически загружается в ползунок цвета и выполняет предварительный просмотр. Ваш пользовательский градиент сохраняется как новый пресет после сохранения.
   Под предустановками вы можете найти цветной слайдер с несколькими остановками управления. Нажмите любую из этих точек, чтобы активировать ползунок, чтобы изменить непрозрачность. Нажмите на любую свободную верхнюю границу, чтобы создать новую точку остановки. Черные точки остановки, вверху, управляют непрозрачностью и расположением градиента. Нижние точки используются для изменения цвета и местоположения градиента.
   (Обратите внимание, что есть также статические ползунки для изменения непрозрачности и расположения под ползунком.)

Нажатие на любую из точек остановки покажет диалоговое окно. Здесь вы можете изменить первый или дополнительный цвет, используя эти точки, или даже добавить еще один или два цвета. Чтобы добавить цвет, нажмите на нижнюю границу, и появится новая точка остановки.
На ползунке цветов вы можете увидеть кнопку изменения цвета, которую можно использовать для замены первого и второго цветов градиента.
Направление градиента также имеет различные предпочтения: слева направо, сверху вниз, по диагонали вверх, по диагонали вниз и круговое направление.
Есть также настройки для изменения оттенка, насыщенности или яркости с помощью ползунка или ввода точного значения. Кнопка сброса позволяет начать с нуля. Как только вы закончите настройку градиента, как вы хотите, вы можете сохранить его в качестве предустановки.
Выход градиента
С помощью CSSMatic вы можете выбрать способ генерации градиента в коде: в CSS или SASS. Существует несколько цветовых форматов, которые вы можете изменить для сгенерированного кода, например: hex, hsl, hsla, rgb и rgba. hsla и rgba используют альфа-канал.
Если вы включите параметр «Комментарии», он добавит несколько комментариев к коду, указывающих, какой браузер поддерживает градиент.
Для того, чтобы градиент хорошо работал в IE9, доступна команда переключения для опции поддержки IE9. В инструкции вы добавите класс «градиент» ко всем своим соответствующим элементам, а следующее заменит правило HTML.

<! -[if gte IE 9]

<![endif]–>

1. Граница Радиуса
   Второй особенностью является радиус границы, который позволяет легко манипулировать углами формы. Вы можете использовать ползунок или ввести значение. Значение 0px обозначает квадрат. Чем выше px, тем более круглыми становятся ваши углы. Углы могут быть изменены все сразу (все углы) или один угол за один раз.
   Если вы хотите добавить границу, просто определите ширину границы или перетащите панель. Граница представлена ​​в различных стилях, включая: Сплошной, Пунктирный, Пунктирный, Двойной, Грув, Хребет, Врезка, Врезка, Наследовать, Скрытый или Нет. Границу и цвет фона также можно легко изменить.
   3. Текстура шума
   Noise Texture поможет вам создать шаблон шума для ваших веб-макетов. Вы можете контролировать непрозрачность шума, плотность, а также фон и цвет шума. Переключение опции «Экспорт шумопрозрачного» сделает фоновый шум прозрачным.
   Если вы хотите загрузить шум как изображение, нажмите кнопку «Загрузить текстуру шума». Вы также можете указать желаемый размер изображения перед загрузкой.
2. Коробка Тени
   Последний инструмент – Box Shadow. Чтобы изменить направление размытия на горизонтальное или вертикальное, вы можете использовать ползунки на левой боковой панели. Плотность и размер размытия контролируются инструментами Blur и Spread Radius. Вы можете выбрать цвет коробки и ее тени.
   Чтобы легко изменить прозрачность или альфа-канал тени, используйте ползунок «Цвет». И если вы хотите сделать тень или контур, просто переключите самый нижний инструмент.

Для Border Radius, Noise Texture и Box Shadow, после того как вы создали желаемый конечный результат, скопируйте код для своего использования.
Последняя мысль
CSSMatic – это хорошее приложение, которое экономит время и немного облегчает вашу работу, когда дело доходит до написания кода в CSS. Это также инструмент, который хорошо работает для вас, независимо от того, новичок вы в CSS или знаком с ним. До сих пор в CSSMatic не хватает документации и инструкций, особенно Gradient Generator. В первый раз, когда вы наткнетесь на него, вам, возможно, придется поиграть с инструментами, чтобы понять их. Дайте нам знать, если вам это нравится.