On va danser sous les néons ?

Effets de neon sur le texte

First featurette heading. It'll blow your mind

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia. Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.

Oh yeah, it's that good. See for yourself

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia. Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Curabitur augue diam, dapibus non blandit eu, consectetur euismod mi. Sed gravida ipsum vitae neque vulputate, a tristique mauris rutrum.

And lastly, this one. Checkmate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia. Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Curabitur augue diam, dapibus non blandit eu, consectetur euismod mi. Sed gravida ipsum vitae neque vulputate, a tristique mauris rutrum.

 <article class="color-1 padded txt-color-5"> 
<header class="two-third-xl">
    <h3><span class="is-regular">First featurette heading.</span> <span class="txt-color-1 neon is-blinking">It'll blow your mind</span></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.
        Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.</p>
</header>
  
  <header class="two-third-xl">
    <h3><span class="is-regular">Oh yeah, it's that good.</span> <span class="is-blinking--violet">See for yourself</span></h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.
        Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Curabitur augue diam, dapibus non blandit eu, consectetur euismod mi. Sed gravida ipsum vitae neque vulputate, a
        tristique mauris rutrum.
    </p>
    </header>
   <header class="two-third-xl">
    <h3><span class="is-regular">And lastly, this one.</span> <span class="is-blinking--yellow">Checkmate</span></h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique luctus lacinia. Donec aliquet in ante vitae vulputate. Vestibulum eu massa ut urna mollis eleifend et sed velit. Integer viverra erat vel aliquet lacinia.
        Vestibulum sed nisi eu ex aliquam pretium eu sed enim. Morbi dapibus nisi eu nibh tempus, id vulputate velit efficitur. Curabitur augue diam, dapibus non blandit eu, consectetur euismod mi. Sed gravida ipsum vitae neque vulputate, a
        tristique mauris rutrum.
    </p>
	</header>
  
</article> 

Notes

 /* VARIABLES */
:root {
    /* COULEURS pour l'effet */
    /* --color-1: #0f4c81; /* Classic Blue Pantone 2020 */
    --color-7: #fff6a9; /* Yellow */
    --color-8: #fccaff; /* Light Pink */
    
    
    /* NEON FX (text-shadow) */
    --yellow-neon: 0 0 5px #ffa500,
        0 0 15px #ffa500,
        0 0 20px #ffa500,
        0 0 40px #ffa500,
        0 0 60px #ff0000,
        0 0 10px #ff8d00,
        0 0 98px #ff0000;
    
    --yellow-neon--text: var(--color-7);
    
    --violet-neon: 0 0 5px #f562ff,
        0 0 15px #f562ff,
        0 0 25px #f562ff,
        0 0 20px #f562ff,
        0 0 30px #890092,
        0 0 80px #890092,
        0 0 80px #890092;
    
    --violet-neon--text: var(--color-8);
    
} 

/* EFFETS */

/* Neon */
.neon {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #0ff,
    0 0 80px #0ff,
    0 0 90px #0ff,
    0 0 100px #0ff,
    0 0 150px #0ff;
}

/* Blink */

/* Yellow */
.is-blinking--violet {
    text-shadow: var(--yellow-neon);
    color: var(--yellow-neon--text); 
    animation: violet-blink 7s infinite;
}

/* Yellow */
.is-blinking--yellow {
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000; 
    color: #fff6a9;
    animation: yellow-blink 7s infinite;
}

@keyframes violet-blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    color: var(--violet-neon--text);
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; 
  }
}

@keyframes yellow-blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: var(--yellow-neon);
    color: var(--yellow-neon--text);
  }
} 

Notes