Полезные веб-сервисы дизайнеру №10: эффектные фоны, CSS генераторы, SVG материалы

Текущий выпуск будет 10-тым по счету (юбилейным) с момента запуска рубрики статей-подборок с разными инструментами дизайнерам. Именно поэтому мы подготовили непривычно большое число обозреваемых проектов — сразу 10. Кроме того, подобных публикаций в блоге не было достаточно давно (прошлый пост датируется аж началом февраля), и за пару месяцев накопилось много чего интересного для рассмотрения.

SVG Backgrounds

SVG Backgrounds

Сервис SVG Backgrounds содержит яркие и эффектные SVG фоны для сайтов. Представленные варианты высокого качества, могут использоваться на экранах любых размеров и во всех современных браузерах. При этом они весят менее 5Кб.

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

Mobbin.design

Mobbin.design

Авторы ресурса Mobbin.design вручную отбирают лучшие дизайны мобильных приложений для вдохновения. Здесь 2 варианта навигации: можно отдельно просматривать список примеров по проектам (Apps), либо переключиться на вкладку определенных элементов (Patterns). Дабы получить доступ к полному архиву и некоторым функциям придется зарегистрироваться. Хорошее дополнение другим сервисам сборникам дизайнов мобильных интерфейсов.

The Front-End Checklist

The Front-End Checklist

В The Front-End Checklist найдете что-то вроде чек-листа со списком необходимых действий при создании сайта. Вы можете ознакомиться со всеми важными задачами веб-разработки, которые крайне желательно внедрять в своих/клиентских веб-проектах.

Отмечайте уже выполненные задачи, тем самым повышая рейтинг/оценку вашей работы. Перечень пунктов для удобства разбит на несколько категорий: HTML, CSS, скрипты, изображения, SEO, производительность и т.п. Кроме того, есть компоновка по трем уровням приоритетности — логично начинать с наиболее важных правок, а после заняться второстепенными.

Record Label Logos

Record Label Logos

В данной статье представлены дизайны лого музыкальных (звукозаписывающих) лейблов. Изначально автор планировал разделить их по жанрам, но по его словам, эта работа заняла бы «вечность». Получилась интересная и очень разнообразная по реализации подборка, много олдскульных винтажных вариантов. Найти и собрать такую коллекцию примеров логотипов — большое достижение!

GradPad

GradPad

Очередной генератор градиентов под названием GradPad. В принципе, здесь все весьма приятно и наглядно организовано. С помощью шкалы и передвигаемых элементов цветов в самом низу страницы создаете свой оригинальный вид перехода. Затем сверху кликаете по ссылке «Get CSS for this Gradient» дабы получить результирующий код.

Также в меню имеется пункт «Gradient Gallery» с галереей очень классных решений. При необходимости можете создавать разное количество цветов в градиенте, а не только 2 или 3.

Flag Icon CSS

Flag Icon CSS

Flag Icon CSS — отличное дополнение к нашей недавней подборке с иконками флагами в PNG / JPG. Все экземпляры выполнены в формате SVG. Для удобства доступно разбиение на группы: Африка, Европа, Азия, Океания и т.п., хотя не совсем понятно зачем оно нужно — ведь вся графика скачивается в одном архиве. Дополнительно на сайте есть мини игра с угадыванием столиц государств.

30 Seconds of CSS

30 Seconds of CSS

На веб-ресурсе 30 Seconds of CSS собрана коллекция самых популярных и полезных сниппетов CCS таблиц стилей. Они весьма простые для понимания — вам достаточно менее 30 секунд дабы разобраться во всех деталях и нюансах.

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

Trianglify.io

Trianglify.io

Еще один инструмент фонов — Trianglify.io. Он позволяет генерировать оригинальные и необычные бэкграунды, состоящие из группы векторных полигонов разных цветов. Выглядит это крайне необычно и подойдет многим решениям (как сайтам, так и приложениям).

Выбирайте одну из предложенных палитр или задавайте свои варианты цветов. Также есть парочка настроек: 2 ползунка для определения размеров и разброса полигонов + ширина/высота изображения. Итоговый результат доступен в PNG или SVG форматах.

Piano Keyboard

Piano Keyboard

Некто Felipe Fialho реализовал небольшое пианино с помощью CSS и JavaScript. Вы можете нажимать клавиши мышкой или использовать кнопки клавиатуры в ряду, начинающемся с «caps lock». Веб-технологии позволяют делать удивительные вещи.

Particle Effects for Buttons

Particle Effects for Buttons

Particle Effects for Buttons — небольшая библиотека скриптов, которые создают для кнопок сайта визуальный эффект разрыва их на множество частиц при нажатии. Посмотрите демонстрацию — выглядит неплохо. В статье найдете алгоритм внедрения данной фишки, а также описание используемых функций. Можно выбирать разные виды эффекта, сторону начала и скорость его выполнения. Кстати, советуем почитать про развитие дизайна кнопок на сайтах и в интерфейсах.

Надеемся юбилейный выпуск вам понравился. Если к следующему месяцу успеем набрать 5-6 достойных сервисов, обязательно опубликуем обзор пораньше. Предлагайте интересные кандидатуры для следующей публикации в комментах.

2 комментария к статье “Полезные веб-сервисы дизайнеру №10: эффектные фоны, CSS генераторы, SVG материалы”
  1. Антон

    Супер подборка сервисов, спасибо! Trianglify.io особенно понравился, сделал себе уникальные и эффектные фоны на некоторых сайтах.

  2. Валя

    SVG Backgrounds вообще крутая штука, спс за статью.

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *