sudonix

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

CSS3: Gradient Generator

Development

1 Posts 1 Posters 276 Views 1 Watching

undefined Offline
undefined Offline
phenomlab

wrote on 22 Jun 2022, 15:12 Edited Invalid Date last edited by

#1

Another resource I’m using pretty much full time is the CSS3 Gradient Generator below. It’s extremely useful, and provides a very quick method to generate gradients when required. Both powerful and easy to use, it should be in every web developer’s arsenal

Loading...

Please wait while the description loads.

Loading...
Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…
1 Reply Last reply

1

Hello! It looks like you're interested in this conversation, but you don't have an account yet.

Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (ether email, or push notification). You'll also be able to save bookmarks, use reactions, and upvote to show your appreciation to other community members.

With your input, this post could be even better 💗

Register Log in

1/1

22 Jun 2022, 15:12

Related Topics

undefined

Widget | CSS customization
Watching Ignoring Scheduled Pinned Locked Moved Solved WordPress css
1 20 Sept 2023, 07:23
20 Sept 2023, 07:23

17 Votes

53 Posts

4k Views

undefined 5 Nov 2023, 11:00

@Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.
undefined

hover link effect
Watching Ignoring Scheduled Pinned Locked Moved Solved Customisation css link hover
1 30 Oct 2022, 20:52
30 Oct 2022, 20:52
1

6 Votes

18 Posts

1k Views

undefined 11 Sept 2023, 12:34

@DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
undefined

answers appearance css code request
Watching Ignoring Scheduled Pinned Locked Moved Solved Customisation css answers
1 31 Jul 2022, 13:06
31 Jul 2022, 13:06
1

1 Votes

11 Posts

1k Views

undefined 31 Jul 2022, 21:38

@DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
undefined

SWATCH: Colours, Gradients, and much more
Watching Ignoring Scheduled Pinned Locked Moved Development colour gradient
1 22 Jun 2022, 15:10
22 Jun 2022, 15:10

1 Votes

1 Posts

219 Views

No one has replied
undefined

[NodeBB] greeting message
Watching Ignoring Scheduled Pinned Locked Moved Solved Customisation css nodebb javascript
1 26 Mar 2022, 09:31
26 Mar 2022, 09:31
1

3 Votes

2 Posts

786 Views

undefined 26 Mar 2022, 11:55

@pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
undefined

[NODEBB] Scroll Button
Watching Ignoring Scheduled Pinned Locked Moved Solved Customisation css javascript html scroll button
1 16 Jan 2022, 16:50
16 Jan 2022, 16:50
1

0 Votes

7 Posts

1k Views

undefined 17 Jan 2022, 20:51

@downpw ooops. Forgot that. Thanks for adding.
undefined

[NODEBB] Welcome Message
Watching Ignoring Scheduled Pinned Locked Moved Solved Customisation css html nodebb
1 15 Jan 2022, 22:13
15 Jan 2022, 22:13
2

13 Votes

20 Posts

3k Views

undefined 20 Apr 2025, 11:31

@DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
undefined

Avatar on Topic Header
Watching Ignoring Scheduled Pinned Locked Moved Solved Customisation css avatar header
1 8 Jan 2022, 00:50
8 Jan 2022, 00:50
1

0 Votes

9 Posts

802 Views

undefined 14 Jan 2022, 14:00

@jac said in Avatar on Topic Header: @downpw said in Avatar on Topic Header: Great Plugin I make it a bit cleaner via this CSS code: /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; } Do you have a screenshot of how this looks with the CSS change? Just added this change, thanks @DownPW

sudonix

CSS3: Gradient Generator

Loading...

Loading...

Related Topics

Individual Categories