Sunday

How can I remove this black shadow from the box?

Issue

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 class="header">
    <h1 class="nav-name">Villains WorldWide</h1>
        <nav>
            <ul class="nav-left">
                <li><a href="#">Shop</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">About us</a></li>
            </ul>
        </nav>
        <a href="#" class="nav-right"><button>Contact</button></a>
    </div>
    <div class="main">
        <h1 class="neon" data-text="U">T<span class="flicker-fast">H</span>IS IS&nbsp;<span class="flicker-slow">V</span>ILL<span class="flicker-slow">A</span>INS WORLD<span class="flicker-fast">W</span>IDE</h1>
        <img src="Media\VillainsWorldWide_GIF_LOGO_Animation.gif" alt="VillainsWorldWideLogo" class="logo">
    </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;
    }
  }

Solution

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/

Answered By - Yago Biermann

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Sunday

How can I remove this black shadow from the box?

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels