Skip to content
OverviewSolutions
10
Comments
1
P
Henry Olivares
@Henolivares

All comments

  • Kate Dames•250
    @funficientSubmitted about 1 year ago

    Three questions for the community please!

    1. Why can't I get my linear-gradient background for the circle to work?

    I tried the variable defined in the root section: --color-circle-gradient as well as typing the linear-gradient out: linear-gradient(hsl(256, 72%, 46, 1), hsl(241, 72%, 46%, 0)); But nothing works. But if I add a static color (not a gradient) it works perfectly fine!

    1. What is the best way to handle the transparency? It feels as if I'm doing the same thing in multiple places and there should be a better way?

    2. Where can I find resources to help me add the json variables? I can't find any solutions in vanilla HTML and CSS, only Tailwind and other frameworks I'm not familiar with. I would love to give this a go!

    And any other feedback on how to improve would be appreciated. Thank you!

    Results Summary Component

    3
    Henry Olivares•120
    @HenolivaresPosted about 1 year ago

    Hi, I reviewed your code, and I found the issue. It's actually so simple, just a typo.

    In the custom property --color--circle-gradient-violet: hsla(256, 72%, 46, 1); you missed a % at the third value, that caused anywhere you use that property won't work. It should be --color--circle-gradient-violet: hsla(256, 72%, 46%, 1); and that's it.

    A suggestion I can give you is that you can assign custom properties to another, you have --color--circle-gradient-violet: hsl(256, 72%, 46%, 1); --color--circle-gradient-persian-blue: hsl(241, 72%, 46%, 0); --color-circle-gradient: linear-gradient(hsl(256, 72%, 46, 1), hsl(241, 72%, 46%, 0));

    which is repeating the values, it should be like this --color--circle-gradient-violet: hsla(256, 72%, 46%, 1); --color--circle-gradient-persian-blue: hsla(241, 72%, 46%, 0);--color-circle-gradient: linear-gradient(var(--color--circle-gradient-violet), var(--color--circle-gradient-persian-blue));

    btw, sorry for my English if i make a mistake.

    Marked as helpful
    1