Skip to content
Submitted about 1 year ago

Responsive Results Summary UI built with HTML and CSS

Fabian•150
@slowjo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Reusing colours but with different opacity with custom properties

In this design there are four identically styled elements, but each one has it's own colour (the red, orange, green and blue displays). These elements use the same colour for their title, background and subtle borders, but the opacity differs (for example the background is very faint, title is very bright).

I tried to avoid repeating the allocation of the same colour, but with different opacity values, to each detail of an individual element. To achieve this I gave each differently coloured element a class that contained only the h, s, and l value of their respective colour as custom properties. The general styling of this element type then uses these custom properties to construct the hsla colour for the title, background and border.

Overall, this seems to work fine, but it feels a little 'hacky', so my question is do you have any suggestions on how to do this differently, particularly in a way that might be clearer to read for someone who looks at the code for the first time?

Community feedback

  • MaximilianoDanielGarcia•2,000
    @MaximilianoDanielGarciaPosted about 1 year ago

    Hi slowjo, great job!

    I can see that you have a good understanding of css. So, let me tell you some details that I saw:

    • The gradient-colors in the result column is different from the design.
    • Your breakpoint in media-query should by 375px for mobile resolutions
    • The color of shadow is different
    • Check your fonts to see if they need are bold or not

    Let me know if you need help with these.

    Marked as helpful
    0
    Fabian•150
    @slowjoPosted about 1 year ago

    Hey Maximiliano, thank you very much for your feedback! Honestly, I was really struggling trying to match these gradient colours to the design. Can you share some advice on how to do this properly? Really cool that you pointed out the difference in shadow colour, I might not have noticed it but I will fix it now thanks to you!

    0
    MaximilianoDanielGarcia•2,000
    @MaximilianoDanielGarciaPosted about 1 year ago

    @slowjo Sure!

    Here an example of a gradient using those colors of the design:

    /*Set this variables in your :root or body css*/ --light-slate-blue-bg: hsl(252, 100%, 67%); --light-royal-blue-bg: hsl(241, 81%, 54%);

    /* Use in column background*/ background-image: linear-gradient(var(--light-slate-blue-bg), var(--light-royal-blue-bg));

    Marked as helpful
    0
    Fabian•150
    @slowjoPosted about 1 year ago

    @MaximilianoDanielGarcia Thanks, that looks good!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord