README_ru.md

English · 한국어 · Español · Français · Deutsch
简体中文 · 繁體中文 · 繁體粤语 · Português (Brasileiro) · 日本語 · മലയാളം · Русский

Tip

Доступен простой Генератор. Однако рекомендуется прочитать этот README для более точной настройки.

Important

Сервис предоставляется «как есть» и может быть нестабильным из-за лимитов использования или скачков трафика.

Для надёжной работы форкните репозиторий и разверните его на собственном экземпляре Vercel (или другой хостинг платформе).

Навигация

1. Как использовать
2. Типы
3. Цвет
4. Пользовательский список цветов
5. Тема
6. Секция
7. Отражение
8. Высота
9. Текст
10. Описание
11. Фон текста
12. Анимация текста
13. Цвет шрифта
14. Семейство шрифтов
15. Размер шрифта
16. Выравнивание шрифта — X
17. Выравнивание шрифта — Y
18. Размер описания
19. Выравнивание описания — X
20. Выравнивание описания — Y
21. Поворот
22. Обводка
23. Толщина обводки
24. Примеры

Есть идея? → Idea-Issue или PR

Как использовать

https://capsule-render.vercel.app/api?

Просто добавьте query-параметры в конец этого URL. Например:

Markdown:

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

HTML:

<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90" />

Типы

Параметр type меняет фоновое изображение.

• wave : по умолчанию
• egg
• shark
• slice
• rect
• soft
• rounded
• cylinder
• waving
• venom
• speech
• blur
• pulse
• checkered
• transparent

Добавьте &type= в URL

