Learn CSS Colors by Building a Set of Colored Markers - Step 57

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

My question is actually about step 56. If the color stop in the linear gradient for the red is 0%, then I would expect that there would be no red at all.

Your code so far

/* file: index.Ext.html */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>

/* file: styles.Ext.css */

h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.red {
  background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
}

.green {
  background-color: #007F00;
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

Your mobile information:

iPhone - iOS16.2

Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 57

Link to the challenge:

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hi,
Here’s how I think it works:
The 180deg means the gradient is set from top to bottom. Now you have red set to 0%, which means red should start at the very top. Green set to 50% makes green start in the middle. When you have green beginning in the middle and red starting from the top, it slowly blends from red to green. The percentage doesn’t mean the amount of a color, it just sets the position of the color in the gradient. At 0%, red is fully shown, then it blends towards green. When reaching 50%, green is fully shown, and finally, the same towards blue. You can play with those percentages to see how they change positions.
I hope this helps!

4

Yes, it helped very much! Thanks!

1 Like