Cssmatic - автоматизований сервис для веб-дизайнерів

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

Сьогодні ми розглянемо сервіс CSSMatic, володіє деякими спектром можливостей по автоматизації CSS3 коду.

Ще кілька заслань по сервісів:
• Сервіси для дизайнерів і розробників за липень 2014
• 8 сервісів для оптимізації зображень
• Сервіси для дизайнерів і розробників за червень 2014

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

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

1. Градієнт

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

створення градієнта

На ваш вибір надається 26 готових колірних схем. Якщо ви клацніть на будь-яку із запропонованих схем - вона з`явиться на слайдері нижче, а також справа у вікні попереднього перегляду. Ваш новий градієнт буде визначатися як новий і його потрібно буде зберегти.

Відео: clase 2: DREAMWEAVER: FOOTER Y MENU HEADER

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

Щоб створити нову точку переходу кольору - зробіть в потрібній місці подвійний клік по слайдеру.

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

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

Спускаємося трохи нижче. Тут знаходяться налаштування відтінку, насиченості і яскравості:

Вам достатньо самим пограти з цими повзунками і подивитися як і що змінюється. Там нічого немає складного і ви швидко зрозумієте що й за який параметр відповідає.

Інтерфейс даного сервісу інтуїтивно зрозумілий. На виході ви отримуєте код:

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

2. Закруглені кути

Друга корисна функція цього сервісу - це можливість генерувати код для закруглені кути. Все що потрібно, так це пересувати повзунки і дивитися що виходить. З кольором гадаю тут також все зрозуміло: тиснете на колір поряд з його кодом і в кольоровій палітрі вибираєте вподобаний:

Відео: Curso de CSS desde cero | 15 - Gradientes o degradados

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

3. Створення шумовий текстури

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

Після створення потрібного вам ефекту є два способи використання в подальшому цієї текстури: завантажити PNG зображення по кнопці зліва внизу або скопіювати адресу зображення в інтернет і вставивши в свою властивість background. На мій погляд перший спосіб більш кращий, тому що завантаження зображення буде відбуватися швидше зі свого хостингу, ніж з віддаленого (але не завжди!).

4. Тінь для блоку

І остання функція, яка доступна в цьому сервісі, це створення тіні для елементів (блоків) на сторінці.

Тут немає нічого складного, як і в ті функції, які ми розглянули вище, тут лише переміщайте повзунки і дивіться у вікні попереднього перегляду (праворуч) що виходить. Єдине, що хочу згадати, це перемикач в самому низу з назвою «Outline» і «Inset», що відповідають за зовнішню і внутрішню тінь.

Потім копіюєте код, що вийшов в використовуєте його у себе.

висновок

CSSMatic - це сервіс, який може скоротити значну частину часу. Тому що писати код з нуля це не дуже швидкий процес, набагато швидше його просто згенерувати.

Успіхів!

З повагою, Юрій Німець