Text Templater
Menu
Home
About
Documentation
GitHub
Toggle theme
Pastebin URL
Get Template
GitHub Gist URL
Get Template
Input Template
[nobr] [div=display: none;] [font=Familjen Grotesk]@fluticasone[/font] [font=Monomakh]@fluticasone[/font] [/div] [div=display: block; --bfont: 'Familjen Grotesk', sans-serif; --tfont: 'Monomakh', serif; --mainimg: url(&Image URL \ text&) center center/cover no-repeat; --imgfilter: saturate(0%) brightness(140%) contrast(155%); --color1: #e0e0e0; --color2: #141414; --color3: #808080; position: relative; box-sizing: border-box; font-size: 0; width: clamp(300px,100% - 2rem,1000px); margin: 1rem auto; height: auto; --lighttexture: url(https://i.imgur.com/7WTyOMP.jpeg) center center/auto repeat; --darktexture: url(https://i.imgur.com/VOjLJaA.jpeg) center center/auto repeat; --noise: url(https://i.imgur.com/UdjBt1F.png) center center/auto repeat;] [div=display: flex; width: 100%; flex-flow: row wrap; justify-content: flex-end; align-items: flex-start; box-sizing: border-box; font-family: var(--tfont); font-size: .75rem; line-height: 1; gap: 1rem; padding: 0px 1rem; text-transform: uppercase; color: var(--color1); text-shadow: var(--color2) 1px 0px 0; margin-bottom: .65rem;] [div=flex: 0 auto;] &Word List \ text \ word1 word2 word3& [/div] [div=flex: 0 auto;] &Art Credit \ text& [/div] [/div] [div=display: flex; flex-flow: row wrap; box-sizing: border-box; border: 1px solid var(--color2); background: var(--lighttexture), var(--color1); background-blend-mode: multiply; position: relative; container-type: inline-size; overflow: hidden;] [div=position: absolute; z-index: 1; top: 0px; left: 0px; height: 100%; width: 100%; background: var(--mainimg); filter: var(--imgfilter); mix-blend-mode: darken;] img layer [/div] [div=position: absolute; z-index: 2; top: 0px; left: 0px; height: 100%; width: 100%; opacity: .1; background: var(--noise); mix-blend-mode: soft-light;] texture noise [/div] [div=position: absolute; top: 0px; left: 0px; z-index: 3; width: 100%; height: auto; display: flex; flex-flow: row wrap-reverse; justify-content: flex-start; align-items: stretch; mix-blend-mode: difference;] [div=flex: 2 100px; min-height: 12.75rem; background: var(--color3);] spacer [/div] [div=flex: 3 300px; aspect-ratio: 4/3;] spacer [/div] [/div] [div=container-type: size; height: 100%; width: 100%; top: 0; left: 0; position: absolute; z-index: 4; pointer-events: none; mix-blend-mode: difference;] [div=position: absolute; left: 0px; bottom: 0px; width: 100cqh; height: auto; font-size: clamp(2rem,3.25cqw,100px); line-height: .95; transform: rotate(-90deg) translate(0%,100%); transform-origin: bottom left; padding: 1.15rem 1rem; box-sizing: border-box; color: var(--color1); font-family: var(--tfont);] &Name \ text \ LastName, FirstName& [/div] [/div] [div=position: relative; z-index: 5; width: 100%; height: auto; display: flex; flex-flow: row wrap-reverse; justify-content: flex-start; align-items: stretch;] [div=flex: 2 100px; height: 12.75rem; box-sizing: border-box; padding: 2.25rem; padding-left: clamp(2rem + 1.85rem,3.25cqw + 1.85rem,100px); padding-right: 1.5rem; position: relative;] [div=display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-end; gap: .75rem; width: 100%; height: 100%; container-type: inline-size; font-family: var(--bfont); color: var(--color1); overflow: hidden;] [div=flex: 0 auto; width: 100cqw; font-size: 1.25rem; line-height: 1;] &Age in Text \ text& (&Age \ text&)[br][/br] &Power \ text& [/div] [div=flex: 1 3rem; height: auto; box-sizing: content-box; width: 100cqw; padding-right: 75px; overflow-x: hidden; overflow-y: auto; font-size: 1rem; line-height: 1.2; text-wrap: pretty;] &Short Blurb \ content& [/div] [/div] [/div] [div=flex: 3 300px; aspect-ratio: 4/3;] spacer [/div] [/div] [div=position: absolute; pointer-events: none; z-index: 6; top: 0px; left: 0px; height: 100%; width: 100%; background: var(--darktexture); mix-blend-mode: screen;] texture dark [/div] [/div] [/div] [/nobr] csblurb.txt 6 KB
Generate Form Fields
Debug Mode
[ "[nobr]\r\n [div=display: none;]\r\n [font=Familjen Grotesk]@fluticasone[/font]\r\n [font=Monomakh]@fluticasone[/font]\r\n [/div]\r\n [div=display: block;\r\n --bfont: 'Familjen Grotesk', sans-serif;\r\n --tfont: 'Monomakh', serif;\r\n --mainimg: url(", { "type": "text", "description": "Image URL", "marker": { "type": "text", "description": "Image URL", "defaultValue": "", "original": "&Image URL \\ text&", "indices": [ 256, 273 ] } }, ") center center/cover no-repeat;\r\n --imgfilter: saturate(0%) brightness(140%) contrast(155%);\r\n --color1: #e0e0e0;\r\n --color2: #141414;\r\n --color3: #808080;\r\n position: relative;\r\n box-sizing: border-box;\r\n font-size: 0;\r\n width: clamp(300px,100% - 2rem,1000px);\r\n margin: 1rem auto;\r\n height: auto;\r\n --lighttexture: url(https://i.imgur.com/7WTyOMP.jpeg) center center/auto repeat;\r\n --darktexture: url(https://i.imgur.com/VOjLJaA.jpeg) center center/auto repeat;\r\n --noise: url(https://i.imgur.com/UdjBt1F.png) center center/auto repeat;]\r\n [div=display: flex;\r\n width: 100%;\r\n flex-flow: row wrap;\r\n justify-content: flex-end;\r\n align-items: flex-start;\r\n box-sizing: border-box;\r\n font-family: var(--tfont);\r\n font-size: .75rem;\r\n line-height: 1;\r\n gap: 1rem;\r\n padding: 0px 1rem;\r\n text-transform: uppercase;\r\n color: var(--color1);\r\n text-shadow: var(--color2) 1px 0px 0;\r\n margin-bottom: .65rem;]\r\n [div=flex: 0 auto;]\r\n ", { "type": "text", "description": "Word List", "marker": { "type": "text", "description": "Word List", "defaultValue": "word1 word2 word3", "original": "&Word List \\ text \\ word1 word2 word3&", "indices": [ 1322, 1359 ] }, "value": "word1 word2 word3" }, "\r\n [/div]\r\n [div=flex: 0 auto;]\r\n ", { "type": "text", "description": "Art Credit", "marker": { "type": "text", "description": "Art Credit", "defaultValue": "", "original": "&Art Credit \\ text&", "indices": [ 1421, 1439 ] } }, "\r\n [/div]\r\n [/div]\r\n [div=display: flex;\r\n flex-flow: row wrap;\r\n box-sizing: border-box;\r\n border: 1px solid var(--color2);\r\n background: var(--lighttexture), var(--color1);\r\n background-blend-mode: multiply;\r\n position: relative;\r\n container-type: inline-size;\r\n overflow: hidden;]\r\n [div=position: absolute;\r\n z-index: 1;\r\n top: 0px;\r\n left: 0px;\r\n height: 100%;\r\n width: 100%;\r\n background: var(--mainimg);\r\n filter: var(--imgfilter);\r\n mix-blend-mode: darken;]\r\n img layer\r\n [/div]\r\n [div=position: absolute;\r\n z-index: 2;\r\n top: 0px;\r\n left: 0px;\r\n height: 100%;\r\n width: 100%;\r\n opacity: .1;\r\n background: var(--noise);\r\n mix-blend-mode: soft-light;]\r\n texture noise\r\n [/div]\r\n [div=position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n z-index: 3;\r\n width: 100%;\r\n height: auto;\r\n display: flex;\r\n flex-flow: row wrap-reverse;\r\n justify-content: flex-start;\r\n align-items: stretch;\r\n mix-blend-mode: difference;]\r\n [div=flex: 2 100px;\r\n min-height: 12.75rem;\r\n background: var(--color3);]\r\n spacer\r\n [/div]\r\n [div=flex: 3 300px;\r\n aspect-ratio: 4/3;]\r\n spacer\r\n [/div]\r\n [/div]\r\n [div=container-type: size;\r\n height: 100%;\r\n width: 100%;\r\n top: 0;\r\n left: 0;\r\n position: absolute;\r\n z-index: 4;\r\n pointer-events: none;\r\n mix-blend-mode: difference;]\r\n [div=position: absolute;\r\n left: 0px;\r\n bottom: 0px;\r\n width: 100cqh;\r\n height: auto;\r\n font-size: clamp(2rem,3.25cqw,100px);\r\n line-height: .95;\r\n transform: rotate(-90deg) translate(0%,100%);\r\n transform-origin: bottom left;\r\n padding: 1.15rem 1rem;\r\n box-sizing: border-box;\r\n color: var(--color1);\r\n font-family: var(--tfont);]\r\n ", { "type": "text", "description": "Name", "marker": { "type": "text", "description": "Name", "defaultValue": "LastName, FirstName", "original": "&Name \\ text \\ LastName, FirstName&", "indices": [ 3697, 3731 ] }, "value": "LastName, FirstName" }, "\r\n [/div]\r\n [/div]\r\n [div=position: relative;\r\n z-index: 5;\r\n width: 100%;\r\n height: auto;\r\n display: flex;\r\n flex-flow: row wrap-reverse;\r\n justify-content: flex-start;\r\n align-items: stretch;]\r\n [div=flex: 2 100px;\r\n height: 12.75rem;\r\n box-sizing: border-box;\r\n padding: 2.25rem;\r\n padding-left: clamp(2rem + 1.85rem,3.25cqw + 1.85rem,100px);\r\n padding-right: 1.5rem;\r\n position: relative;]\r\n [div=display: flex;\r\n flex-flow: column nowrap;\r\n align-items: flex-start;\r\n justify-content: flex-end;\r\n gap: .75rem;\r\n width: 100%;\r\n height: 100%;\r\n container-type: inline-size;\r\n font-family: var(--bfont);\r\n color: var(--color1);\r\n overflow: hidden;]\r\n [div=flex: 0 auto;\r\n width: 100cqw;\r\n font-size: 1.25rem;\r\n line-height: 1;]\r\n ", { "type": "text", "description": "Age in Text", "marker": { "type": "text", "description": "Age in Text", "defaultValue": "", "original": "&Age in Text \\ text&", "indices": [ 4866, 4885 ] } }, " (", { "type": "text", "description": "Age", "marker": { "type": "text", "description": "Age", "defaultValue": "", "original": "&Age \\ text&", "indices": [ 4888, 4899 ] } }, ")[br][/br]\r\n ", { "type": "text", "description": "Power", "marker": { "type": "text", "description": "Power", "defaultValue": "", "original": "&Power \\ text&", "indices": [ 4933, 4946 ] } }, "\r\n [/div]\r\n [div=flex: 1 3rem;\r\n height: auto;\r\n box-sizing: content-box;\r\n width: 100cqw;\r\n padding-right: 75px;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n font-size: 1rem;\r\n line-height: 1.2;\r\n text-wrap: pretty;]\r\n ", { "type": "content", "description": "Short Blurb", "marker": { "type": "content", "description": "Short Blurb", "original": "&Short Blurb \\ content&", "indices": [ 5373, 5395 ] } }, "\r\n [/div]\r\n [/div]\r\n [/div]\r\n [div=flex: 3 300px;\r\n aspect-ratio: 4/3;]\r\n spacer\r\n [/div]\r\n [/div]\r\n [div=position: absolute;\r\n pointer-events: none;\r\n z-index: 6;\r\n top: 0px;\r\n left: 0px;\r\n height: 100%;\r\n width: 100%;\r\n background: var(--darktexture);\r\n mix-blend-mode: screen;]\r\n texture dark\r\n [/div]\r\n [/div]\r\n [/div]\r\n[/nobr]\r\ncsblurb.txt\r\n6 KB" ]
[]
ivorydeuce.template 1.1
By glucoseguardian
Image URL
Word List
Art Credit
Name
Age in Text
Age
Power
Short Blurb
Generate Final Output
Output
ivorydeuce.template 1.1 - Text Templater