Start Page Enhancements#754
Conversation
This comment has been minimized.
This comment has been minimized.
| } | ||
|
|
||
| // text gradient on PROCEED | ||
| background: linear-gradient(135deg, #1a1a1a 0%, #262626 50%, #1890ff 100%); |
There was a problem hiding this comment.
This does not seem to work. (I think this is supposed to be a gradient on the text. Is that correct?)
There was a problem hiding this comment.
It’s actually working. The animation is set to animation: shimmer 8s ease-in-out infinite;, which creates a smooth and slower effect. The color is also very subtle, as shown in the image below, making it less prominent while still looking visually appealing when noticed.
It becomes even more noticeable on smaller screen sizes when the text wraps onto two lines, as shown in the second image.
There was a problem hiding this comment.
I see. I think the problem is that the intensity of the effect is based on the width on the browser window.
In my browser on a screen with a width of 2500px, the effect is very nuanced.
I think the problem is that the gradient is applied over the complete width of the screen and not the width of the text.
Maybe it would be better to use something like "width: fit-content" on the element to ensure that the effect looks the same regardless of screen size.
| -webkit-text-fill-color: transparent; | ||
| background-clip: text; | ||
| background-size: 200% auto; | ||
| animation: shimmer 8s ease-in-out infinite; |
There was a problem hiding this comment.
I'm not sure if this animation is working. I don't see any animation on the text.
There was a problem hiding this comment.
please see comment above
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
✅ Successfully created Preview Deployment. |
2 participants
Summary