Skip to content

README_pt-br.md

Latest commit

 

History

History
480 lines (319 loc) · 15 KB

README_pt-br.md

File metadata and controls

480 lines (319 loc) · 15 KB


GH Contributors Codecov Issues GH pull requests

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


Tip

Possui um Gerador simples. Ainda assim, recomendo ler este README para ajustes pontuais e detalhados.

Important

This service is provided on a best-effort basis and may be unstable due to usage limits or traffic spikes.

For reliable use, please fork the repository and deploy it to your own Vercel instance (or another hosting platform).

Navegação

  1. Como usar
  2. Tipos
  3. Cor
  4. Lista de Cores Customizadas
  5. Seção
  6. Inversão
  7. Altura
  8. Texto
  9. Descrição
  10. Fundo do Texto
  11. Animação do Texto
  12. Cor da Fonte
  13. Tamanho da Fonte
  14. Alinhamento da Fonte - X
  15. Alinhamento da Fonte - Y
  16. Tamanho da Descrição
  17. Alinhamento da Descrição - X
  18. Alinhamento da Descrição - Y
  19. Girar
  20. Contorno do Texto
  21. Demonstração

Qualquer sugestão de ideia -> Idea-Issue ou PR

Como usar

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

Basta escrever o parâmetro de consulta no final desta URL. Assim:

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" />

Tipos

Os dados do tipo alteram a imagem de fundo.

Escreva &type= na URL

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

Cor

Altere a imagem de fundo!

  • &color=auto : Cor aleatória predefinido. A lista está aqui
  • &color=timeAuto : Cor aleatória predefinido, mas decidida pelo horário.
  • &color=random : Cor completamentamente aleatória. Eu não sei quais cores serão mostradas.
  • &color=gradient : Gradiente aleatório predefinido. A lista está aqui
  • &color=timeGradient : Gradiente aleatório predefinido, mas decidido pelo horário.
  • &color=_hexcode : padrão(#B897FF)
  • &color=_custom_gradient : Gradiente customizado. Se escrever &color=0:EEFF00,100:a82da8, será convertido para { 0%: 'EEFF00', 100%: 'a82da8' }. (exemplo DEMO)

Se usar o modo auto, não há necessidade de alterar a fontColor. O auto também altera a cor da fonte automaticamente.

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

Se usar uma cor estática, não escreva o '#'

Quando usar timeAuto e timeGradient?

Use a seção header e footer ao mesmo tempo.

Lista de Cores Customizadas

Você pode personalizar a lista de cores que aparecerão aleatoriamente apenas para &color=auto e &color=gradient.

Escreva &customColorList= na URL.

Escolha os padrões de cor que você deseja e lembre-se do valor idx.

Por exemplo, se os valores de idx forem 0, 2 e 3, escreva: &customColorList=0,2,3

Se quiser que o idx=2 apareça mais vezes, você pode escrevê-los repetidamente. (exemplo: &customColorList=0,2,2,2,2,3)

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

Tema

Você pode usar a combinação especificada usando theme=.

Mesmo que color e fontColor sejam usados, o tema tem a maior prioridade.

Confira a lista de temas disponíveis em 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)

Atualmente estou adicionando combinações do Link:tema aos poucos.

Seção

Os dados de seção fazem a inversão da imagem de fundo.

  • &section=header : (padrão)
  • &section=footer

Escreva &section= na URL

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

Inversão

Inverte a imagem da esquerda para a direita. (E as cores ao mesmo tempo)

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

Altura

Altera o tamanho da imagem. O valor padrão é 120.

Escreva &height= na URL

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

Não escreva px

Texto

Adicione texto sobre a imagem.

Escreva algo &text= .

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

Não é possível usar alguns caracteres especiais, como '#', '&', '/' ...

Isso pode causar confusão na API

É recomendado usar %20 (espaço) e -nl- (nova linha) apenas

Descrição

Adicione uma descrição sobre a imagem.

Escreva algo &desc= .

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

Não é possível usar alguns caracteres especiais, como '#', '&', '/' ...

Isso pode causar confusão na API

É recomendado usar %20 (espaço) e -nl- (nova linha) apenas

Fundo do Texto

Fundo do texto.

Escreva &textBg=true para ativar.

Se quiser aumentar o tamanho do fundo, adicione %20 entre os valores do texto. Isso ocorre porque o tamanho do fundo depende do comprimento do texto em inglês. (%20 significa espaçamento)

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

Animação do Texto

Faça o texto dinâmico.

Escreva &animation= , se quiser usar.

  • 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)

Cor da Fonte

Altere a cor do texto. O valor padrão é 000000.

O valor deve ser o código Hex sem o '#'

Escreva &fontColor= após a consulta Texto

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

FontFamily

Change text font family.

Write &fontFamily= behind Text query.

Use %20 for spaces in font names.

fontFamily is applied as CSS font-family, but actual rendering depends on fonts available in the rendering environment. If a font is unavailable, fallback fonts are used.

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

Tamanho da Fonte

Altere o tamanho da fonte do texto. O valor padrão é 70.

Escreva &fontSize= após a consulta Texto

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

Não escreva px

Alinhamento da Fonte

Altere o alinhamento horizontal do texto (x). Escreva o número entre 0~100

&fontAlign= : O valor padrão é 50, no centro da imagem

Se houver várias linhas em &text= (-nl-), fornecer múltiplos &fontAlign= aplicará o alinhamento horizontal individualmente para cada linha.

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

Alinhamento Vertical da Fonte

Altere o alinhamento vertical do texto (y). Escreva o número entre 0~100

&fontAlignY= : O valor padrão para uma linha é 50 (centro da imagem). Para várias linhas (separadas por -nl-), o padrão será calculado para que as linhas fiquem empilhadas uma em cima da outra e centralizadas.

Se houver várias linhas em &text= (-nl-), fornecer múltiplos &fontAlignY= aplicará o alinhamento vertical individualmente para cada linha.

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

Tamanho da Descrição

Altere o tamanho da fonte da descrição. O valor padrão é 20.

Escreva &descSize= após a consulta desc

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

Não escreva px

Alinhamento da Descrição

Altere o alinhamento horizontal da descrição (x). Escreva o número entre 0~100

&descAlign= : O valor padrão é 50, no centro da imagem

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

Alinhamento Vertical da Descrição

Altere o alinhamento vertical da descrição (y). Escreva o número entre 0~100

&descAlignY= : O valor padrão é 60, no centro da imagem

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

Girar

Use &rotate= para girar o texto.

Você também pode usar números negativos.

Recomendação de número. ☞ 0 ~ 360, 0 ~ -360.

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

Contorno do Texto

Altere o contorno do texto.

Escreva &stroke= após a consulta.

O valor deve ser o código Hex sem o '#'

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

Recomenda-se usar com strokeWidth.

Quando usado sozinho, o strokeWidth tem o valor padrão de 1.

Largura do Contorno

Altere a largura do contorno do texto.

Escreva &strokeWidth= após a consulta do contorno.

O valor deve ser maior ou igual a 0.

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

É recomendado usar junto com stroke.

Quando utilizado sozinho, a cor padrão do contorno é 'B897FF'.

Demo

Wave

wave

Egg

egg

Shark

shark

Slice

slice

Rect

rect

Soft

soft

Rounded

rounded

Cylinder

cylinder

Waving

waving

Transparent

transparent

Venom

venom

Speech

speech

Blur

blur