—»     —»   CSS Matic: WYSIWYG для CSS-разработчиков
  Раздел: Web-приложения   Нет комментариев  

CSS Matic: WYSIWYG для CSS-разработчиков



Прошли те времена, когда нам нужно было разрабатывать CSS-код полностью вручную. Уже долгое время появляются все новые и новые «помощники». Эти помощники обычно охватывают отдельные аспекты CSS, и предоставляют более или менее удобный графический интерфейс, который позволяет визуально заниматься разработкой CSS-кода. Сегодня мы хотим представить вам новый сервис из Испании, который охватывает все задачи, связанные с разработкой CSS. Этот сервис был назван CSS Matic, и его создатели довольно известны в сфере веб-дизайна.

CSS Matic: WYSIWYG для CSS-разработчиков

За разработкой CSS Matic стоят Freepik.com и Thumbr.it

Вы наверняка знакомы с Freepik.com. Это отличная поисковая система для бесплатных дизайн-ресурсов. Мы, к примеру, находили там множество полезных ресурсов, которыми затем делились с вами, но не так часто, так как у системы существуют правила относительно того, как ей нужно и можно пользоваться, а также присутствуют некоторые ограничения. Freepik не размещает у себя ресурсы, поэтому условия лицензии и использования тех или иных ресурсов могут измениться в любой момент.

Freepik, конечно же, активно стараются избавиться от этой проблемы. В последнее время очень заметно то, сколько бесплатных дизайн-ресурсов появляется от самой команды Freepik. Мы даже не удивимся, что скоро на нашем сайте будут целые подборки бесплатных ресурсов от Freepik.

Но вернемся к CSS Matic: почему Freepik предложили нам такой ресурс абсолютно бесплатно? Alejandro Sanchez Blanes, основатель Freepik, объясняет это следующим образом:

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

Изначально CSSmatic разрабатывался для экономии времени команды Freepik, а теперь стал доступен всем. И мир, ну или по крайней мере та его часть, которая занимается разработкой CSS-кода, будет очень рада, что CSS Matic способен заменить целый ряд других инструментов. Больше всего нам нравится, что у нас есть возможность ощутить свежесть этого инструмента – особенно его интерфейса. Если вы пробовали работать со старыми инструментами, то вам обязательно стоит взглянуть на CSS Matic.

CSS Matic – градации, рамки, тени и текстуры

На самом деле, CSS Matic состоит не из единой части. Здесь 4 части сервиса, которые отличаются как по функционалу и комплекции, так и в управлении и стиле. Не удивительно, что первый инструмент, Gradient Generator, в презентации продукта на сайте занимает первую строчку.

CSS Matic – Gradient Generator

CSS Matic: WYSIWYG для CSS-разработчиков

Gradient Generator оставляет остальные инструменты позади. Gradient Generator – это полноценный, многофункциональный инструмент. Вы можете создавать градации при помощи множества различных пресетов, либо с нуля. Градации могут совмещать в себе более одного двух цветов, которые комбинируются при помощи опорных точек. Вы можете выбрать формат цвета, настроить цветность и насыщенность, и многое другое. Если вы используете контент с градациями, то его можно экспортировать в CSS, и в Sass. Также можно включить комментарии к коду при экспорте. Таким образом, вы точно не заблудитесь, даже если вы связываетесь с CSS не так часто.

CSS Matic – Border Radius

CSS Matic: WYSIWYG для CSS-разработчиков

Менее комплексный, но не менее удобный инструмент Border Radius. Он позволяет вам создавать css-границы. Эти границы могут быть определены визуально отдельно для каждой стороны, либо сразу для всех 4-х сторон. Сгенерированный CSS-код изменяется по мере того, как вы вносите изменения в параметры. Используя копирование и вставку, вы можете экспортировать созданный код в ваш проект.

CSS Matic – Noise Texture

CSS Matic: WYSIWYG для CSS-разработчиков

При помощи Noise Texture вы можете визуально соединять воедино текстуры на цветном или прозрачном фоне, а затем экспортировать их в PNG и CSS. Цвет фона, цвет шума, прозрачности и уровень плотности – все это можно редактировать так же, как и размеры пикселей в созданном PNG.

CSS Matic – Box Shadow

CSS Matic: WYSIWYG для CSS-разработчиков

Ну, а это уже классика – инструмент для создания теней. Есть ли хоть один разработчик, у которого не сохранены закладки на подобные инструменты? Хорошое в том, что Box Shadow теперь можно не скрывать, как остальные инструменты, и он отлично справляется со своей задачей. Здесь есть все нужные настраиваемые параметры. CSS можно скопировать в буфер обмена, и он уже будет содержать (как и в случаях с остальными инструментами CSS Matic) браузерные префиксы там, где они нужны.

В целом, нет никакой причины, почему вы не должны включить CSS Matic в ваш повседневный гардероб… то есть, набор инструментов. Он экономит ваше время, и заменяет многие другие подобные инструменты. Так как Freepik уже сегодня настолько многофункционален, мы не удивимся, если уже в ближайшем будущем в этом инструменты будут представлены новые функции и свойства. Мы обязательно будем следить за этим сервисом, рекомендуем и вам.

Ссылки

* CSS Matic: универсальные CSS-инструменты для разработчиков
* Freepik: поисковая система бесплатных дизайн-ресурсов
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, WYSIWYG, генераторы
Опубликовал Design FactoRy   Прочитано (раз): 6697   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031