How can I remove this black shadow from the box?-CodePudding

I have a problem. Can you help me, how I can fix this black shadow from the letter, that it will look like the other letters? ty guys :)

As you can see in some the letters H,V,A and W have a black box around them, they are flickering that it will look like a neon sign. hopefully you can help me.

HTML

<body>
    <div >
    <h1 >Villains WorldWide</h1>
        <nav>
            <ul >
                <li><a href="#">Shop</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">About us</a></li>
            </ul>
        </nav>
        <a href="#" ><button>Contact</button></a>
    </div>
    <div >
        <h1  data-text="U">T<span >H</span>IS IS&nbsp;<span >V</span>ILL<span >A</span>INS WORLD<span >W</span>IDE</h1>
        <img src="Media\VillainsWorldWide_GIF_LOGO_Animation.gif" alt="VillainsWorldWideLogo" >
    </div>
    <script src="script.js"></script>
</body>

CSS

* {
    background-color: black;
}

.neon {
    font-size: 60px;
    display: flex;
    justify-content: center;
    padding-top: 75px;
    color: #FFD5FF;   
    top: 50%;
    left: 50%;
    translate: (-50%, -50%);
    text-shadow: 1px 0px 4px #FFD5FF, 2px 0px 4px #FFD5FF, 3px 0px 4px #FFD5FF, 2px 0px 3px #D42CCA, 2px 3px 15px #D42CCA, 2px 0px 15px, 5px 0px 125px, 20px 0vw 200px #D42CCA,40px 0vw 200px #D42CCA;
    letter-spacing: 8px;
}

    
.flicker-slow{
    animation: flicker 3s linear infinite;
    text-decoration: none;
  }
  
  .flicker-fast{
    animation: flicker 1s linear infinite;
    text-decoration: none;
  }

  @keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: .99;
    
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.4;
    }
  }

CodePudding user response：

I edited my answer to include the right solution, now i think that's working fine... Just add the background-color: transparent; to classes flicker-slow and flicker-fast, like this:

.flicker-slow{
    background-color: transparent;
    animation: flicker 3s linear infinite;
    text-decoration: none;
  }
  
  .flicker-fast{
    background-color: transparent;
    animation: flicker 1s linear infinite;
    text-decoration: none;
  }

With this change the black shadow should disappear, take a look: https://jsfiddle.net/yagobiermann/Lk1m6qr9/49/

CodePudding user response：

I think it's because the span elements are taking the background color from the *. Try adding to your CSS something along the lines of

span{
  background-color:transparent;
}

CodePudding user response：

Darlo answered it correctly. I also think you can try changing your span property.

     <!-- language: lang-css -->
       span {
          background-color: transparent;
        }
    <!-- end snippet -->

Here's an article on CSS cascading orders, this might help. https://www.w3.org/TR/CSS21/cascade.html#cascade https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span Span tag is an inline container already, for styling or grouping content/elements. Your flicker looks eye-catching though. Very nice.