Question 327019 in Html Question posted in
Some basic documentation can be found here.

Html – Problem with styling text in the horizontal carousel. The text should change the color

The text should change the color dependent on where it is. For example on the left corner it should be orange, on the right violet.You can see clear transition in the middle where there is a border of two colors.

Actually, it is a linear-gradient background that I set as an overlay on the top layer. However I cannot get as same result as in figma.

What I did:
enter image description here
The code:

.banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: rgb(255, 255, 255);
    &__overlay{
        position: absolute;
        background: linear-gradient(90deg, rgba(255,105,20, 0.5) 0%, rgba(145,69,253, 0.5) 100%);
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    &__wrapper{
        display: flex;
        align-items: center;
        gap: 78px;
        animation: banner 20s linear infinite;
    }
    &__item {
        color: black;
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
    }

}

@keyframes banner {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}

How it must look like:
enter image description here

<div class="banner">
        <div class="banner__overlay"></div>
        <div class="banner__wrapper">
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
        </div>
        <div class="banner__wrapper">
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                SECURITY
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                FAULT-TOLERANCE
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
            <div class="banner__item">
                BOT-MITIGATION
            </div>
            <div class="banner__item">
                <img src="../img/banner-icon.svg" alt="">
            </div>
        </div>
    </div>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    All what I had to do was add mix-blend-mode: multiply; for banner__overlay and correct my linear gradient.

    I have added two more points in linear-gradient in order to make two side colors more bright.

    .banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255, 255, 255, 0.07);
    height: 30px;
    &__overlay{
        position: absolute;
        background: linear-gradient(90deg, rgba(255,105,20,0.7) 0%, rgba(255,105,20,0.7) 45%, rgba(145,69,253,0.7) 55%, rgba(145,69,253,0.7) 100%);
        width: 100%;
        height: 100%;
        z-index: 10;
        mix-blend-mode: multiply;
    }
    &__wrapper{
        display: flex;
        align-items: center;
        gap: 78px;
        animation: banner 20s linear infinite;
    }
    &__item {
        color: rgba(255, 255, 255, 1);
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
    }

}

    Now it looks good and as close similar as design in figma. enter image description here


  2. 0

    Just replace this background: linear-gradient(90deg, rgba(255,105,20, 0.5) 0%, rgba(145,69,253, 0.5) 100%); with this background: linear-gradient(90deg, rgba(185, 68, 0, 0.5) 0%, rgba(82, 28, 148, 0.8) 100%);.

    Explanation : linear-gradient is written like that : background: linear-gradient(90deg, rgba(185, 68, 0, 0.5) 0%, rgba(82, 28, 148, 0.8) 100%);. This part rgba(185, 68, 0, 0.5) is for the color on the left, and this part rgba(82, 28, 148, 0.8) is for the color on the right. You may adjust each color of each extremity as you wish. The computer will do the rest for you.

    Login or Signup to reply.
  3. 0

    looking cool. You can use background clip, position must be relative. And text is transparent.

    position: relative; /* gradient is applied relative to the item */
z-index: 20; /*  the text is on top of the overlay */
color: transparent; /*text transparent */
background-clip: text; /* gradient only to the text */

    Here is full css

    
.banner {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    background: rgb(255, 255, 255);
    &__overlay {
        position: absolute;
        background: linear-gradient(90deg, rgba(255, 105, 20, 0.5) 0%, rgba(145, 69, 253, 0.5) 100%);
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    &__wrapper {
        display: flex;
        align-items: center;
        gap: 78px;
        animation: banner 20s linear infinite;
    }
    &__item {
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        text-transform: uppercase;
        white-space: nowrap;
        position: relative;
        z-index: 20; 
        color: transparent;
        background-clip: text; 
    }
    &__item:nth-child(odd) {
        background-image: linear-gradient(90deg, rgba(255, 105, 20, 0.5) 0%, rgba(145, 69, 253, 0.5) 100%);
    }
    &__item:nth-child(even) {
        background-image: linear-gradient(90deg, rgba(145, 69, 253, 0.5) 0%, rgba(255, 105, 20, 0.5) 100%);
    }
}

@keyframes banner {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

    https://codepen.io/pmdnawaz1/pen/eYXGWpq

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search