Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Can Ignite Support Gradients? about ignite HOT 5 OPEN

twostraws commented on September 15, 2024

Can Ignite Support Gradients?

from ignite.

Comments (5)

twostraws commented on September 15, 2024

Hi, Joe! I've added initial support for gradients; they work really well. However, they are background gradients, whereas you're looking for masking what looks like something fairly custom. From what I understand, there is some CSS support for this with a WebKit prefix, but there isn't any support for it in Ignite at this time.

from ignite.

mergesort commented on September 15, 2024

This looks great, I love how you mimicked SwiftUI's backgroundStyle.

I did a little bit of research and admittedly my web development experience is relatively weak compared to my Swift, but I was able to put together a minimal solution that works across browsers. Not sure if you'd like to do anything with it but I can confirm that this works in Chrome, Firefox, and Safari, all of the colors looking approximately how I would want them to render.

<html lang="en">
<head>
	<style>
		body {
			display: flex;
		}
		.gradient-text {
			font-size: 50px; /* Adjust as needed */
			font-weight: bold;
			background: linear-gradient(to right, #3b82f6, #9333ea, #f472b6, #fb923c);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text; /* For Firefox */
			color: transparent; /* Fallback for browsers that do not support text-fill-color */
		}
	</style>
</head>
<body>
	<div class="gradient-text">Plinky</div>
</body>
</html>

from ignite.

pd95 commented on September 15, 2024

@twostraws: How about adding a style (conforming to HeadElement) to allow injecting such customization classes?
Either "structured" (e.g. distinction between rules for class and tags) or just "raw" (e.g. just the style tag with the content as shown above).

from ignite.

twostraws commented on September 15, 2024

@mergesort I looked into how it might work too, and although the CSS itself seems straightforward I'm not really knowledgeable enough to know the full range of how it works. That is, while we could make it work easily enough for one example, what happens if folks apply it to other elements that we hadn't tried? I'd certainly be interested to see some PRs from folks who know this particular piece of CSS better than I do!

from ignite.

twostraws commented on September 15, 2024

@pd95 I suspect the right way to do that particular thing is by adding custom stylesheet into the theme using MetaLink, then placing it in the Assets folder.

from ignite.

Recommend Projects

Can Ignite Support Gradients? about ignite HOT 5 OPEN

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent