CODEWITHSUNDEEP
csssasscss-animations
Eric
Eric

Reputation: 5

Trouble implementing a gradient background

I am trying to implement this design on my website- https://kevinhufnagl.com/how-to-stripe-website-gradient-effect/ I have copied most of the code but I am getting an error in the scss code.

    --section-gap: calc( #{$standard_space});
    --gradient-padding:120px;
    --gradient-title-margin: 100px;
    --section-skew-Y: -12deg;
    --section-angle-sin: 0.212;
    --transform-origin-x: calc(var(--section-gap) * 0.8);
    @include mq($container_medium_width) {
        --section-gap: calc((100vw - #{$container_medium_width} + #{$standard_space} * 2) / 2);
    }


    .section-title-1 {
        font-size:64px;
        font-weight:700;
        text-transform: uppercase;
        width:500px;
        max-width:80vw;
        @include mq(450px) {
            font-size:70px;
        }
        @include mq($tablet) {
            font-size:90px;
        }
        @include mq($laptop) {
            font-size:100px;
            width:600px;
        }
    }

    .text {
        line-height: 1;
        margin: var(--gradient-title-margin) 0 0 0;
        text-transform: none;
        letter-spacing: 2px;
        min-height: 200px;
        display: flex;
        align-items: flex-end;
    }
    
    .text-above {
        color: var(--font-color);
        position: relative;
    }
    
    .text-under {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
    }
    .text-under-blended {
        color: #3a3a3a;
        mix-blend-mode: color-burn;
    }
    
    .text-under-overlay {
        opacity: 0.2;
        color: #3a3a3a;
    }

    #gradient-canvas {
        width:100%;
        height:100%;
        --gradientcolorzero: #6ec3f4;
        --gradientcolorone: #3a3aff;
        --gradientcolortwo: #ff61ab;
        --gradientcolorthree: #E63946;
   }

The error is "{ expected" and "at-rule or selector expected" for the first line. I know there should be some sort of selector maybe, but I don't know what to do exactly. I have used the scss compiler. I have attached the rest of the code here too. The HTML code is

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="gradient.js" ></script>
    <title>website</title>
    <link rel="stylesheet" href="./styles/styles.css" />
</head>
<body>

    <section class="section_top">
        <div class="section-container">
            <div class="section-layout-container container-medium with-padding">
                <div class="section-layout">
                    <div class="gradient-area">
                        <div class="gradient-title-area">
                        <h1 class="text text-above section-title-1"><?= $title ?></h1>
                        <div  class="section_background-wrap">
                            <canvas id="gradient-canvas" data-js-darken-top data-transition-in></canvas>
                        </div>
                        <div class="text text-under text-under-blended section-title-1"><?= $title ?></div>
                        <div class="text text-under text-under-overlay section-title-1"><?= $title ?></div>
                        </div>
                    </div>
                    <h2 class="section-title-2 subtitle"><?= get_field("subtitle")?></h2>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

I cant put all the javascript code here because of the character limit but it can be found on the link attached. There it is in the gradient animation file.

Would really appreciate some help on how to implement this! I tried placing some selectors and the code compiled but I would just get a blank screen. I then also got the $standard_space not defined error (this variable is in the first line of the scss code)

Upvotes: 0

Views: 77

Answers (1)

Alan H.
Alan H.

Reputation: 16568

you’re setting CSS variables outside of a block.

Change your first lines to this:

:root {
    --section-gap: calc( #{$standard_space});
    --gradient-padding:120px;
    --gradient-title-margin: 100px;
    --section-skew-Y: -12deg;
    --section-angle-sin: 0.212;
    --transform-origin-x: calc(var(--section-gap) * 0.8);
    @include mq($container_medium_width) {
        --section-gap: calc((100vw - #{$container_medium_width} + #{$standard_space} * 2) / 2);
    }
}

Upvotes: 1

Related Questions