Looking for someone to translate this README.
Supports simple Generator. However, we recommend reading the README for more detailed adjustments.
- How to Use
- Types
- Color
- Custom Color List
- Section
- Reversal
- Height
- Text
- Desc
- Text Background
- Text Animation
- Font Color
- Font Size
- Font Align - X
- Font Align - Y
- Desc Size
- Desc Align - X
- Desc Align - Y
- Rotate
- Demo
Any of Idea -> Idea-Issue or PR
https://capsule-render.vercel.app/api?
Just write query parameter end of this url. Like this
Markdown:
HTML:
<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90" />
Type data makes to change Background Image.
Write &type= on the URL
Change Background Image!
&color=auto: Proven random color. List are here&color=timeAuto: Proven random color, but is decided by time.&color=random: Really random color. I don't know what colors are showing.&color=gradient: Proven random gradient. List are here&color=timeGradient: Proven random gradient, but is decided by time.&color=_hexcode: default(#B897FF)&color=_custom_gradient: Custom gradient. If write as&color=0:EEFF00,100:a82da8, it will be converted to { 0%: 'EEFF00', 100%: 'a82da8' }. (e.g. DEMO)
If you use auto mode. no need to change fontColor.
auto also change fontColor auto.
If you use static color. Do not write '#'
When use
timeAutoandtimeGradient?Used section
headerandfooterat the same time.
You can customize the list of colors that will appear randomly only for &color=auto and &color=gradient.
Write &customColorList= on the URL.
- If you use
&color=auto, look at pallete list. - If you use
&color=gradient, look at gradient list.
Pick the color patterns you want and remember the idx value.
For example, if the idx values โโare 0, 2, and 3, write: &customColorList=0,2,3
If you want to make many apperances of idx=2, you can write them repeatedly. (e.g. &customColorList=0,2,2,2,2,3)
You can use the specified combination using theme=.
Even if color and fontColor are used, theme has the highest priority.
Check the list of available themes at pallete_theme.json.
I'm currently adding combinations from the Link:theme little by little.
Section data makes reverse Background Image.
§ion=header: (default)§ion=footer
Write §ion= on the URL
Reverse the image left and right. (Color at the same time)
&reversal=false: (default)&reversal=true
Change Image Size. Default value is 120.
Write &height= on the URL
Do not write
px
Input text over the Image.
Write Something &text= .
You can't use some Special Characters. Like '#', '&', '/' ...
It makes confused API
It is recommended to use
%20(blank) and-nl-(new line) only
Input desc over the Image.
Write Something &desc= .
You can't use some Special Characters. Like '#', '&', '/' ...
It makes confused API
It is recommended to use
%20(blank) only
Background of Text.
Write &textBg=true to active.
If you want to increase background-size, add
%20between text values. This is because background-size depends on the length of the english-text. (%20 means spacing)
Make the text dynamic.
Write &animation= , if you want to use.
fadeIn: fadeIn 1.2sscaleIn: scaleIn .8sblink: blink .6sblinking: blinking 1.6stwinkling: twinkling 4s
Change text color. Default value is 000000.
Value should be Hex code with erased '#'
Write &fontColor= behind Text query
Change text font size. Default value is 70.
Write &fontSize= behind Text query
Do not write
px
Change text horizontal-align (x). write number between 0~100
&fontAlign= : Default value is 50. center of image
In case there are multiple lines in
&text=(-nl-), providing multiple&fontAlign=will apply different horizontal-align to each line individually.
Change text vertical-align (y). write number between 0~100
&fontAlignY= : Default value for one line is 50 (center of image). For multiple lines (separated by -nl-), default will be calculated to get lines stacked on top of each other and centered.
In case there are multiple lines in
&text=(-nl-), providing multiple&fontAlignY=will apply different vertical-align to each line individually.
Change desc font size. Default value is 20.
Write &descSize= behind desc query
Do not write
px
Change desc horizontal-align (x). write number between 0~100
&descAlign= : Default value is 50. center of image
Change text vertical-align (y). write number between 0~100
&descAlignY= : Default value is 60. center of image
Usage &rotate= , to rotate text.
You can also use negative number.
Recommend number arrange. โ
0 ~ 360,0 ~ -360.
Change text stroke.
Write &stroke= behind query
Value should be Hex code with erased '#'
Recommended to use with
strokeWidth.When used alone, strokeWidth defaults to 1.
Change text stroke width.
Write &strokeWidth= behind stroke query
Value must be greater than or equal to 0.
Recommended to use with
stroke.When used alone, stroke defaults to 'B897FF'.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
