Лого SiteHere.ru

CSSMatic — автоматизированный сервис для веб-дизайнеров

CSSMatic - сервис для веб-дизайнеров

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

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

CSSMatic генерирует код, который обычно приходится писать вручную. Рассмотрим четыре возможности, которые предоставляет этот сервис: генератор градиента, закругленные границы, текстуры и тень.



CSSMatic — сервис для веб-дизайнеров

1. Градиент

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



Создание градиента

На ваш выбор предоставляется 26 готовых цветовых схем. Если вы кликнете на любую из предложенных схем — она появится на слайдере ниже, а также справа в окне предпросмотра. Ваш новый градиент будет определяться как новый и его нужно будет сохранить.

Создание градиента

Вы можете изменить прозрачность цвета в определенном месте (для этого служит верхний набор точек с черным кружком внутри):

Настройка прозрачности

Чтобы создать новую точку перехода цвета — сделайте в нужном месте двойной клик по слайдеру.

Ниже слайдера вы можете увидеть набор настроек этих точек: два ползунка слева отвечают за верхний ряд точек (за выделенную) и изменяют прозрачность (opacity) и положение (location) соответственно, а справа находятся настройки нижних точек с настройкой цвета точки (color) и положения (location).

Точно таким же способом (двойным кликом) можно добавить точку перехода цвета из одного другой.

Спускаемся немного ниже. Здесь находятся настройки оттенка, насыщенности и яркости:

Генерирование градиента. Насыщенность

Вам достаточно самим поиграть с этими ползунками и посмотреть как и что меняется. Там нет ничего сложного и вы быстро поймете что и за какой параметр отвечает.

Интерфейс данного сервиса интуитивно понятен. На выходе вы получаете код:

Исходный код градиента

Нажимаете на кнопку с текстом «Copy text», которая находится ниже, и вставляете этот код в нужное место (для того элемента к которому применяются эти свойства) вашего файла стилей.



2. Закругленные углы

Вторая полезная функция этого сервиса — это возможность генерировать код для закругленных углов. Всё что нужно, так это передвигать ползунки и смотреть что получается. С цветом я думаю здесь также всё понятно: жмете на цвет рядом с его кодом и в цветовой палитре выбираете понравившийся:

Закругленные углы - CSSMatic

По завершению всех манипуляций делаете как с прошлым: жмете кнопку «Copy text» и вставляете в ваш файл стилей для того элемента, которому нужно сделать закругленные углы.



3. Создание шумовой текстуры

Существует множество сайтов, на которых предлагается выбрать текстуру из уже существующих наборов. Но не всегда эти текстуры подходят и нравятся. CSSMatic — предлагает сгенерировать свою текстуру простым способом — двигая туда сюда ползунки.

Шумовая текстура

После создания нужного вам эффекта есть два способа использования в дальнейшем этой текстуры: скачать PNG изображение по кнопке слева внизу или скопировать адрес изображения в интернет и вставив в своё свойство background. На мой взгляд первый способ более предпочтительный, так как загрузка изображения будет происходить быстрее со своего хостинга, чем с удаленного (но не всегда!).



4. Тень для блока

И последняя функция, которая доступна в этом сервисе, это создание тени для элементов (блоков) на странице.

Здесь нет ничего сложного, как и в те функции, которые мы рассмотрели выше, здесь лишь перемещайте ползунки и смотрите в окне предпросмотра (справа) что получается. Единственное, что хочу упомянуть, это переключатель в самом низу с названием «Outline» и «Inset», отвечающие за внешнюю и внутреннюю тень.

Тень элемента

Затем копируете получившийся код в используете его у себя.



Вывод

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


Успехов!

С Уважением, Юрий Немец

1 комментарий к записи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *