Dual Color Scrolling Text Effect with HTML CSS

Some basic CSS keywords and both layers have their own colors as we make it Light & Dark Mode to make a Dual Color Scrolling Text Effect

Namaste!

Introduction

hey, in this article we are going to share with you the “Dual Color Scrolling Text Effect”.

We just took two layers of texts and edited them with CSS. used some z-index, some basic CSS keywords, and both layers have their own colors as we make it Light & Dark Mode to make a Dual Color Scrolling Text Effect.

Dual Color Scrolling Text Effect YouTube Tutorial

Dual Color Scrolling Text Effect Source Code

.html File Code

Put this code inside <body> Your Code Here </body>

<section class="section top-section">
        <div class="content-container content-theme-dark">
            <div class="content-inner">
                <div class="content-center">
                    <h1>Coding</h1>
                    <p>Dual Color Text Effect <a href="#">Coding Hindi</a></p>
                </div>
            </div>
        </div>
    </section>
    <section class="section bottom-section">
        <div class="content-container content-theme-light">
            <div class="content-inner">
                <div class="content-center">
                    <h1>Coding</h1>
                    <p>Dual Color Text Effect <a href="#">Coding Hindi</a></p>
                </div>
            </div>
        </div>
    </section>

.css File Code

Put this code inside <style> Your Code Here </style> or inside style.css file

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    font-size: 14px;
    font-family: poppins, sans-serif;
    user-select: none;
}

a {
    text-decoration: none;
}

.section {
    height: 100vh;
    min-height: 500px;
    position: relative;
}

.content-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    clip: rect(auto, auto, auto, auto);
    pointer-events: none;
}

.content-inner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    padding: 0;
    z-index: 99;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    perspective: 1000;
    -webkit-perspective: 1000;
    pointer-events: all;
}

.content-center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.top-section {
    background: linear-gradient(135deg, #f4583a 0%, #cd1e38 100%);
}

.bottom-section {
    background: #d4fef2;
}

.section h1 {
    font-size: 200px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.section p,
.section a {
    font-weight: 700;
    letter-spacing: 7px;
    text-transform: capitalize;
    text-align: center;
}

.content-theme-dark h1 {
    color: #e33e39;
    text-shadow: 0 20px 40px rgb(0, 0, 0, .5)
}

.content-theme-dark p,
.content-theme-dark a {
    color: #fea98a;
}

.content-theme-light h1 {
    color: #062930;
    text-shadow: 0 20px 40px rgb(0, 0, 0, .5)
}

.content-theme-light p,
.content-theme-light a {
    color: #728e93;
}

Thank You!

Share your love
Default image
Neeraj Lamba
Articles: 38

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games learn about Operating systems and OS Structure Design
Secured By miniOrange