![header](https://capsule-render.vercel.app/api?type=slice)

Цвет

Меняет фоновое изображение!

• &color=auto : проверенный случайный цвет. Список здесь
• &color=timeAuto : проверенный случайный цвет, но выбирается по времени.
• &color=random : действительно случайный цвет. Какой именно — неизвестно.
• &color=gradient : проверенный случайный градиент. Список здесь
• &color=timeGradient : проверенный случайный градиент, но выбирается по времени.
• &color=_hexcode : по умолчанию (#B897FF)
• &color=_custom_gradient : пользовательский градиент. Если написать &color=0:EEFF00,100:a82da8, оно будет преобразовано в { 0%: 'EEFF00', 100%: 'a82da8' }. (напр. DEMO)

При использовании режима auto менять fontColor не нужно. auto также автоматически меняет fontColor.

![header](https://capsule-render.vercel.app/api?color=auto)

При использовании статического цвета не пишите '#''

Когда использовать timeAuto и timeGradient?

Когда одновременно используются секции header и footer.

Пользовательский список цветов

Вы можете настроить список цветов, которые будут случайно выбираться только для &color=auto и &color=gradient.

Добавьте &customColorList= в URL.

• При &color=auto смотрите список палитры.
• При &color=gradient смотрите список градиентов.

Выберите нужные цветовые схемы и запомните значение idx.

Например, если idx равны 0, 2 и 3, напишите: &customColorList=0,2,3

Чтобы idx=2 появлялся чаще, можно повторить его несколько раз. (напр. &customColorList=0,2,2,2,2,3)

![header](https://capsule-render.vercel.app/api?color=gradient&customColorList=0,2,2,5,30)

Тема

Можно использовать готовую комбинацию через theme=.

Даже если указаны color и fontColor, тема имеет наивысший приоритет.

Вы можете посомтреть список доступных тем в pallete_theme.json.

![reversal](https://capsule-render.vercel.app/api?type=rect&text=RECT&fontAlign=30&fontSize=30&desc=Use%20theme&descAlign=60&descAlignY=50&theme=radical)

Сейчас комбинации из Link:theme добавляются постепенно.

Секция

Параметр section переворачивает фоновое изображение.

• &section=header : (по умолчанию)
• &section=footer

Добавьте &section= в URL

![footer](https://capsule-render.vercel.app/api?section=footer)

Отражение

Отражает изображение по горизонтали. (Цвет тоже меняется)

• &reversal=false : (по умолчанию)
• &reversal=true

![reversal](https://capsule-render.vercel.app/api?type=slice&reversal=true&color=gradient)

Высота

Меняет размер изображения. Значение по умолчанию — 120.

Добавьте &height= в URL

![header](https://capsule-render.vercel.app/api?height=400)

Не пишите px

Текст

Текст поверх изображения.

Напишите что-нибудь в &text=.

![header](https://capsule-render.vercel.app/api?text=Hello%World!)

Нельзя использовать некоторые спецсимволы: «#», «&», «/» и т. д.

Они ломают API

Рекомендуется использовать только %20 (пробел) и -nl- (новая строка)

Описание

Описание поверх изображения.

Напишите что-нибудь в &desc=.

![header](https://capsule-render.vercel.app/api?height=400&text=Hello%20World!&desc=Hello%20capsule%20render)

Нельзя использовать некоторые спецсимволы: «#», «&», «/» и т. д.

Они ломают API

Рекомендуется использовать только %20 (пробел) и -nl- (новая строка)

Фон текста

Фон за текстом.

Добавьте &textBg=true, чтобы включить.

Чтобы увеличить размер фона, добавьте %20 между значениями текста. Размер фона зависит от длины текста. (%20 — пробел)

![header](https://capsule-render.vercel.app/api?type=rounded&color=gradient&text=%20asdf%20&height=300&fontSize=100&textBg=true)

Анимация текста

Делает текст динамическим.

Добавьте &animation=, если нужно.

• fadeIn : fadeIn 1.2s
• scaleIn : scaleIn .8s
• blink : blink .6s
• blinking : blinking 1.6s
• twinkling : twinkling 4s

![header](https://capsule-render.vercel.app/api?text=capsule_render&animation=fadeIn)

Цвет шрифта

Меняет цвет текста. Значение по умолчанию — 000000.

Значение должно быть hex-кодом без '#'

Добавьте &fontColor= после параметра Text

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontColor=d6ace6)

Семейство шрифтов

Меняет семейство шрифта текста.

Добавьте &fontFamily= после параметра Text.

Используйте %20 для пробелов в названии шрифта.

fontFamily применяется как CSS font-family, но фактический рендеринг зависит от шрифтов в среде рендеринга. Если шрифт недоступен, используются запасные.

![header](https://capsule-render.vercel.app/api?text=Hello%20World!&fontFamily=Segoe%20UI)

Размер шрифта

Меняет размер шрифта текста. Значение по умолчанию — 70.

Добавьте &fontSize= после параметра Text

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40)

Не пишите px

Выравнивание шрифта — X

Горизонтальное выравнивание текста (x). Укажите число от 0 до 100

&fontAlign= : по умолчанию 50 — центр изображения

Если в &text= несколько строк (-nl-), несколько значений &fontAlign= применят разное горизонтальное выравнивание к каждой строке.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70)

Выравнивание шрифта — Y

Вертикальное выравнивание текста (y). Укажите число от 0 до 100

&fontAlignY= : для одной строки по умолчанию 50 (центр изображения). Для нескольких строк (через -nl-) значение по умолчанию рассчитывается так, чтобы строки были сложены друг на друга и отцентрированы.

Если в &text= несколько строк (-nl-), несколько значений &fontAlignY= применят разное вертикальное выравнивание к каждой строке.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20)

Размер описания

Меняет размер шрифта описания. Значение по умолчанию — 20.

Добавьте &descSize= после параметра desc

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40&desc=Desc&descSize=30)

Не пишите px

Выравнивание описания — X

Горизонтальное выравнивание описания (x). Укажите число от 0 до 100

&descAlign= : по умолчанию 50 — центр изображения

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70&desc=Desc&descAlign=20)

Выравнивание описания — Y

Вертикальное выравнивание описания (y). Укажите число от 0 до 100

&descAlignY= : по умолчанию 60 — центр изображения

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20&desc=Desc&descAlignY=40)

Поворот

Используйте &rotate=, чтобы повернуть текст.

Можно использовать отрицательные числа.

Рекомендуемый диапазон: 0 ~ 360, 0 ~ -360.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=20&rotate=-30)

Обводка

Меняет обводку текста.

Добавьте &stroke= в query

Значение должно быть hex-кодом без '#'

![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00)

Рекомендуется использовать вместе с strokeWidth.

При использовании отдельно strokeWidth по умолчанию равен 1.

Толщина обводки

Меняет толщину обводки текста.

Добавьте &strokeWidth= после параметра stroke

Значение должно быть больше или равно 0.

![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00&strokeWidth=3)

Рекомендуется использовать вместе с stroke.

При использовании отдельно цвет обводки по умолчанию — 'B897FF'.

Примеры

Wave

Egg

Shark

Slice

Rect

Soft

Rounded

Cylinder

Waving

Transparent

Venom

Speech

Blur

Pulse

Checkered

---