Skip to content

Blinking text Effect

Customisation
3 2 1.3k 1
  • Hello 🙂

    small blinking text effect that I put on the name of my forum:

    here the code :

    :root {
         --site-title-blink: #CCCCCC;
    }
    
    /*Blink text effect */
    @keyframes text-blink {
        0%,
        20%,
        22%,
        25%,
        28%,
        55%,
        80%,
        100% {
            text-shadow: 0 0 2px #000,
                0 0 10px var(--site-title-blink),
                0 0 5px var(--site-title-blink),
                0 0 25px var(--site-title-blink);
            opacity: 1;
            color: var(--site-title-blink);
        }
    
        21%,
        24%,
        56% {
            opacity: 0.2;
            text-shadow: none;
        }
    }
    
    .navbar-default .navbar-brand {
        animation: 0.5s text-blink 1.5s infinite alternate;
        animation-iteration-count: 5;
        animation-duration: 1000ms;
    }
    
  • DownPWundefined DownPW marked this topic as a regular topic on
  • Hello 🙂

    small blinking text effect that I put on the name of my forum:

    here the code :

    :root {
         --site-title-blink: #CCCCCC;
    }
    
    /*Blink text effect */
    @keyframes text-blink {
        0%,
        20%,
        22%,
        25%,
        28%,
        55%,
        80%,
        100% {
            text-shadow: 0 0 2px #000,
                0 0 10px var(--site-title-blink),
                0 0 5px var(--site-title-blink),
                0 0 25px var(--site-title-blink);
            opacity: 1;
            color: var(--site-title-blink);
        }
    
        21%,
        24%,
        56% {
            opacity: 0.2;
            text-shadow: none;
        }
    }
    
    .navbar-default .navbar-brand {
        animation: 0.5s text-blink 1.5s infinite alternate;
        animation-iteration-count: 5;
        animation-duration: 1000ms;
    }
    

    @DownPW looks great ! Has that “broken neon light” look that you see in films. When I saw the title of this post, I instantly thought of the flashing text everyone had on their website in the 90’s and early 00’s but I like this effect a lot.

    Custom-Bates-Motel-No-Vacancy-Glass-Neon-Light-Sign-Beer-Bar.jpg_Q90.jpg_.webp

  • @DownPW looks great ! Has that “broken neon light” look that you see in films. When I saw the title of this post, I instantly thought of the flashing text everyone had on their website in the 90’s and early 00’s but I like this effect a lot.

    Custom-Bates-Motel-No-Vacancy-Glass-Neon-Light-Sign-Beer-Bar.jpg_Q90.jpg_.webp

    @phenomlab

    I love it too

    @phenomlab said in Blinking text Effect:

    Has that “broken neon light” look that you see in films.

    It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too 😉


Related Topics
  • NodeBB socket with CloudFlare

    Solved Performance socket cloudflare nodebb
    24
    3 Votes
    24 Posts
    10k Views
    Solved. Tuto here and here
  • Interesting Widget code, but can't fetch API

    Solved Customisation nodebb
    26
    2 Votes
    26 Posts
    8k Views
    @Panda said in Interesting Widget code, but can’t fetch API: How did you drop that widget into the post there? I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already? Yes, here https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044 It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets. @Panda said in Interesting Widget code, but can’t fetch API: Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that? By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget. Hope this makes sense?
  • Where are widgets stored?

    Solved Configure nodebb
    3
    1 Votes
    3 Posts
    1k Views
    @phenomlab Thanks, have DMed you
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    13k Views
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • Link Text Colour.

    Solved Customisation customise
    5
    2
    2 Votes
    5 Posts
    2k Views
    @phenomlab Thx again for the reply. Well I am sure that it will be well worth the wait. I will watch with anticipation. For now it is OK. Just small minor irritations I fell in a lot of NodeBB ‘default’ things.
  • NodeBB changing color of the text

    Solved Customisation
    7
    2 Votes
    7 Posts
    2k Views
    @phenomlab said in NodeBB changing color of the text: @marusaky This ought to to it a.permalink, a.permalink:active, a.permalink:focus, a.permalink:hover { color: #ffffff; } works great, thanks a lot
  • 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.
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    2k Views
    @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