GradientText
Text filled with a gradient: the theme's, a preset, or any two colours at an angle.
Demo
Build beautiful apps in one file
SunsetOceanForest
Any two colours, at any angle, as a paragraph.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/gradient_text.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/gradient_text.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/gradient_text.qwe
view GradientTextDemo() = <div.demo-stack> <Heading level={1}>Build <GradientText id="gradient-text-demo-accent">beautiful</GradientText> apps in one file</Heading> <div.demo-row style="font: 650 26px/1.2 var(--ui-font)"> <GradientText preset="sunset" id="gradient-text-demo-sunset">Sunset</GradientText> <GradientText preset="ocean">Ocean</GradientText> <GradientText preset="forest">Forest</GradientText> </div> <div style="font: 600 20px/1.3 var(--ui-font)"> <GradientText tag="p" from="#0ea5e9" to="#8b5cf6" angle={135} id="gradient-text-demo-custom">Any two colours, at any angle, as a paragraph.</GradientText> </div> </div>Source
ui/gradient_text.qwe
// GradientText: text filled with a gradient, for a word or a line that should shine// on a landing page.//// <GradientText>Ship faster</GradientText>// <Heading level={1}>Build <GradientText preset="sunset">beautiful</GradientText> apps</Heading>// <GradientText from="#0ea5e9" to="#8b5cf6" angle={135} tag="p">Any two colours, at any angle.</GradientText>//// children: the text. preset: "accent" (default: the theme's accent to its info// colour, so it follows the theme), "sunset", "ocean" or "forest". from and to: two// CSS colours instead of a preset. angle: the gradient's direction in degrees (90,// left to right). tag: "span" (default), "strong", "p" or "div". id: the element's id.// In forced-colours mode (high contrast) it is plain text.import ui/theme.qwe use ui_clslet gradient_text_css = css`.ui-gradient { display: inline-block; background: linear-gradient(var(--ui-gradient-angle, 90deg), var(--ui-gradient-from), var(--ui-gradient-to)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; --ui-gradient-from: var(--ui-accent); --ui-gradient-to: var(--ui-info); }p.ui-gradient, div.ui-gradient { display: block; width: fit-content; margin: 0; }.ui-gradient-sunset { --ui-gradient-from: #f97316; --ui-gradient-to: #ec4899; }.ui-gradient-ocean { --ui-gradient-from: #0ea5e9; --ui-gradient-to: #6366f1; }.ui-gradient-forest { --ui-gradient-from: #16a34a; --ui-gradient-to: #0d9488; }@media (forced-colors: active) { .ui-gradient { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }`// A colour as it may go into a style: letters, digits, # ( ) , . % and spaces.fn gradient_text_color(c: str) -> str = re.replace(c, "[^a-zA-Z0-9#(),.% -]", "")view GradientText(preset: str = "accent", from: str? = null, to: str? = null, angle: int = 90, tag: str = "span", id: str? = null, class: str? = null, children) { style global gradient_text_css let vars = [angle != 90 && `--ui-gradient-angle: ${angle}deg`, from != null && `--ui-gradient-from: ${gradient_text_color(from)}`, to != null && `--ui-gradient-to: ${gradient_text_color(to)}`] | filter((v) => v != false) | join("; ") let cls = ui_cls(["ui-gradient", preset != "accent" && `ui-gradient-${preset}`, class]) let style = vars != "" ? vars : null match tag { "strong" => <strong class={cls} id={id} style={style}>{children}</strong> "p" => <p class={cls} id={id} style={style}>{children}</p> "div" => <div class={cls} id={id} style={style}>{children}</div> _ => <span class={cls} id={id} style={style}>{children}</span> }}Related
EyebrowA small uppercase label above a heading, in a tone, with an optional dot.6 views · 8 downloadsAbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 6 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.6 views · 7 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.5 views · 7 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloads
Thread
Thread 0 posts
On GradientText: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.