Помощник для Демо-контента
Многие веб студии, занимающиеся разработкой сайтов испытывают трудности во время демонстрационного показа продукта, а именно, когда необходимо показать готовый сайт содержащий демо-контент. Тут приходится всячески крутится и выискивать множество изображений, подгонять их под нужные размеры, а в некоторых случаях и придерживаться одной цветовой гаммой.
Тут на помощь выходит online сервис Cambelt (в переводе на русский — ремень ГРМ), который для Вашего проекта на лету сгененрирует необходимые вам картинки.
Нужно лишь указать в качестве источника изоюражения адрес URL (например, cambelt.co/468x60) с указанием нужного размера. Также можно использовать текст для формирования надписи и разные цвета.
Вот цитата с главной страницы официального сайта
Это так стало просто создать изображение для Вашего сайта, всего-лишь вставьте в тег «src» ссылку с этого сайта и укажите необходимые Вам размеры
Примеры
Теперь самое главное — примеры!
-
Обычное изображение
Это действительно легко, все что вам нужно сделать, это в ссылке указать на размеры, которые вы хотите использовать. Вы можете либо указать только одно значение 300, которое даст вам квадратное изображение, или два значение 300x200 для контроля над формой:
<img src="http://cambelt.co/300x200" alt="image" />
-
Произвольный текст
Это также очень просто — после того, как Вы указали размеры, добавляете текст, который вы хотите видеть на изображении. Вы должны заменять пробелы на +. Будьте осторожны, чтобы длина текста не превышала ширину изображения.
<img src="http://cambelt.co/300x200/Habrahabr" alt="image" />
-
Цвет фона
Вы можете задать пользовательские цвета, добавляя ?color=25d54e строку в конце запроса — вот так
<img src="http://cambelt.co/300x200/Colors?color=25d54e"alt="image" />
-
Цвет текста
Вы можете задать пользовательский цвет элементов через ?color= строку запроса тоже. Чтобы установить только цвет переднего плана необходимо префикс , (запятая) и HTML-код цвета:
< img src="http://cambelt.co/300x200/Habrahabr?color=,987423" alt="image"/>
-
Совмещаем оба типа цвета
Таким образом, чтобы объединить и использовать собственный цвет переднего плана с цветом фона, нужно просто вставить обе части ?color= в строку, как то так:
<img src="http://cambelt.co/300x200/Habrahabr?color=234653,eeeeee" alt="image" />
-
Используем шрифты
Вы также можете указать специальный шрифт из широкого выбора, предоставленного на сайте для отображения текста внутри картинки. Для получения полного списка шрифтов, которые доступны, необходимо зайти на вкладку Font Showcase. Для их использования нужно просто указать font=?:
<img src="http://cambelt.co/300x200/Habrahabr?font=Homestead-Display" />
-
Размер шрифта
Вы можете задать пользовательский размер шрифтов путем передачи параметра font_size = в запросе?:
<img src="http://cambelt.co/300x200/Habrahabr?font_size=12" alt="image" />
-
Формат файла
Вы можете запросить изображение в одном из 3 форматов. Сервис предоставляет все файлы в формате PNG по умолчанию, но если вы предпочитаете другие ( JPG, GIF), то вы можете использовать параметр ?format=, чтобы получить необходимый файл.
<img src="http://cambelt.co/300x200/JPG?format=jpg" alt="image" />
-
Совмещаем оба типа цвета
Вы также можете получать ваши изображения по защищенному соединению HTTPS — для использования на безопасных веб-страниц:
<img src="https://cambelt.herokuapp.com/300x200/Secure" alt="image" />
Автор: alexozon
