Skip to content

Rotating Star Effect

Solved Let's Build It
17 4 4.5k 1

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • 2 Votes
    1 Posts
    463 Views
    No one has replied
  • 4 Votes
    7 Posts
    4k Views
    @DownPW said in "Glass" (shine) effect on Sudonix logo: Perfect with White background theme but much less with black themes backgrounds (we see the edges of the shine effect) Yes, you will need to modify the CSS according. For example, on Sudonix, I use --bs-node-shine: linear-gradient(90deg, rgba(28, 38, 44, 0) 0%, rgba(74, 100, 116, 0.5) 50%, rgba(28, 38, 44, 0) 100%); Essentially, you choose the base background, the shine colour, and then the base background again.
  • No valid role attribute on elements

    Solved WordPress wordpress
    10
    0 Votes
    10 Posts
    3k Views
    I found it here, ins elements can not have aria elements
  • How to position ads responsively

    Solved WordPress wordpress
    13
    3 Votes
    13 Posts
    3k Views
    @phenomlab yes that’s the problem with these J’s, I will try my best , If I find something better I will share. Thanks
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    2k Views
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: 1669026666905-e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    5k Views
    @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.
  • tag icon in front of tags

    Solved Customisation css
    5
    3 Votes
    5 Posts
    2k Views
    @phenomlab said in tag icon in front of tags: @crazycells Are you using Font Awesome Free ? If so, try this span.tag:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; margin-right: 5px; margin-left: 5px; font-weight: 900; } yeap, this worked thanks a lot.
  • 1 Votes
    13 Posts
    4k Views
    @phenomlab said in Hardening WordPress - Reducing the attack vector: @jac Microsoft’s and Google’s Authenticator both support TOTP - essentially, a time based system that changes every 30 seconds. The main principle here is that the device itself carrying the One Time Passcode only needs to be in sync with the source server in terms of time, and can be completely offline with no internet access. Provided the time matches on both devices, the One Time Passcode will be accepted. Applications such as Microsoft Authenticator and Authy also support push notification meaning you just choose either yes or no on your device when prompted, and then that response is sent back to the origin which then determines if access is granted or not. One of the best looking password less authentication models was CLEF - sadly, this product died out due to a lack of funding (if I recall correctly) although some open source implementations of this have appeared quite recently. Essentially, both products will achieve the same goal. TOTP is an industry standard, and widely accepted across the board. Not all services offer push confirmation. Many thanks for the detailed reply mate. There’s some great advice in there that will help me secure my accounts.