+ 1

Where is the yellow in the box when using linear gradient color stops?

When all colours are set to 10% for linear gradients, why the yellow cannot be seen? https://code.sololearn.com/WCoDR1aPuQN5/?ref=app

8th Oct 2022, 4:26 AM
silentlearner
silentlearner - avatar
12 Respostas
+ 1
I have no idea why i spent my day on this I do hope this help https://code.sololearn.com/W2SystJ87i5m/?ref=app
10th Oct 2022, 12:22 PM
Abdul Samad
Abdul Samad - avatar
+ 5
You got the gradient in very small part of your form only. Try in this way: background: linear-gradient(blue 0%, yellow 50%, green 100%);
8th Oct 2022, 5:33 AM
JaScript
JaScript - avatar
+ 3
silentlearner try 10% 20% 10% It is basically hiding the yellow behind the blue.
8th Oct 2022, 4:33 AM
BroFar
BroFar - avatar
+ 3
I think đŸ€” it is more due to the editor Sololearn is using in this case silentlearner because yes according to css linear-gradient is suppose to be 10% 10% 10% but it is acting more like 10% blue sliver of yellow then green which looks more like 90%
8th Oct 2022, 4:46 AM
BroFar
BroFar - avatar
+ 3
There isn't anything wrong with the editor. Hopefully this explanation will help to answer the other questions. Blue shows up even though the color stop is set to 0% because it is on a gradient scale. Starting point is left 0% ending point is right 100% The purpose of linear gradient is to blend two or more colors evenly on the scale. The stop tells where to stop the color. Example: linear-gradient(blue 0%, yellow 50%, green 100%); Start blending colors. Blue stop at 0% Yellow stop at 50% Green Stop at 100% Means Blend blue and yellow evenly between 0% and 50% of the scale. Blend yellow and green evenly between 50% and 100% of the scale.
8th Oct 2022, 7:31 PM
Chris Coder
Chris Coder - avatar
+ 3
silentlearner here is something I did to do stops with multiple colors .box1 { width: 300px; height: 100px; margin: 4px; color: #FFF; background: linear-gradient(blue 5% 15%, yellow 20% 30%, orange 35% 50%, green 55% 65%, red 70% 80%, purple 85% 100%); } each color 10% fading within 5% as a blended padding of sorts. alternatively linear-gradient .box1 { width: 300px; height: 100px; margin: 4px; color: #FFF; background: linear-gradient(blue 0%, yellow 20%, orange 35%, green 50%, red 70%, purple 90%); }
10th Oct 2022, 1:54 AM
BroFar
BroFar - avatar
+ 2
silentlearner I got something that may help. I hope you find it enjoyable and learn at the same time. â˜ș https://code.sololearn.com/WXm5Wt3MoKU8/?ref=app
10th Oct 2022, 3:07 AM
Chris Coder
Chris Coder - avatar
+ 2
BroFar , JaScript , Chris Coder , Abdul Samad Thank you for helping me to understand Color Stops
11th Oct 2022, 1:21 AM
silentlearner
silentlearner - avatar
+ 1
From what I gathered in the Color Stops lesson, the next percentage should start from where the previous colour stops. Why doesn't the yellow continue from where blue stops in this case?
8th Oct 2022, 4:35 AM
silentlearner
silentlearner - avatar
+ 1
I wanted to see how the Color Stops will divide the colours as it was mentioned that the next percentage should start from where the previous colour stops. The yellow still doesn't show even if I put all colours to 30%
8th Oct 2022, 7:50 AM
silentlearner
silentlearner - avatar
+ 1
Why does blue show up even though the color stop was set to 0%?
8th Oct 2022, 7:52 AM
silentlearner
silentlearner - avatar
0
What about yellow? What is the reason that it is not showing?
9th Oct 2022, 10:49 PM
silentlearner
silentlearner - avatar